Instantly share code, notes, and snippets.

Embed
What would you like to do?
"use strict";
var tinymce = tinymce || {};
//Register the plugin
tinymce.PluginManager.add('customimagebuttonplugin', function (editor, url) {
//your custom logic when button clicked
editor.addCommand('tinymcecustombutton', function () {
var isUpdate = false;
//default values
var align = "left";
var width = "50%";
var description = "";
//On open
if (editor.selection.getNode().parentElement.tagName === "DIV"
&& editor.selection.getNode().parentElement.className.includes("image")) {
width = editor.selection.getNode().parentElement.style.maxWidth;
description = editor.selection.getNode().parentElement.textContent;
align = editor.selection.getNode().parentElement.className.replace("image", "");
isUpdate = true;
}
// Open window
editor.windowManager.open({
title: 'Image description',
body: [
{ type: 'textbox', name: 'description', label: 'Description', value: description },
{ type: 'textbox', name: 'width', label: 'Width (px eller %)', value: width },
{
type: 'listbox',
name: 'align',
label: 'Align',
values: [
{ text: 'Left', value: 'left' }, //tinymce.DOM.decode("V&auml;nster") <-- for swedish
{ text: 'Right', value: 'right' },
{ text: 'Center', value: 'center' }
],
value: align // Sets the default
}
],
onsubmit: function (e) {
var alignmentclass = 'image' + e.data.align;
var selectedimg = editor.selection.getNode();
var width = e.data.width;
if (width !== undefined && !width.includes("px") && !width.includes("%")) {
if (width > 100)
width += "px";
else if (width === "")
width = "50%";
else
width += "%";
}
if (isUpdate) {
selectedimg.parentElement.dataset.mceStyle = "max-width: " + width;
window.tinyMCE.DOM.setStyle(selectedimg.parentElement, "max-width", width);
selectedimg.parentElement.className = alignmentclass;
selectedimg.parentElement.childNodes[1].innerText = e.data.description;
} else { //first time use
if (selectedimg.src) {
var arr = selectedimg.src.split("/");
var src = "/" + arr.splice(3, arr.length).join("/");
editor.selection.setContent('<div style=max-width:' +
width +
' class=' +
alignmentclass +
'><img src=' +
src +
' class="img-responsive" alt="" /><p>' +
e.data.description +
'</p></div>');
}
}
}
});
});
// Register custom button
editor.addButton('customimagebuttonplugin', {
title: 'Image description',
cmd: 'tinymcecustombutton',
image: url + '/img/image.png',
onpostrender: monitorNodeChange
});
//highlight the button when IMG is selected
function monitorNodeChange() {
var btn = this;
editor.on('NodeChange',
function (e) {
btn.disabled(!e.element ||
!e.element.nodeName ||
e.element.nodeName.toLowerCase() !== "img");
});
}
//information shown on help-button
return {
getMetadata: function () {
return {
name: 'Image description plugin',
url: 'https://devblog.gosso.se/?p=792'
};
}
};
});
"use strict";
var tinymce = tinymce || {};
//Register the plugin
tinymce.PluginManager.add('customplateplugin', function (ed, url) {// ed as editor
var cssClass = "plate";// your classname
//your custom logic when button clicked
ed.addCommand('customplatecmd', function () {
if (ed.selection.getNode().parentElement.className === cssClass) {
var bm = ed.selection.getBookmark();
ed.selection.getNode().parentElement.outerHTML = ed.selection.getNode().parentElement.innerHTML;
ed.selection.moveToBookmark(bm);
}
else if (ed.selection.getNode().parentElement.parentElement != undefined &&
ed.selection.getNode().parentElement.parentElement.className === cssClass) {
var bm = ed.selection.getBookmark();
ed.selection.getNode().parentElement.parentElement.outerHTML = ed.selection.getNode().parentElement.parentElement.innerHTML;
ed.selection.moveToBookmark(bm);
}
else {
if (ed.selection.getSelectedBlocks().length > 1) {
ed.selection.setContent('<div class="' + cssClass+'">' +
ed.selection.getContent() +
'</div>');
ed.focus();
}
else {
if (ed.selection.getNode().nodeName === "P") {
// Stores a bookmark of the current selection
var bm = ed.selection.getBookmark();
ed.selection.select(ed.selection.getNode(), true);
ed.selection.setContent('<div class="' + cssClass+'">' +
ed.selection.getNode().outerHTML +
'</div>');
// Restore the selection bookmark
ed.selection.moveToBookmark(bm);
}
else if (ed.selection.getNode().parentNode.nodeName === "P") {
ed.selection.select(ed.selection.getNode().parentNode, true);
ed.selection.setContent('<div class="' + cssClass+'">' +
ed.selection.getNode().outerHTML +
'</div>');
}
ed.focus();
}
}
});
// Register custom button
ed.addButton('customplateplugin', {
title: 'Plate',
cmd: 'customplatecmd',
image: url + '/img/plate.png',
onclick: function () {
ed.focus();
//ed.selection.setContent('Hello world!');
window.tinyMCE.activeEditor.execCommand('customplatecmd');
}
, onpostrender: monitorNodeChange //remove this if you would be able to mark several blocks
});
// Add a node change handler, selects the button in the UI when a P tag is selected
function monitorNodeChange() {
var btn = this;
ed.on('NodeChange',
function (e) {
btn.disabled(!e.element || !e.element.nodeName ||
(e.element.nodeName.toLowerCase() !== "p" && e.element.parentNode.nodeName.toLowerCase() !== "p"));//
});
}
return {
getMetadata: function () {
return {
name: 'Gray plate plugin',
url: 'https://devblog.gosso.se/?p=796'
};
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment