2

ユーザーが特定のクラスまたは ID 属性を持つ定義済みの HTML 要素を挿入できるようにする、Web ベースの WYSIWYG HTML エディターを作成したいと考えています。

たとえば、どの HTML エディタでも、ユーザーがテキストを選択して「太字」ボタンをクリックすると、選択したテキストが<b></b>タグでラップされます。

ユーザーがテキストを選択し、「somebutton」というボタンをクリックして選択したテキストを でラップする<div class="someclass"></div>か、別のボタンをクリックしてテキストを でラップする<h1 id="someid"></h1>か、またはによって定義された特定の属性を持つ他の HTML 要素をラップできるようにしたいと考えています。自分。

JavaScript ベースの HTML エディターがたくさんあることは知っていますが、上記の方法で簡単に拡張できるものを特に探しています。私は TinyMCE と Aloha を調べましたが、どちらの場合も、ドキュメントが非常に使いにくいか、存在しないことがわかりました。

を探しています：

  1. この方法で簡単に拡張できる編集者の推奨事項
  2. 上記のカスタム要素を追加する方法に関するチュートリアルまたは手順

ありがとうございました！

4

1 に答える 1

0

CKEditor は柔軟なスタイル システムを提供し、ルールは次のように定義されます ( configstyles.js内またはconfig 内で直接):

{
    name: 'My style',
    element: 'h2',
    attributes: {
        'class': 'customClass',
        id: 'someId'
    },
    styles: {
        'font-style': 'italic'
    }
},

生産:

<h2 class="customClass" id="someId" style="font-style:italic;">Custom element</h2>

定義すると、スタイルはStyles Combo Boxから直接利用でき、現在の選択または新しい要素に適用できます。

スタイルは動的に作成でき、APIを使用して範囲と要素に適用できます。Stylesheet Parserプラグインは、CSS ファイルからスタイルを直接抽出できます。

注: カスタム スタイルを定義するには、高度なコンテンツ フィルターの適切な構成が必要になる場合があります(CKEditor 4.1 以降)。

于 2013-07-23T13:53:16.023 に答える