TinyMCE drag&drop toolbar editing

administrator/language/en-GB/en-GB.plg_editors_tinymce.ini

@@ -74,6 +74,8 @@ PLG_TINY_FIELD_NEWLINES_DESC="New lines will be created using the selected optio
 PLG_TINY_FIELD_NEWLINES_LABEL="New Lines"
 PLG_TINY_FIELD_NONBREAKING_DESC="Insert non-breaking space entities."
 PLG_TINY_FIELD_NONBREAKING_LABEL="Non-breaking"
+PLG_TINY_FIELD_NUMBER_OF_SETS_LABEL="Number of Sets"
+PLG_TINY_FIELD_NUMBER_OF_SETS_DESC="Number of sets that can be created. Minimum 3"
 PLG_TINY_FIELD_PASTE_DESC="Show or hide the Paste button."
 PLG_TINY_FIELD_PASTE_LABEL="Paste"
 PLG_TINY_FIELD_PATH_DESC="If set to ON, it displays the set classes for the marked text."
@@ -135,8 +137,67 @@ PLG_TINY_FIELD_VISUALCHARS_DESC="See invisible characters, specifically non-brea
 PLG_TINY_FIELD_VISUALCHARS_LABEL="Visualchars"
 PLG_TINY_FIELD_WORDCOUNT_DESC="Turn on/off Wordcount."
 PLG_TINY_FIELD_WORDCOUNT_LABEL="Wordcount"
+PLG_TINY_SET_TITLE="Set %s"
+PLG_TINY_SET_PRESET_BUTTON_ADVANCED="Use advanced preset"
+PLG_TINY_SET_PRESET_BUTTON_MEDIUM="Use medium preset"
+PLG_TINY_SET_PRESET_BUTTON_SIMPLE="Use simple preset"
 PLG_TINY_TEMPLATE_LAYOUT1_DESC="HTML layout."
 PLG_TINY_TEMPLATE_LAYOUT1_TITLE="Layout"
 PLG_TINY_TEMPLATE_SNIPPET1_DESC="Simple HTML snippet."
 PLG_TINY_TEMPLATE_SNIPPET1_TITLE="Simple Snippet"
 PLG_TINY_XML_DESCRIPTION="TinyMCE is a platform independent web based JavaScript HTML WYSIWYG Editor."
+
+; TinyMCE toolbar buttons
+PLG_TINY_TOOLBAR_BUTTON_ALIGNCENTER="Align center"
+PLG_TINY_TOOLBAR_BUTTON_ALIGNJUSTIFY="Justify"
+PLG_TINY_TOOLBAR_BUTTON_ALIGNLEFT="Align left"
+PLG_TINY_TOOLBAR_BUTTON_ALIGNRIGHT="Align right"
+PLG_TINY_TOOLBAR_BUTTON_ANCHOR="Anchor"
+PLG_TINY_TOOLBAR_BUTTON_BACKCOLOR="Background color"
+PLG_TINY_TOOLBAR_BUTTON_BLOCKQUOTE="Blockquote"
+PLG_TINY_TOOLBAR_BUTTON_BOLD="Bold"
+PLG_TINY_TOOLBAR_BUTTON_BULLIST="Bulleted list"
+PLG_TINY_TOOLBAR_BUTTON_CHARMAP="Special character"
+PLG_TINY_TOOLBAR_BUTTON_CODE="Source code"
+PLG_TINY_TOOLBAR_BUTTON_CODESAMPLE="Codesample"
+PLG_TINY_TOOLBAR_BUTTON_COPY="Copy"
+PLG_TINY_TOOLBAR_BUTTON_CUT="Cut"
+PLG_TINY_TOOLBAR_BUTTON_EMOTICONS="Emoticons"
+PLG_TINY_TOOLBAR_BUTTON_FONTSELECT="Font Select"
+PLG_TINY_TOOLBAR_BUTTON_FONTSIZESELECT="Fontsize Select"
+PLG_TINY_TOOLBAR_BUTTON_FORECOLOR="Text color"
+PLG_TINY_TOOLBAR_BUTTON_FORMATSELECT="Format select"
+PLG_TINY_TOOLBAR_BUTTON_FULLSCREEN="Fullscreen"
+PLG_TINY_TOOLBAR_BUTTON_HR="Horizontal line"
+PLG_TINY_TOOLBAR_BUTTON_IMAGE="Insert/edit image"
+PLG_TINY_TOOLBAR_BUTTON_INDENT="Increase indent"
+PLG_TINY_TOOLBAR_BUTTON_INSERTDATETIME="Insert date/time"
+PLG_TINY_TOOLBAR_BUTTON_ITALIC="Italic"
+PLG_TINY_TOOLBAR_BUTTON_LINK="Insert/edit link"
+PLG_TINY_TOOLBAR_BUTTON_LTR="Left to right"
+PLG_TINY_TOOLBAR_BUTTON_MEDIA="Insert/edit video"
+PLG_TINY_TOOLBAR_BUTTON_NONBREAKING="Nonbreaking space"
+PLG_TINY_TOOLBAR_BUTTON_NUMLIST="Numbered list"
+PLG_TINY_TOOLBAR_BUTTON_OUTDENT="Decrease indent"
+PLG_TINY_TOOLBAR_BUTTON_PAGEBREAK="Page break"
+PLG_TINY_TOOLBAR_BUTTON_PASTE="Paste"
+PLG_TINY_TOOLBAR_BUTTON_PASTETEXT="Paste as text"
+PLG_TINY_TOOLBAR_BUTTON_PREVIEW="Preview"
+PLG_TINY_TOOLBAR_BUTTON_PRINT="Print"
+PLG_TINY_TOOLBAR_BUTTON_REDO="Redo"
+PLG_TINY_TOOLBAR_BUTTON_REMOVEFORMAT="Clear formatting"
+PLG_TINY_TOOLBAR_BUTTON_RTL="Right to left"
+PLG_TINY_TOOLBAR_BUTTON_SEARCHREPLACE="Find and replace"
+PLG_TINY_TOOLBAR_BUTTON_SPELLCHECKER="Spellcheck"
+PLG_TINY_TOOLBAR_BUTTON_STYLESELECT="Style Select"
+PLG_TINY_TOOLBAR_BUTTON_STRIKETHROUGH="Strikethrough"
+PLG_TINY_TOOLBAR_BUTTON_SUBSCRIPT="Subscript"
+PLG_TINY_TOOLBAR_BUTTON_SUPERSCRIPT="Superscript"
+PLG_TINY_TOOLBAR_BUTTON_TABLE="Table"
+PLG_TINY_TOOLBAR_BUTTON_TEMPLATE="Template"
+PLG_TINY_TOOLBAR_BUTTON_UNDERLINE="Underline"
+PLG_TINY_TOOLBAR_BUTTON_UNDO="Undo"
+PLG_TINY_TOOLBAR_BUTTON_UNLINK="Remove link"
+PLG_TINY_TOOLBAR_BUTTON_VISUALBLOCKS="Show blocks"
+PLG_TINY_TOOLBAR_BUTTON_VISUALCHARS="Show invisible characters"
+PLG_TINY_TOOLBAR_BUTTON_SEPARATOR="Separator"

layouts/plugins/editors/tinymce/field/tinymcebuilder.php

@@ -0,0 +1,198 @@
+<?php
+/**
+ * @package     Joomla.Plugin
+ * @subpackage  Editors.tinymce
+ *
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+extract($displayData);
+
+/**
+ * Layout variables
+ * -----------------
+ * @var   string  $autocomplete   Autocomplete attribute for the field.
+ * @var   boolean $autofocus      Is autofocus enabled?
+ * @var   string  $class          Classes for the input.
+ * @var   string  $description    Description of the field.
+ * @var   boolean $disabled       Is this field disabled?
+ * @var   string  $group          Group the field belongs to. <fields> section in form XML.
+ * @var   boolean $hidden         Is this field hidden in the form?
+ * @var   string  $hint           Placeholder for the field.
+ * @var   string  $id             DOM id of the field.
+ * @var   string  $label          Label of the field.
+ * @var   string  $labelclass     Classes to apply to the label.
+ * @var   boolean $multiple       Does this field support multiple values?
+ * @var   string  $name           Name of the input field.
+ * @var   string  $onchange       Onchange attribute for the field.
+ * @var   string  $onclick        Onclick attribute for the field.
+ * @var   string  $pattern        Pattern (Reg Ex) of value of the form field.
+ * @var   boolean $readonly       Is this field read only?
+ * @var   boolean $repeat         Allows extensions to duplicate elements.
+ * @var   boolean $required       Is this field required?
+ * @var   integer $size           Size attribute of the input.
+ * @var   boolean $spellcheck     Spellcheck state for the form field.
+ * @var   string  $validate       Validation rules to apply.
+ * @var   string  $value          Value attribute of the field.
+  *
+ * @var   array   $menus           List of the menu items
+ * @var   array   $menubarSource   Menu items for builder
+ * @var   array   $buttons         List of the buttons
+ * @var   array   $buttonsSource   Buttons by group, for the builder
+ * @var   array   $toolbarPreset   Toolbar presset (default values)
+ * @var   int     $setsAmount      Amount of sets
+ * @var   array   $setsNames       List of Sets names
+ * @var   JForm[] $setsForms       Form with extra options for an each set
+ *
+ * @var   JLayoutFile  $this       Context
+ */
+
+JHtml::_('behavior.core');
+JHtml::_('stylesheet', 'media/editors/tinymce/skins/lightgray/skin.min.css', array('version' => 'auto', 'relative' => false));
+JHtml::_('jquery.ui', array('core', 'sortable'));
+JHtml::_('script', 'editors/tinymce/tinymce-builder.js', array('version' => 'auto', 'relative' => true));
+
+$doc = JFactory::getDocument();
+$doc->addScriptOptions('plg_editors_tinymce_builder', array(
+		'menus'         => $menus,
+		'buttons'       => $buttons,
+		'toolbarPreset' => $toolbarPreset,
+		'formControl'   => $name . '[toolbars]',
+	)
+);
+$doc->addStyleDeclaration('
+    #joomla-tinymce-builder{
+		margin-left: -180px;
+	}
+	.mce-menubar,
+	.mce-panel {
+		min-height: 18px;
+		border-bottom: 1px solid rgba(217,217,217,0.52);
+		white-space: normal;
+	}
+	.mce-tinymce {
+		margin-bottom: 20px;
+	}
+	.mce-panel .drop-area-highlight{
+		background-color: #d0d0d0;
+	}
+	.mce-panel .mce-btn.ui-state-highlight{
+		height: 28px;
+		width: 40px;
+		background-color: #409740;
+		border: 1px solid #f0f0f0;
+	}
+	.timymce-builder-toolbar .mce-btn.ui-state-highlight{
+		height: 22px;
+		width: 28px;
+	}
+');
+
+?>
+<div id="joomla-tinymce-builder">
+	<div class="mce-tinymce mce-container mce-panel">
+		<div class="mce-container-body mce-stack-layout">
+
+			<div class="mce-container mce-menubar mce-toolbar mce-stack-layout-item">
+				<div class="mce-container-body mce-flow-layout timymce-builder-menu source" data-group="menu"
+					data-value="<?php echo $this->escape(json_encode($menubarSource)); ?>">
+				</div>
+			</div>
+
+			<div class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item">
+				<div class="mce-container-body mce-flow-layout timymce-builder-toolbar source" data-group="toolbar"
+					data-value="<?php echo $this->escape(json_encode($buttonsSource)); ?>">
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Render tabs for each set -->
+	<ul class="nav nav-tabs" id="set-tabs">
+		<?php foreach ( $setsNames as $num => $title ): ?>
+		<li class="<?php echo $num === $setsAmount - 1 ? 'active' : '' ?>">
+			<a href="#set-<?php echo $num; ?>"><?php echo $title; ?></a>
+		</li>
+		<?php endforeach; ?>
+	</ul>
+
+	<!-- Render tab content for each set -->
+	<div class="tab-content">
+		<?php
+		$presetButtonClases = array(
+			'simple'   => 'btn-success',
+			'medium'   => 'btn-info',
+			'advanced' => 'btn-warning',
+		);
+		foreach ( $setsNames as $num => $title ):
+
+			// Check whether the values exists, and if empty then use from preset
+			if (empty($value['toolbars'][$num]['menu'])
+				&& empty($value['toolbars'][$num]['toolbar1'])
+				&& empty($value['toolbars'][$num]['toolbar2']))
+			{
+				// Take the preset for default value
+				switch ($num) {
+					case 0:
+						$preset = $toolbarPreset['advanced'];
+						break;
+					case 1:
+						$preset = $toolbarPreset['medium'];
+						break;
+					default:
+						$preset = $toolbarPreset['simple'];
+				}
+
+				$value['toolbars'][$num] = $preset;
+			}
+
+			// Take existing values
+			$valMenu = empty($value['toolbars'][$num]['menu'])     ? array() : $value['toolbars'][$num]['menu'];
+			$valBar1 = empty($value['toolbars'][$num]['toolbar1']) ? array() : $value['toolbars'][$num]['toolbar1'];
+			$valBar2 = empty($value['toolbars'][$num]['toolbar2']) ? array() : $value['toolbars'][$num]['toolbar2'];
+		?>
+			<div class="tab-pane <?php echo $num === $setsAmount - 1 ? 'active' : '' ?>" id="set-<?php echo $num; ?>">
+				<div class="btn-toolbar clearfix">
+					<div class="btn-group pull-right">
+
+					<?php foreach(array_keys($toolbarPreset) as $presetName):
+						$btnClass = empty($presetButtonClases[$presetName])	? 'btn-primary' : $presetButtonClases[$presetName];
+						?>
+						<button type="button" class="btn btn-mini <?php echo $btnClass; ?> button-action"
+						    data-action="setPreset" data-preset="<?php echo $presetName; ?>" data-set="<?php echo $num; ?>">
+							<?php echo JText::_('PLG_TINY_SET_PRESET_BUTTON_' . $presetName); ?>
+						</button>
+					<?php endforeach; ?>
+
+						<button type="button" class="btn btn-mini btn-danger button-action"
+						     data-action="clearPane" data-set="<?php echo $num; ?>">
+							<?php echo JText::_('JCLEAR'); ?></button>
+					</div>
+				</div>
+
+				<div class="mce-tinymce mce-container mce-panel">
+					<div class="mce-container-body mce-stack-layout">
+						<div class="mce-container mce-menubar mce-toolbar timymce-builder-menu target"
+							data-group="menu" data-set="<?php echo $num; ?>"
+							data-value="<?php echo $this->escape(json_encode($valMenu)); ?>">
+						</div>
+						<div class="mce-toolbar-grp mce-container mce-panel timymce-builder-toolbar target"
+						    data-group="toolbar1" data-set="<?php echo $num; ?>"
+						    data-value="<?php echo $this->escape(json_encode($valBar1)); ?>">
+						</div>
+						<div class="mce-toolbar-grp mce-container mce-panel timymce-builder-toolbar target"
+						    data-group="toolbar2" data-set="<?php echo $num; ?>"
+						    data-value="<?php echo $this->escape(json_encode($valBar2)); ?>">
+						</div>
+					</div>
+				</div>
+
+				<!-- Render the form for extra options -->
+				<?php echo $this->sublayout('setoptions', array('form' => $setsForms[$num])); ?>
+			</div>
+		<?php endforeach; ?>
+	</div>
+</div>

layouts/plugins/editors/tinymce/field/tinymcebuilder/setoptions.php

@@ -0,0 +1,26 @@
+<?php
+/**
+ * @package     Joomla.Plugin
+ * @subpackage  Editors.tinymce
+ *
+ * @copyright   Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+extract($displayData);
+
+/**
+ * Layout variables
+ * -----------------
+ * @var   JForm        $form    Form with extra options for the set
+ * @var   JLayoutFile  $this    Context
+ */
+
+?>
+<div class="setoptions-form-wrapper">
+<?php foreach ($form->getGroup(null) as $field):?>
+	<?php echo $field->renderField(); ?>
+<?php endforeach; ?>
+</div>