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

时间:2016-12-26 11:40:28

标签: javascript tinymce

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

1 个答案:

答案 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/