1. Home
  2. Docs
  3. TinyMCEv5
  4. plugins自製
  5. 自製外掛-easy

自製外掛-easy

[code]
<!DOCTYPE html>
<html lang="en">
<head>
<!–
<script src="https://cdn.tiny.cloud/1/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
–>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="../../../system/libs/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>

<script>

tinymce.PluginManager.add(‘myplugin’, function (editor) {
editor.ui.registry.addSidebar(‘myplugin’, {
tooltip: ‘My sidebarB’,
icon: ‘image’,
onSetup: function (api) {
console.log(‘Render panel’, api.element());
},
onShow: function (api) {
console.log(‘Show panel’, api.element());
api.element().innerHTML = ‘Hello world! BBBB’;
},
onHide: function (api) {
console.log(‘Hide panel’, api.element());
}
});
});

tinymce.PluginManager.add(‘my-example-plugin’, function (editor) {
editor.ui.registry.addMenuItem(‘image’, {
icon: ‘image’,
text: ‘Image’,
onAction: function () {
console.log(‘context menu clicked’);
alert(‘context menu clicked’);
}
});

editor.ui.registry.addContextMenu(‘image’, {
update: function (element) {
return !element.src ? ” : ‘image’;
}
});
});

tinymce.init({
selector: ‘textarea#richTextArea_ww_powenko_com’,
contextmenu: ‘image’,
plugins: ‘my-example-plugin myplugin mysidebar’,
content_style: ‘body { font-family:Helvetica,Arial,sans-serif; font-size:14px }’,
toolbar: ‘mysidebar myplugin my-example-plugin ‘,
setup: function (editor) {
editor.ui.registry.addSidebar(‘mysidebar’, {
tooltip: ‘My sidebarA’,
icon: ‘comment’,
onSetup: function (api) {
console.log(‘Render panel’, api.element());
},
onShow: function (api) {
console.log(‘Show panel’, api.element());
api.element().innerHTML = ‘Hello world!’;
},
onHide: function (api) {
console.log(‘Hide panel’, api.element());
}
});
}
});

</script>
</head>
<body>
<textarea id="richTextArea_ww_powenko_com">

<p>Right click on the example image below will show the newly configured context menu.</p>

<p style="text-align: center;">
<img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
</p>
<p>Right Clicking on text should not invoke the context menu</p>
</textarea>
www.popwenko.comw
</body>
</html>
[/code]