向 Tinymce 对象添加元素

Question

我想通过单击 html 按钮向 tinymce 编辑器添加一个按钮。我在变量-setting中声明了tinymce的配置对象。首先，我在 tinymce init 函数中使用这个变量作为 tinymce.init(setting);。然后，在重新初始化期间，我通过 setting.setup=function (editor){insert_content;add_button;}; 将按钮功能添加到该对象并重新用于第二个实例。我可以删除、创建和呈现新实例。但按钮未插入工具栏。在重新初始化期间，我删除了之前的 tinymce 实例。

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../../bower_components/bootstrap/dist/css/bootstrap.min.css">
 <script src="../../../plugins/jQuery/jQuery-2.1.4.min.js"></script>    
 <script src="tinymce-dist-5.7.0/jquery.tinymce.min.js"></script>
 <script src="tinymce-dist-5.7.0/tinymce.min.js"></script>
 <script src="../../../bootstrap/js/bootstrap.min.js"></script>   
 <script src="../../../../../plugin/tinymce-variable-master/src/plugin.js"></script>
</head>
<body>
  <script>
    $(document).ready(function(){
        
        setting={
            selector: "#a",
            plugins: 'print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons variable',
            toolbar: 'mysecondbutton customInsertButton pagebreak undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
            content_css: "content.css",
            
            },              
            height:600,
    };
           tinymce.init(setting);
        
        
        $('#reinit').click(function(){
            
            editor  =tinymce.get('a');
            con     =editor.getContent();
            tinymce.EditorManager.execCommand('mceRemoveEditor',true, 'a'); 

            
            insert_content  =editor.insertContent(con);
            add_button      =editor.ui.registry.addButton('customInsertButton',
                            {
                                text: 'My Button',
                                onAction: function (_)
                                {
                                    editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
                                }
                            });
            setting.setup=function (editor){insert_content;add_button;};
            var ed = new tinymce.Editor('a', setting , tinymce.EditorManager);
            ed.render();
        })
    })
</script>
<textarea id="a" name="mytextarea" rows="30">

</textarea>
<button id="reinit">reinitialize</button>

Answer 1

这个setting.setup在我们插入整个函数而不通过变量调用时起作用

setting.setup=function (editor)
{
 editor.ui.registry.addButton('customInsertButton',
             {
                text: 'My Button',
                onAction: function (_)
                {
                   editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
                }
             });
 };

另一种方法，将元素（函数）添加到空对象（新）。然后，使用 Object.assign 组合对象（新）和现有对象（设置）

var setup = { 
                setup: function (editor)
                {
                    editor.ui.registry.addButton('customInsertButton',
                    {
                        text: 'My Button',
                        onAction: function (_)
                        {
                            editor.insertContent('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
                        }
                                    
                    }); 
                    editor.setContent(con);                         
                } 
            };
//combine both object as new object
var obj = Object.assign({}, setting, setup);

向 Tinymce 对象添加元素

Adding Element to Tinymce Object

javascript

object

tinymce

javascript-objects

tinymce-5