我必须配置 CKEditor 为内容中的每个 p-tag 添加一个类属性。您可以使用 config.format_p 做类似的事情,但它只会将类属性应用于标记为“正常”的文本,这不是默认值。
编辑:
我使用的是当前版本 3.6.2。以下是我的配置的相关部分:
CKEDITOR.editorConfig = function( config )
{
config.removeFormatTags = 'b,div,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var,form,input,textarea';
config.format_p =
{
element: 'p',
attributes:
{
'class': 'tiny_p'
}
};
config.skin = "office2003";
config.entities_processNumerical = true;
}
config.format_p
选项仅在用户从格式菜单中选择“正常”时生效,而 config.removeFormatTags
仅在用户手动单击清理按钮时生效。两者都应该像在 TinyMCE 中一样自动工作。
最佳答案
您可以添加 html 处理器过滤器
editor.dataProcessor.htmlFilter.addRules({
elements :{
p : function( element ){
if ( element.className.indexOf("thiny_p") < 0){
element.className += 'thiny_p';
}
}
}
});
此外,如果不需要将其创建为 ckedito 插件,也许在将内容发送到服务器之前,您可以使用 jQuery 更改内容
$("iframe", "#cke_editor1").contents().find("p").addClass("tiny_p");
或者,如果文本区域(源)处于事件状态
var editor= $("textarea", "#cke_editor1");
editor.val(editor.val().replace(/<p>/gi, "<p class='thiny_p'>"))
你应该稍微调整一下 .replace(/<p>/gi, "<p class='thiny_p'>")
支持其他情况的正则表达式。
编辑
终于有时间在我的盒子上下载和设置编辑器了,这里是工作插件
CKEDITOR.plugins.add( 'customparagraph',
{
init: function( editor )
{
editor.addCommand('addParagraphClassName',{
exec : function( editor ){
var ps = editor.document.$.getElementsByTagName("p");
for (var i=0; i < ps.length; i++){
if(ps[i].className.indexOf("thiny_p") < 0){
ps[i].className += "thiny_p";
}
}
}
});
editor.ui.addButton( 'ThinyP',{
label: 'Appends thiny_p class',
command: 'addParagraphClassName',
icon: this.path + 'images/icon.gif'
});
}
} );
把它放在plugins/customparagraph/plugin.js
还创建图标图像 plugins/customparagraph/images/icon.gif
在配置中你必须添加以下配置选项 config.js 你的 CKEdito 安装
CKEDITOR.editorConfig = function( config )
{
config.extraPlugins = "customparagraph";
config.toolbar = [ [ 'ThinyP' ] ]; // add other toolbars and keep in mid this can be overwritten in page which loads CKEditor
};
或
在加载CKEditor的页面
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'customparagraph',
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'ThinyP' ]
]
});
//]]>
</script>
用户必须在保存前点击工具栏按钮
关于css - 强制 CKEditor 添加一个类到 p-tags,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7836349/