TinyMCE - スパンに「text-align」を適用

Question

私は現在、広告用の独自のテキストを作成するためにクライアントのCMSにWYSIWYGエディタtinyMCEを使用しています。 これは、フロントエンドで、テキストエリアに入力したすべてが<a>タグに表示されることを意味します。

私はセマンティクスが正しいことを確認私が使用している <p>タグを停止する forced_root_blockオプションを無効にしているが、テキスト整列オプションは、私はしたくない <div style="text-align:center">で選択したテキスト/要素をラップ作るしようとしている

。

tinyMCEに代わりに同じ結果を得るために<span style="display:block; text-align:center">を使用する方法がありますか？

は、ここに私の現在のTinyMCEのinitをTinyMCEのinitをデフォルトのスタイルの書式を編集することにより、最終的に解決策を自分で見つけることができた

tinymce.init({ 
     selector: 'textarea#advertText', 
     menubar: false, 
     width: <?php echo $selectedSizeWidth ?>, 
     height: <?php echo $selectedSizeHeight ?>, 
     forced_root_block: false, 
     resize: false, 
     invalid_elements: 'div', 
     plugins: [ 
      'textcolor colorpicker fontawesome' 
     ], 
     fontsize_formats: "14px 16px 18px 20px 24px 36px", 
     toolbar: 'bold, italic, underline, strikethrough, |, fontsizeselect, |, forecolor, backcolor, |, alignleft, aligncenter, alignright, alignjustify, |, outdent, indent, |, fontawesome' 
}); 

おかげ

Answer 1

です。以下は

https://www.tinymce.com/docs/demo/format-custom/

私は標準スタイルを上書きするために私のTinyMCEの初期化に追加したコードです。 これは、選択されたテキスト要素（例えばスパン）がスタイルdisplay: blockと関連するtext-alignプロパティでスパンにラップされることを意味します。

formats: { 
      alignleft: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'left'}}, 
      aligncenter: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'center'}}, 
      alignright: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'right'}}, 
      alignfull: {selector: 'span,em,i,b,strong', block: 'span', styles: {display: 'block', 'text-align':'full'}} 
     } 

Answer 2

多分あなたには遅すぎることはありません。私はpタグにコンテンツをロードするので、同じ問題がありました。最初の答えはソリューションに近いです。しかし、整列に使用されるインラインタグを定義する必要があります。これで最初の答えのコードを実行します。インライン： 'スパン'、このような：

formats: { 
    alignleft: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'left'}}, 
    aligncenter: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'center'}}, 
    alignright: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'right'}}, 
    alignfull: {selector: 'span,em,i,b,strong', inline: 'span', block: 'span', styles: {display: 'block', 'text-align':'full'}} 

}、