javascript - カスタムクラスをwysihtml5テキストエディタに追加します

Question

自分のカスタムクラスを追加するボタンを追加できるようにしたいと思います。私はこれをどこのドキュメントにも見ていませんが、一般的な要求のようです。

例えば。

「一部のテキスト」を強調表示して「カスタムクラス」ボタンを押すと、追加されます

<p class="wysiwyg-custom-class">Some Text</p>>

Answer 1

新しいコマンドを定義します。私の例はForeColorに基づいています。

(function(wysihtml5) {
    
  wysihtml5.commands.setClass = {
    exec: function(composer, command, element_class) {
        element_class=element_class.split(/:/);
        element=element_class[0];
        newclass=element_class[1];
      var REG_EXP = new RegExp(newclass,'g');
    //register custom class
      wysihtml5ParserRules['classes'][newclass]=1;

      return wysihtml5.commands.formatInline.exec(composer, command, element, newclass, REG_EXP);
    },

    state: function(composer, command, element_class) {
        element_class=element_class.split(/:/);
        element=element_class[0];
        newclass=element_class[1];
        var REG_EXP = new RegExp(newclass,'g');
      return wysihtml5.commands.formatInline.state(composer, command, element, newclass, REG_EXP);
    }
  };
})(wysihtml5);

利用方法：

HTML：

<div id="uxToolbar">
   <button data-wysihtml5-command="setClass" data-wysihtml5-command-value="span:my-wysihtml5-custom-class" type="button" title="View HTML" tabindex="-1" class="btn btn-mini">
       My class
   </button>
</div>

ご覧のとおり、値は2つの部分からのものです。element:class

デモ