0

tinymce4 api に少し問題があるので、iv はボタンでトリガーしたいカスタム形式を作成しました。ただし、ボタンをクリックすると、実際の contenteditable フィールドではなくスタイルがボタンに適用されます。

tinymce.init({
    selector: '#editable',
    inline: true,
    menubar: false,
    toolbar:false,
    statusbar: false,
});

setTimeout(function(){
    tinymce.activeEditor.formatter.register('mycustomformat', {
   inline : 'span',
   styles: {color: 'red'}
 });
},200);

$('.js-toggleformat').on('click', function(e) {
    tinymce.activeEditor.formatter.apply('mycustomformat');
})

そしてhtml：

<button class="js-toggleformat">Toggle</button>

<div id="editable" contenteditable="true"></div>
4

2 に答える 2

2

例を見てみましょう。tinymce プラグイン「textcolor」は、色を適用する関数「applyFormat」を使用します。次のようになります。

function applyFormat(format, value) {
  editor.focus();
  editor.formatter.apply(format, {value: value});
  editor.nodeChanged();
}

それに基づいて、これはあなたの場合にうまくいくはずです:

tinymce.activeEditor.focus();
tinymce.activeEditor.formatter.apply('mycustomformat');
tinymce.activeEditor.nodeChanged();
于 2014-11-29T17:07:11.893 に答える
0

同様の問題がありました。インライン編集オプションを使用していると思います。編集フィールドの外側をクリックすると、tinymce ID が無効になります。

この問題は、次の 2 つの方法で解決できます。

  1. ツールバーをカスタマイズして、ツールバーに必要なフォーマットを追加できます
  2. tinymce ブラー イベントでは、rangy ライブラリを使用して範囲を保存します。ボタンをクリックして最初にtinymceをアクティブにし、保存された範囲を復元してから、tinymceフォーマッタを使用してスタイルを切り替えます

お役に立てれば。

于 2013-08-15T03:30:37.197 に答える