TinyMCE添加切换样式
TinyMCE adding toggle style
我正在开发一个TinyMCE插件,我想让它做的一件事是注册切换自定义格式的命令/按钮。
例如,如果您单击TinyMCE中的粗体按钮,它将以粗体文本突出显示粗体按钮。深入研究源代码,我发现这是通过:tinymce实现的。EditorCommands.addCommands认为我似乎不知道如何复制它。TinyMCE的文档也很糟糕=(
因此,给定customFormat,我希望能够通过我的插件设置一个按钮,当应用customFormat时,它会像工具栏上的粗体、斜体和其他类似按钮一样显示。点击我的customFormat可以打开/关闭该格式。我可以通过"addCommand"answers"addButton"轻松完成嘟嘟声,但它不像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'});
如果有人不想以"插件"的方式进行操作,下面是TinyMCE 4.x
的指南。
首先,您需要定义一个自定义格式:
formats: {
custom_format: {inline: 'span', styles: {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() {
var 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', styles: {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() {
var ctrl = this;
editor.on('NodeChange', function(e) {
ctrl.active(e.element.className == "some_css_class")
});
}
});
}
请注意,我在自定义格式中添加了class
属性。这种方法使我可以在一个单独的样式表文件中定义自定义样式,并使标记尽可能干燥(没有内联样式!)。将content_css
选项指向样式表,您就可以开始了。然而,由于我使用Rails作为后端,使用BatmanJS作为前端(我对后者相当陌生),我无法理解资产路由是如何工作的,最终将我的自定义样式添加到tinyMCE皮肤本身的默认内容样式表文件中(位于skins/SKIN_NAME/content.min.css
)。
感谢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);
})();
下面是一个例子:
ed.controlManager.get('my_control_element').setActive(true); // could be bold or whatever
- 无法在运行时将CSS样式添加到元素中
- 将样式添加到文本区域的特定行
- 需要从父页面使用 javascript 将 css 样式添加到 iframe
- 通过javascript将CSS样式添加到DOM元素
- Javascript:将内联样式添加到页面中具有特定计算样式属性的元素
- Javascript - 使用类将 css 样式添加到元素中
- 将 css 样式添加到 Javascript 中使用的图像中
- 如何将样式添加到圆环图c3.js的标题中
- 如何将样式添加到span like.attr('style','width:newWidth
- 使用下拉列表将样式添加到D3路径
- HTML输入AJAX更新-使用Bootstrap将样式添加到输入字段
- 将Class添加到具有任意2个类的所有表行,并将另一个样式添加到具有任何3个类的全部表行
- 如何将css样式添加到javascript生成的HTML中
- 将css样式添加到动态添加的<表单>java脚本中的元素
- 如何将结构样式添加到jquery插件中
- 为HTML样式添加隐藏/显示功能(不在CSS文档中)
- 不能将jquery UI按钮样式添加到所有按钮Codeigniter
- 将css样式添加到javascript中
- jquery:为现有样式添加样式属性
- 如何在 AngularJS 中展开表格以手风琴样式添加更多信息