我在我的tinymce配置中使用缩进属性,但它的工作非常奇怪 - 而不是缩进(顺便说一句,该属性称为缩进),它添加了一些填充。所以这就是我的tinymce实例的配置方式:
tinymce.init({
selector: '#mypanel',
plugins: ["textcolor code"],
toolbar: "undo redo | fontselect fontsizeselect | sizeselect | bold italic underline | forecolor | alignleft aligncenter alignright alignjustify | indent | code",
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px"
});
这就是我所看到的,当我按下缩进并检查源代码时:
<p style="padding-left: 30px;">Hello world</p>
那么,我该如何将其更改为:
<p style="text-indent: 30px;">Hello world</p>
答案 0 :(得分:0)
可能的解决方法:
style_formats: [
{title:'Indent', selector:'p', styles:{'text-indent':'30px'}}
],
style_formats_merge: true,
或
style_formats: [
{title:'Indent', selector:'p', classes:'tindent'}
],
style_formats_merge: true,
content_css: 'my_styles.css', //define 'p.tindent' in the css file
最终答案:添加新的样式格式(styleselect)和按钮(tindent_bttn)
// id_ is not a selector(no '#'), but the simple element id
function tinymce_init(id_) {
var settings = {
...
style_formats: [
{title:'Indent', selector:'p', classes:'tindent'},
],
style_formats_merge: true,
toolbar1:'... styleselect | tindent_bttn',
toolbar2:'...',
content_css:'my_styles.css',
formats: {
tindent_format:{selector:'p', classes:'tindent'},
},
...
};
var editor = new tinymce.Editor(id_, settings, tinymce.EditorManager);
editor.addButton('tindent_bttn', {
text:'Indent',
tooltip:'Indent',
onclick:function() {
editor.execCommand('mceToggleFormat', false, 'tindent_format');
},
onpostrender:function() {
var btn = this;
editor.formatter.formatChanged('tindent_format', function(state) {
btn.active(state);
});
}
});
editor.render();
return editor;
}
文档:
https://www.tinymce.com/docs/configure/content-formatting/ https://www.tinymce.com/docs/advanced/creating-a-custom-button/ https://www.tinymce.com/docs/api/tinymce/tinymce.editor/