如何在TinyMCE 4中将多个元素添加到自定义菜单中,并在单击时在编辑器画布上显示其内容

How to add more than one element to a custom Menu in TinyMCE 4 and display its content on the editor canvas when clicked?

本文关键字:编辑器 单击 显示 自定义 TinyMCE 添加 元素 菜单      更新时间:2023-09-26

>我正在尝试在TinyMCE4中添加一个具有不同选项的菜单,当我单击一个元素时,编辑器画布中的选项文本。我仅使用以下代码成功添加了带有一个选项的菜单:

tinymce.init({
          language: 'es',
          selector: '#plantillaEditor',
          height : '500',
          width : '300',
          menu : {
                file   : {title : 'File'  , items : 'newdocument'},
                edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
                insert : {title : 'Insert', items : 'link media | template hr'},
                view   : {title : 'View'  , items : 'visualaid'},
                format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
                table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
                tools  : {title : 'Tools' , items : 'code'},
                tags: {title : 'Etiquetas', items : 'newmenuitem'}
            },
          menubar: 'file edit format table tags',
          setup: function(editor) {
                editor.addMenuItem('newmenuitem', {
                    text: 'new menu',
                    context: 'tags',
                    onclick: function () { console.log(this); }
                }
                );
            },
          readonly: ((getUrlVars()["mode"]=='view') ? true : false),
          plugins:'image imagetools link fullscreen fullpage textcolor colorpicker advlist autolink autosave charmap code contextmenu insertdatetime save print table',
          toolbar: "customToolbar undo redo | save | print | styleselect | forecolor backcolor | bold italic | "+
               "alignleft aligncenter alignright alignjustify | table bullist numlist outdent indent | "+
               " link | image  | charmap code | insertdatetime",
          insertdatetime_formats: ["%H:%M", "%d-%m-%Y", "%S:%M:%I %p", "Buenos Aires, %d de %B de %Y"],
          contextmenu: "copy | cut | paste | link image imageupload | cell row column deletetable",
          autosave_interval: "60s",
          paste_data_images: true,
          save_onsavecallback: function () {
                var bodyHtml=$editor.val().match(/(?:.(?!<'s*body[^>]*>))*'>.+/)[0];
                var mode='<?php echo $mode?>';
                var namePattern;
                var namePrefix;
                var textAreaName;

                      if(mode!=='user'){  
                         var request = $.ajax({
                            type: 'POST',
                            url: '/editor/processDataHtml',
                            data: {  editorData: bodyHtml, 
                                     id_acto_doc_plantilla : '<?php echo $id_acto_doc_plantilla; ?>'         
                                        },
                            success: function(data) {
                               alert(data);
                                },
                            error: function(data) {
                                alert(data);
                            }
                             })
                       }else{
                                $htmlInputParent.val(bodyHtml);
                          }
                }
         });

我必须解决两件事:

1(如何在菜单中添加多个元素?没有关于"setup:"参数显示和示例的文档,我尝试在菜单上添加另一个"date"元素:

                tags: {title : 'Etiquetas', items : 'newmenuitem date'}

然后是包含多个元素的设置参数:

                  setup: function(editor) {
            editor.addMenuItem('newmenuitem', {
                text: 'new menu',
                context: 'tags',
                onclick: function () { console.log(this); }
            }),
            editor.addMenuItem('date', {
                text: 'Date',
                context: 'tags',
                onclick: function () { console.log(this); }
            });
        },

但它似乎不起作用.....

2(第二个问题是,当单击元素时,我不知道如何检索菜单上选项的文本值。当我记录"this"时,我在对象的属性中搜索,但找不到保存项目值的道具。

有人知道我该怎么做这两件事吗?

编辑:我解决了问题#1(....这只是一个错字,设置的正确代码:参数是:

            tags: {title : 'Etiquetas', items : 'newmenuitem date'},
>  setup: function(editor) {
>               editor.addMenuItem('newmenuitem', {
>                   text: 'new menu',
>                   context: 'tags',
>                   onclick: function () { console.log(this); }
>               });
>               editor.addMenuItem('date', {
>                   text: 'Date',
>                   context: 'tags',
>                   onclick: function () { console.log(this); }
>               });
>           },

问题#2(仍然不起作用。我尝试使用 javascript 和 jquery 将菜单选项的文本内容记录到控制台,但没有运气,对象正确返回,但是当我使用 javascript 控制台过滤对象的属性时,我找不到该属性.....

我相信

this返回的对象的 settings 属性将具有您需要的内容:

editor.addMenuItem('menuitem1', {
    text: 'Text for Menu Item 1',
    context: 'tags',
    onclick: function () { 
        console.log(this.settings.text); 
    }
});

请注意,您甚至可以将自定义属性添加到传递给 addMenuItem 方法的对象中,并在运行时访问这些属性:

editor.addMenuItem('menuitem1', {
    text: 'Text for Menu Item 1',
    customAttrib: 'Colorado Avalanche',
    context: 'tags',
    onclick: function () { 
        console.log(this.settings.text);
        console.log(this.settings.customAttrib); 
    }
});

第二个console.log是引用不属于必需属性的 customAttrib 属性。 TinyMCE只是期待一个有效的JavaScript对象,所以只要你把TinyMCE需要的东西放进去,你就可以把任何你喜欢的东西放进去。