tinymce插件开发-图库

tinymce plugin developemn

此album插件开发用于后台编辑器的图片插入，通过后台读取图片文件列表，album插件负责载入album view，即通过 iframe 载入页面，点击album view里的图片，调用window.parent 即tinymce运行的页面window对像设置的回掉函数来进行页面间的数据通信。以下是笔记内容，代码裁剪重要部分。

https://www.tiny.cloud/docs/advanced/creating-a-plugin/
https://www.tiny.cloud/docs/api/tinymce/tinymce.windowmanager/#open

Example of the plugin file structure

/tinymce/plugins/example/plugin.js
/tinymce/plugins/example/plugin.min.js

This new example plugin can now be loaded using the tinymce.init plugins option.

    tinymce.init({
      selector: 'textarea',
      plugins: 'example'
    });

Example of loading the plugin from another URL

Example plugin

    tinymce.PluginManager.add('album', function(editor, url) {
        window.pumppipe = function(e){ 
            // alert("pumppipe"+JSON.stringify(e));
            // var dialogArguments = top.tinymce.activeEditor.windowManager.getParams();
            top.tinymce.activeEditor.insertContent('');
        }
        function albumView() {
            // Open window with a specific url
            var w = editor.windowManager.open({
                title: '',
                url: '',
                width: 800,
                height: 600,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
        // Add a button that opens a window
        editor.addButton('album', {
            text: '',
            icon: false,
            onclick: albumView
        });

        // Adds a menu item to the tools menu
        editor.addMenuItem('album', {
            text: '',
            context: 'tools',
            onclick: albumView
        });

        return {
            getMetadata: function() {
                return {
                    name: "album plugin",
                    url: "https://www.aiirobo.com"
                };
            }
        };
    });

communication between iframe and main window

    " onclick="pumpback(this.src);">
    

Example init

Here is an example of how to use the new toolbar button.

    tinymce.init({
      selector: 'textarea',
      plugins: 'album',
      toolbar: 'album'
    });

效果截图

截图20180907182517.png