在padymce中将填充更改为文本缩进

Question

我在我的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>

Answer 1

可能的解决方法：

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/