Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.0] [new feature] TinyMce sample image plugin #36968

Closed
wants to merge 8 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions administrator/language/en-GB/plg_editors_tinymce.ini
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ PLG_TINY_FIELD_VALUE_WRAP="Wrap"
PLG_TINY_FIELD_WORDCOUNT_LABEL="Word Count"
PLG_TINY_LEGACY_WARNING="<p>The <a href=\"%s\">TinyMCE Editor Plugin</a> has been updated. Currently it uses your existing configuration. By editing the plugin, you can now assign and customise various layouts to specific user groups.</p><p>Warning: when editing the plugin, you will lose all your previous settings!</p>"
PLG_TINY_MENU_CONTAINER="Container"
PLG_TINY_PLACEHOLDER_IMAGE="Insert placeholder image"
PLG_TINY_PLACEHOLDER_IMAGE_SIZE="%s Image"
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"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* plugin.js
*
* @copyright (C) 2022 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

/* eslint-disable no-undef */
tinymce.PluginManager.add('placeholderimage', function(editor) {
// Add a button
editor.ui.registry.addIcon('placeholderimage', '<svg width="24" height="24"><path fill-rule="nonzero" d="M5 15.7l2.3-2.2c.3-.3.7-.3 1 0L11 16l5.1-5c.3-.4.8-.4 1 0l2 1.9V8H5v7.7zM5 18V19h3l1.8-1.9-2-2L5 17.9zm14-3l-2.5-2.4-6.4 6.5H19v-4zM4 6h16c.6 0 1 .4 1 1v13c0 .6-.4 1-1 1H4a1 1 0 01-1-1V7c0-.6.4-1 1-1zm6 7a2 2 0 110-4 2 2 0 010 4zM4.5 4h15a.5.5 0 110 1h-15a.5.5 0 010-1zm2-2h11a.5.5 0 110 1h-11a.5.5 0 010-1z"/></svg>');
editor.ui.registry.addSplitButton('placeholderimage', {
icon: 'placeholderimage',
tooltip: Joomla.Text._('PLG_TINY_PLACEHOLDER_IMAGE'),
onAction: function() {
editor.insertContent('<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMzk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I0RFREVERTtzdHJva2U6IzU1NTU1NTtzdHJva2Utd2lkdGg6MiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSwgc2Fucy1zZXJpZiIgZmlsbD0iIzU1NTU1NSI+NDAwJiMyMTU7MzAwPC90ZXh0Pjwvc3ZnPg==" alt="placeholder">');
},
onItemAction: function (api, value) {
editor.insertContent(value);
},
fetch: function (callback) {
var items = [
{
type: 'choiceitem',
icon: 'image',
text: Joomla.Text._('PLG_TINY_PLACEHOLDER_IMAGE_SIZE').replace('%s', '4:3'),
value: '<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMzk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I0RFREVERTtzdHJva2U6IzU1NTU1NTtzdHJva2Utd2lkdGg6MiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSwgc2Fucy1zZXJpZiIgZmlsbD0iIzU1NTU1NSI+NDAwJiMyMTU7MzAwPC90ZXh0Pjwvc3ZnPg==" alt="Placeholder">',
},
{
type: 'choiceitem',
icon: 'image',
text: Joomla.Text._('PLG_TINY_PLACEHOLDER_IMAGE_SIZE').replace('%s', '3:4'),
value: '<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMjk2IiBoZWlnaHQ9IjM5NiIgc3R5bGU9ImZpbGw6I0RFREVERTtzdHJva2U6IzU1NTU1NTtzdHJva2Utd2lkdGg6MiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSwgc2Fucy1zZXJpZiIgZmlsbD0iIzU1NTU1NSI+MzAwJiMyMTU7NDAwPC90ZXh0Pjwvc3ZnPg==" alt="Placeholder">',
},
{
type: 'choiceitem',
icon: 'image',
text: Joomla.Text._('PLG_TINY_PLACEHOLDER_IMAGE_SIZE').replace('%s', '3:2'),
value: '<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMjk2IiBoZWlnaHQ9IjE5NiIgc3R5bGU9ImZpbGw6I0RFREVERTtzdHJva2U6IzU1NTU1NTtzdHJva2Utd2lkdGg6MiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSwgc2Fucy1zZXJpZiIgZmlsbD0iIzU1NTU1NSI+MzAwJiMyMTU7MjAwPC90ZXh0Pjwvc3ZnPg==" alt="Placeholder">',
},
{
type: 'choiceitem',
icon: 'image',
text: Joomla.Text._('PLG_TINY_PLACEHOLDER_IMAGE_SIZE').replace('%s', '2:3'),
value: '<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMTk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I0RFREVERTtzdHJva2U6IzU1NTU1NTtzdHJva2Utd2lkdGg6MiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBhbGlnbm1lbnQtYmFzZWxpbmU9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSwgc2Fucy1zZXJpZiIgZmlsbD0iIzU1NTU1NSI+MjAwJiMyMTU7MzAwPC90ZXh0Pjwvc3ZnPg==" alt="Placeholder">',
},
];
callback(items);
},
});
});

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,12 @@ public function onDisplay(
$plugins[] = 'joomlaHighlighter';
}

// Load the placeholder image plugin
$externalPlugins['placeholderimage'] = HTMLHelper::_('script', 'plg_editors_tinymce/plugins/placeholderimage/plugin.min.js', ['relative' => true, 'version' => 'auto', 'pathOnly' => true]);

Text::script('PLG_TINY_PLACEHOLDER_IMAGE');
Text::script('PLG_TINY_PLACEHOLDER_IMAGE_SIZE');

$dragdrop = $levelParams->get('drag_drop', 1);

if ($dragdrop && $user->authorise('core.create', 'com_media')) {
Expand Down
3 changes: 2 additions & 1 deletion plugins/editors/tinymce/src/PluginTraits/KnownButtons.php
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,8 @@ public static function getKnownButtons()
'jtemplate' => ['label' => 'Insert template', 'plugin' => 'jtemplate'],
'searchreplace' => ['label' => 'Find and replace', 'plugin' => 'searchreplace'],
'insertdatetime' => ['label' => 'Insert date/time', 'plugin' => 'insertdatetime'],
'help' => ['label' => 'Help', 'plugin' => 'help'],
'placeholderimage' => ['label' => 'Placeholder image'],
'help' => ['label' => 'Help', 'plugin' => 'help'],
];
}
}