TinyMCE添加切换样式

时间:2013-02-11 13:54:53

标签: javascript tinymce

我正在制作一个TinyMCE插件,我想要它做的一件事是注册命令/按钮切换自定义格式。

例如,如果单击TinyMCE中的粗体按钮,它将以粗体文本显示突出显示的粗体按钮。深入研究源代码我看到这种情况发生在:tinymce.EditorCommands.addCommands认为我似乎无法弄清楚如何复制它。 TinyMCE的文档也很糟糕=(

所以给定的customFormat我希望能够通过我的插件设置一个按钮,当应用customFormat时,它会像工具栏上的Bold,Italics和其他类似按钮一样显示。点击我的customFormat切换格式开/关。我可以通过“addCommand”和“addButton”轻松完成toogle,但是它没有Bold和其他人那样的状态跟踪。

显示我当前的非工作尝试(此代码位于我的插件创建方法的init中):

tinymce.EditorCommands.call('addCommands', {
   'MyFormat' :  function(name) {
      ed.formatter.toggle("customFormat");
    }
},'exec');

tinymce.EditorCommands.call('addCommands', {
   'MyFormat' : function(name) {
       return ed.formatter.match('customFormat');
    } 
},'state');

ed.addButton('customformat', {cmd : 'MyFormat'});

以下是addCommands“文档”的链接: http://www.tinymce.com/wiki.php/API3:method.tinymce.EditorCommands.addCommands

经过更多的环顾四周后,我发现这似乎是完美的: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.addQueryStateHandler

但是当我实现代码时,它不会改变按钮的状态:

  ed.addCommand('MyFormat', function(ui, v) {
    ed.formatter.toggle("thoughtFormat");
  });

  ed.addQueryStateHandler('MyFormat', function() { 
      return ed.formatter.match('thoughtFormat');
  });

  ed.addButton('myformat', {cmd : 'MyFormat'});

3 个答案:

答案 0 :(得分:7)

如果有人不想这样做,那就是“插件”。方式,这里是TinyMCE 4.x的指南。

首先,您需要定义自定义格式:

formats: {
   custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}}
}

然后您必须在工具栏中添加一个按钮:

toolbar: "mybutton",

接下来,您需要设置按钮,以便切换格式:

setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            }
        });
}

此外,如果您希望编辑器设置按钮的状态以指示当前节点的格式,请自动将其添加到setup功能:

onPostRender: function() {
    ctrl = this,                
    editor.on('NodeChange', function(e) {
        ctrl.active(e.element.className == "some_css_class")
    });
}

您的tinymce.init功能应如下所示:

tinymce.init({
    selector: "textarea",
    formats: {
       // Other formats...
       custom_format: {inline: 'span', style:{color: "red"}, attributes: {class: 'some_css_class'}}
    }
    // Other default toolbars
    toolbar_n: "mybutton",

    // Finally, setup your button
    setup: function(editor) {
        editor.addButton('mybutton', {
            text: 'My Button',
            icon: false,
            onclick: function() {
                tinymce.activeEditor.formatter.toggle('custom_format')
            },
            onPostRender: function() {
                ctrl = this,                
                editor.on('NodeChange', function(e) {
                    ctrl.active(e.element.className == "dynamic-field")
                });
            }
        });
    }

请注意我添加到自定义格式的class属性。这种方法使我可以在单独的样式表文件中定义我的自定义样式,并使我的标记尽可能干燥(没有内联样式!)。在您的样式表中指出content_css选项,您就可以开始了。 但是,由于我使用Rails作为后端而BatmanJS作为前端(我对后者来说相当新),我无法弄清楚资产路由的工作原理,最后将我的自定义样式添加到tinyMCE外观本身的默认内容样式表文件中(位于skins/SKIN_NAME/content.min.css)。

答案 1 :(得分:5)

感谢Thariama的见解让我深入挖掘,最终弄清楚如何做到这一点。我不确定它是“正确的方式”,但正如我所说,TinyMCE具有可以想象的最差文档。

对我来说,关键是使用setActive技巧勾选onNodeChange事件。带有自定义按钮的完整示例插件,无论光标位于何处,都会激活该格式:

(function() {
   tinymce.create('tinymce.plugins.CoolPlugin', {  
   init : function(ed, url) {   

      ed.addCommand('MyFormat', function(ui, v) {
        ed.formatter.toggle("myFormat");
      });

      ed.addButton("coolformat", {
        title : 'MyFormat Tooltip', 
        cmd : 'MyFormat',
        image: url + '/coolformat.png',
      });

      ed.onNodeChange.add(function(ed, cm, n) {
        active = ed.formatter.match('myFormat');
        control = ed.controlManager.get('coolformat').setActive(active);
      });

      ed.onInit.add(function(ed, e) {
        ed.formatter.register('myFormat', 
           {inline: 'span', classes : ['cool'] } );
      });
  }
  });

  // Register plugin
  tinymce.PluginManager.add('cool', tinymce.plugins.CoolPlugin);
})();

答案 2 :(得分:0)

以下是一个例子:

ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever