时间戳

首页 > 解决方案 > 向 Tinymce 对象添加元素

javascript - 向 Tinymce 对象添加元素

问题描述

我想通过 html 按钮单击向 tinymce 编辑器添加一个按钮。我在 variable- 中声明了 tinymce 的配置对象setting。首先，我在 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>

标签： javascriptobjecttinymcejavascript-objectstinymce-5

解决方案

当我们在不通过变量调用的情况下插入整个函数时，此 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);

推荐阅读