Q&A
https://stackoverflow.com/questions/24871792/tinymce-api-v4-windowmanager-open-what-widgets-can-i-configure-for-the-body-op
こちらを参考にして、以下のようにしたら実装できたのですが...
javascript
1//～省略 2menu: [ 3 { 4 text: 'ライン', 5 onclick: function() { 6 editor.windowManager.open( { 7 title: 'ライン', 8 body: [ 9 {type:'textbox',name:'linetext',label:'テキスト',value:''}, 10 {type:'colorbox',name:'linecolor',label:'ラインの色',values:[{text:'赤',value:'255,192,203'},{text:'青',value:'191,234,255'},{text:'緑',value:'191,255,191'}]}, 11 ], 12 onsubmit: function( e ) {editor.insertContent('<span class="line" style="background:linear-gradient(transparent 40%,rgba(' + e.data.linecolor + ',.5) 40%)">' + e.data.linetext + '</span>');} 13 }); 14 } 15 }, 16//～省略
これを使って入力すると、↓この画像のようになります。
ここまでは大丈夫なのですが、
この続きで普通に文字を入力すると、↓この画像のようにスタイルがそのままついてしまいます。
ちなみに、テキストエディタにすると、↓この画像のように</span>の後ろにカーソルが来ています。
なのでテキストエディタで記事を書く場合は大丈夫だと思うのですが、HTMLの知識が全くない人なので、ビジュアルエディタしか使わないと思います。
ビジュアルエディタを使用していても、スタイルを適用させるのはポップアップ内で入力した文字のみにしたいのですが、どこをどう変えたら良いのでしょうか？
どうか、お知恵を拝借させていただけないでしょうか。
よろしくお願いいたします。
あなたの回答
tips
プレビュー
