1

IFRAME と比較して、DIV モードで CKEditor を使用しており、エディター自体にクラスを割り当てようとしています。エディター内のものに追加する場所を見つけましたが、エディター自体ではありません。また、必要な効果を得るために、エディターを別の DIV 内にラップしないことをお勧めします。

CKEditor のバージョン 4 も使用しています。

編集: 以下は、Reinmar が Shared Space プラグインを提案した後の私の質問です。少なくとも今のところ、使用しないことを選択しました。

編集: Reinmar に応えて、Shared Space プラグインの使用を開始しましたが、DIV で使用することの潜在的な利点を確認しています。

そうは言っても、次のコードがあります。

<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>

私が持っているページの下部に：

<script type="text/javascript">
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.replace( 'editor1', {
        extraPlugins: 'sharedspace',
        sharedSpaces: {
            top: 'topSpace',
        }
    });
</script>

現在、上部スペース内にツールバーを作成し、テキストエリアを持っていますが、両方とも無効になっています。おそらく設定の一部を台無しにしただけですが、何が原因かわかりません。

インラインからデータを抽出するのではなく、フォームの一部であるため、テキストエリア構成を使用することを強くお勧めします。

4

1 に答える 1

2

共有スペース プラグインの使用に興味があるかもしれません:

divarea プラグインに関して複雑な感情を持っているため、div を使用する代わりにこれを提案しています。元のコンテナは、実際のコンテキストを変更するエディタの構造でラップされています。IMO 実際のインライン編集 + 共有スペース機能を使用して、ツールバーとボトムバーを必要な場所に配置することをお勧めします。

アップデート：

インラインエディタを使用している場合、テキストエリアは必要ありません。Textarea は、フレームまたは div ベースのエディターがそれ自体で置き換えるデータ コンテナーにすぎません。

インライン編集とは、実際に存在する要素を編集することです。したがって、これは HTML になります。

<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>

そしてJS：

<script type="text/javascript">
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'editor1', {
        extraPlugins: 'sharedspace',
        sharedSpaces: {
            top: 'topSpace',
        }
    } );
</script>

CKEDITOR.inlinenotを使用したことに注意してくださいCKEDITOR.replace。

また、インライン編集の大きな利点は、<div>それがページ上の実際の要素であることです。(div ベースのエディターのように) ラップされず、その内容がフレームに移動されません (フレーム エディターのように)。したがって、コンテンツはページのスタイルを継承します。

欠点は、フォームがないため、カスタム データ保存を実装する必要があることです。editor.getData()最も簡単な方法は、クリックするとAJAX 経由でサーバーに送信される「保存」ボタンを追加することです。

ところで。おそらく、共有スペースのサンプルで 2 つのエディターがフレーム化され、2 つがインラインであるという事実に混乱したことでしょう。それらはすべて、1 つの上部スペースと 1 つの下部スペースを再利用します。

ところで2。インライン編集を利用するために、実際には共有スペースは必要ありません。次に、「フローティングツールバー」が次のように使用されます: http://ckeditor.com/demo#inline

于 2013-05-02T09:27:37.560 に答える