9

エディタ モードで HTML クリーンアップを無効にする方法は? コードでcss形式とインラインhtmlを許可する必要があります。アイデアは、コードを貼り付けて編集のためにエディターに入るときに、パーサーと html のクリーンアップ アクションを無効にすることです。ありがとう。

4

2 に答える 2

17

wysihtml5 エディターの初期化時に、パーサー属性として ID 関数を指定できます。以下のスクリプトは、クリーンアップを完全に無効にする coffeescript スニペットです。

enableWysiwyg: ->
    @$el.find('textarea').wysihtml5
        "style": false
        "font-styles": false #Font styling, e.g. h1, h2, etc. Default true
        "emphasis": true #Italics, bold, etc. Default true
        "lists": false #(Un)ordered lists, e.g. Bullets, Numbers. Default true
        "html": true #Button which allows you to edit the generated HTML. Default false
        "link": false #Button to insert a link. Default true
        "image": false #Button to insert an image. Default true,
        "color": false #Button to change color of font
        parser: (html) -> html

上記のコードの JavaScript バージョン:

$('textarea').wysihtml5({
    "style": false,
    "font-styles": false,
    "emphasis": true,
    "lists": false,
    "html": true,
    "link": false,
    "image": false,
    "color": false,
    parser: function(html) {
        return html;
    }
});
于 2013-07-15T14:24:07.643 に答える
9

実際、これがパーサー規則の目的です。

var wysihtml5ParserRulesエディター オブジェクトをインスタンス化する前にカスタム ルールをインクルードにアタッチするか、独自のルール オブジェクトを作成してエディターのコンストラクターに渡すことができます。

たとえば、配布された単純なサンプル ルールで許可されているタグに加えて、h1 および h3 タグを許可するには、次のように設定する必要があります。

  <form>
    <div id="toolbar" style="display: none;">
      <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
      <a data-wysihtml5-command="italic" title="CTRL+I">italic</a>
      <a data-wysihtml5-action="change_view">switch to html view</a>
    </div>
    <textarea id="textarea" placeholder="Enter text ..."></textarea>
    <br><input type="reset" value="Reset form!">
  </form>

  <!-- The distributed parser rules -->
  <script src="../parser_rules/simple.js"></script>
  <script src="../dist/wysihtml5-0.4.0pre.min.js"></script>
  <script>
    // attach some custom rules
    wysihtml5ParserRules.tags.h1 = {remove: 0};
    wysihtml5ParserRules.tags.h3 = {remove: 0};

    var editor = new wysihtml5.Editor("textarea", {
      toolbar:        "toolbar",
      parserRules:    wysihtml5ParserRules,
      useLineBreaks:  false
    });
  </script>

これで、エディター モードでエディターに入力/貼り付け<title>test</title>て、html ビューに切り替えると、&lt;title&gt;test&lt;/title&gt;. エディター ビューに戻ると、<title>test</title>再び表示されます。

それが一般的な部分でした。

さて、あなたのケースでは、121 個のカスタム パーサー ルール (処理する HTML タグの数) を使用するのが最善のアイデアなのか、それとも時間をかけてソース コードを掘り下げるのがよいのではないのか、私にはわかりません。よりパフォーマンスの高い解決策を見つけるためです（パーサーに実際に入力文字列を返すように指示することはあまり意味がありませんよね？）。さらに、CSSも許可したいとおっしゃいました。したがって、カスタム パーサー ルールも拡張されます。

とにかく、出発点として、https ://github.com/eyecatchup/wysihtml5/blob/master/parser_rules/allow-all-html5.js からカスタム パーサー ルール セットを自由に使用してください。

于 2013-04-22T11:33:47.747 に答える