2012-12-03 22 views
9

エディタモードでHTMLクリーンアップを無効にするにはどうすればよいですか?私はCSS形式の&インラインHTMLコードを許可する必要があります。このアイデアは、コードを貼り付けてエディタに入力して編集するときに、パーサとHTMLのクリーンアップを無効にすることです。ありがとう。無効にする方法wysihtml5 HTMLエディタでクリーンアップするには?

+0

はあなたがこの問題の解決策を見つけますか? – Wallter

答えて

9

実際、これはパーサーのルールです。

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

<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> 

を今、あなたが入力したときに/、次のように

例えば、分散型の単純な例ルールで許可されたタグに加えて、H1とH3タグを許可するには、設定する必要があるだろうエディタモードで、をエディタに貼り付け、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

+0

はい、これは正しい答えです、ありがとう! – duy

15

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; 
    } 
}); 
+0

そして、これは普通の古いJavaScriptでどのように見えますか? – jahu

+1

@MarcinHabuszewski上記のcoffeescript [これにコンパイル](https://gist.github.com/smabbott/26b3295608db37340b4b)。 – smabbott

+0

@Iljaコードをありがとう。あなたがSOの答えにそれを含めることができればさらに良いでしょう。 – jahu

関連する問題