最良のことは、最初から始めることです..だから：（AngularJS）に取り組んでいるプロジェクトで、私はCKEditorをwysiwygエディターとして使用しています。コードニペットの機能を追加するまで、すべてがうまく機能していました。
CKE は純粋な html コードを生成します。これをモデルにバインドして、何が起こっているかをリアルタイムで確認できます。私の側では、ng-bind-html を使用して結果を確認してきましたが、うまくいきました。太字、斜体、見出し、フォント、サイズなど、すべての基本的なhtmlコードが機能していました。
CodeSnippet プラグイン ( http://ckeditor.com/addon/codesnippet ) が入ったとき...動作を停止しました (codesnippet 部分を意味します)。動作しない HTML の例 (ところで、CKE は、通常のタグ < と > の代わりに ‚< と > を使用してコードを生成するので、それらを置き換える必要があります... しかし、それが問題ではないことは気にしないでください :) )。スニペットの例 (ng-bind 側では機能しません):
<code class="language- html"><html><body>Test</body></html></code>
問題は、エディター内ではすべてが正常に機能するが、外部 (ng-bind-html ディレクティブにバインドされている場合) では機能しないことです。
これまでに試したこと:
- CKE エディターが内部で使用する CSS ファイルを含めました。- コード スニペット プラグインは highlight.js を使用するため、CKE html コードを highlight.js コードに変換しようとしましたが、うまくいきました。例：
<div compile="true" hljs language="css”>whatever</div>
しかし問題は、CKE エディターが複雑なテキスト (コード スニペット、その他のもの、引用符などを含む) を生成することです。したがって、これらすべてを HLJS ディレクティブに入れると、すべてが強調表示されます。それは私が達成したかったことではありません。
この問題に対する私の解決策は、HLJS + 通常の html コードを使用して動的にディレクティブを追加することでした。結果の例: (hljs ディレクティブ、hightlight.js の angular ディレクティブ):
<div id="hl" compile="true" hljs language="css">example</div>
<p><strong>Damn</strong></p>
<div id="hl" compile="true" hljs language="cpp">Other snippet</div>
それを機能させるには、追加したコード全体を再コンパイルする必要がありました..だから私はそれをディレクティブに入れて、更新されたらコードを監視して再コンパイルしました。
そして..うまくいきました!! しかし…ここで本当の問題が発生します。
* $compile は何らかの形で内部のすべてのものを検証するため、HTML で有効なコード スニペットに対してのみ機能します…何が起こっているのでしょうか? 「<」タグは「& lt;」に変換されます … HTML タグを開くと.. すぐに閉じます.. (「忘れてしまった」場合) および他の多くの奇妙で容認できないもの。
何か考えはありますか？できるだけ分かりやすく説明するよう心がけておりますが、他にご不明な点がございましたら..