更改填充到tinymce中的文本縮進

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/