自製外掛-easy – 柯博文老師

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    <script src="httpsss://cdn.tiny.cloud/1/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
    -->
    <script src="httpsss://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>
TinyMCEv5
