Question

我想为tinymce添加自定义菜单。我只想按子元素并插入文本。我怎么能这样做？

我想通过插件来做到这一点。

Answer 1

您可以通过TinyMCE配置对象直接执行此操作（无需插件）。您可以在配置对象中添加setup函数，然后添加工具栏按钮或菜单项以执行您想要的操作。

设置功能 TinyMCE配置对象可以具有设置功能，您可以在其中向编辑器添加功能。这是一个简单的功能：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  .
  .
  .
  setup: function (editor) {
    //Your setup code here... 
  }
});

然后，您可以通过该设置功能添加工具栏按钮或菜单项，如下所述。

工具栏按钮示例：

setup: function (editor) {
    editor.addButton('customButton', {
        text: 'My Custom Button',
        context: 'tags',
        onclick: function () { 
            editor.insertContent('content to insert goes here');
        }
    });
}

不要忘记将此按钮添加到TinyMCE配置中的工具栏。

菜单示例

setup: function (editor) {
    editor.addMenuItem('custommenuitem', {
        text: 'Text for Menu Item', 
        context: 'insert',
        onclick: function () { 
            editor.insertContent('content to insert goes here');
        }
    });
}

现在将出现在“插入”菜单中（基于上下文设置）

Answer 2

这是一个示例插件，用于修改TinyMCE http://market.impresspages.org/plugins/JustifyAlign

还有更多与TinyMCE相关的插件，例如http://market.impresspages.org/plugins

Answer 3

首先，您必须阅读ImpressPages插件文档，以了解如何创建插件https://www.impresspages.org/docs/plugin。

您将进入添加资产文件夹的部分，您将在其中放置一个配置文件

像这样：

var originalConfigFunction = ipcustomMceConfig;

var ipcustomMceConfig = function () {
var originalConfig = originalConfigFunction();



return originalConfig;
}

var Custom = ipcustomMceConfig;
var ipcustomMceConfig = function () {
var originalConfig = Custom();
originalConfig.toolbar2 = originalConfig.toolbar2 + ' example ';
originalConfig.external_example_path = ip.baseUrl + 'Plugin/example/';


if (!originalConfig.external_plugins) {
    originalConfig.external_plugins = {};
}
originalConfig.external_plugins.example = ip.baseUrl + 'Plugin/Custom/assets/example/plugin.min.js';
originalConfig.content_css = 'url/sample/css';
originalConfig.extended_valid_element = 'span[class]';

return originalConfig;

}

这就是你如何将一个元素作为插件添加到工具栏中。请注意ip.baseUrl对于您保持动态以避免使用硬编码路径非常重要。

看看这个插件，例如https://github.com/impresspages-plugins/TinyMceFileBrowser，一旦你完成了它的结构和每个文件，你就会很好地掌握。

添加自定义菜单条目到tinymce

3 个答案: