HTMLエディターにCMS固有のタグを認識/許容するように強制します

Question

Markitup（http://markitup.jaysalvat.com/home/）のインスタンスを使用して、サイトでHTMLをフォーマットすることを計画していますが、CMSに固有のボタン/設定を含めることを望んでいました。 。問題は、上記の要素がHTMLタグとしてフォーマットされているが、エディターはそれらを認識したり、コンテンツ/テキストに巻き付けたりすることを許可しないことです。

タグを解析する必要はありません。エディターを挿入できるようにするだけで、テキストとして識別されるように、設定でHTMLとして識別することは失敗します。

このようなエディターを使用して、既存のコンテンツにカスタムタグをラップする方法はありますか？

私が達成しようとしているのは、本質的にエディターのボタンを押し、いくつかの異なるパラメーターを要求し、残りの選択したHTMLをタグでラッピングし、結果が次のように見えます。

<box title="EXAMPLE" align="LEFT">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl id sem volutpat interdum. Donec ante sapien, tincidunt nec venenatis at, posuere a magna. Suspendisse id metus sapien. Nullam sed rutrum tellus. Integer laoreet sem non lorem elementum ultricies.</box>

Answer 1

Markitupを使用したことがないので、かなり簡単にすることが判明しました。から始まります HTMLデモ, 、Markitup/sets/html/で3つのことを変更する必要があります。

1. ボタンの画像を画像フォルダーに追加します（または、今のところ既存の画像を選択します）。
2. style.cssの画像への参照を追加します。各ボタンは、ボタンの行（.markitupbutton1、.markitupbutton2など）の順序に基づいてクラスを取得するようです。別のクラス（クリーン/プレビュー）を使用したものもありましたが、それでもカウントされました。そこで、最後にボタンを追加しましたが、18日でしたが、コードは単純でした。 .markitup .markitupbutton18 a {background-image：url（images/box.png）;} または、set.jsで「classname」属性を使用し、それを参照します。
3. set.jsにオブジェクトを追加します。既存のボタンを使用して比較します。

あなたはこれほど単純なものから始めることができます：

{name:'Box', openWith:'<box>', closeWith:'</box>'}

属性を追加する構文は少しファンキーですが、繰り返しますが、基本的に他のボタンを見ることで要点を取得できます。

{name:'Box', openWith:'<box title="[![Title]!]" align="[![Align]!]" >', closeWith:'</box>' }

あなたが説明したようにテストされ、動作します！ご質問がある場合はお知らせください。私にとって最も難しいのは、余分な「セット」（HTMLなど）をダウンロードせずに例を実行できないことに気付いたことでした。