埋め込みをテキストの字下げに変更する

Question

私のtinymce設定でindentプロパティを使用していますが、本当に奇妙です - インデント（btw、プロパティはインデントと呼ばれます）ではなく、いくつかのパディングが追加されます。だから、これは私の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/