向 Tinymce 对象添加元素答案

【问题标题】：Adding Element to Tinymce Object向 Tinymce 对象添加元素
【发布时间】：2021-03-19 02:54:17
【问题描述】：

我想通过点击 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>

【问题讨论】：

标签： javascript object tinymce javascript-objects tinymce-5

【解决方案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);

【讨论】：