TinyMCE 是一个流行的富文本编辑器,常用于网页内容编辑。它允许用户在所见即所得(WYSIWYG)的界面中编辑内容,并将结果保存为HTML。
TinyMCE 自动将样式属性添加到内容中,这可能导致:
TinyMCE 自动添加样式属性的主要原因包括:
tinymce.init({
selector: '#mytextarea',
valid_elements: '*[*]', // 允许所有元素和属性
valid_styles: {
'*': '' // 禁止所有样式
},
paste_as_text: true, // 粘贴为纯文本
paste_auto_cleanup_on_paste: true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true
});
tinymce.init({
selector: '#mytextarea',
setup: function(editor) {
editor.on('PostProcess', function(e) {
// 移除所有style属性
e.content = e.content.replace(/ style="[^"]*"/g, '');
});
}
});
在TinyMCE内容区域添加CSS重置规则:
/* 在TinyMCE初始化时设置content_css */
tinymce.init({
selector: '#mytextarea',
content_css: '/path/to/editor-styles.css'
});
editor-styles.css内容:
/* 重置所有样式 */
* {
all: initial;
}
/* 然后定义你想要的样式 */
body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
适合需要严格控制内容样式的情况:
formats
选项定义允许的样式paste_preprocess
和paste_postprocess
回调进行额外处理cleanup
插件进行更精细的控制通过以上方法,可以有效控制TinyMCE自动添加样式属性的行为,确保生成的内容符合项目需求。
没有搜到相关的沙龙