3

回答済み:

結果はここで見ることができます: http://apitecture.com/dev/cked/index.2.html

作業コードの抜粋:

$('a.color').on({
    click : function()
    {
        var self = $(this);

        var editor = self.data('editor-instance') || CKEDITOR.instances['one'];
        var button = self.data('editor-button') || editor.ui.create('TextColor');

        if (!self.data('editor-instance'))
        {
            self.data('editor-instance', editor);
        }

        if (!self.data('editor-button'))
        {
            button._.id = self.attr('id');
            self.data('editor-button', button);
        }

        button.click( editor );
    }
});

リッチ GUI ベースのコンテンツ エディターに取り組んでいます。

テキストのスタイリング部分に CKEditor を使用するという結論に達しました。4 番目のバージョンには多くのカスタマイズと構成オプションが付属しており、さらに非常によく構築されているためです。

CK に接続されていない独自のツールバーに CK のコマンドのいくつかを実装し始めました。どうやら、私の冒険は思ったほど簡単ではなかったようです...

http://apitecture.com/dev/cked/ <- ここでは、サンドボックス バージョンをデプロイしました。

左側には、非常にシンプルな CK とカスタム ツールバーが表示されます。

右側は正確なレプリカですが、CK のネイティブ ツールバーを使用しています。

ご覧のとおり、LinkやBoldなどの単純なコマンドは、その単純な性質のために機能しています。

問題は、[テキストの色] ボタンにあります。これは CK のコマンドにバインドされていないため、外部から実行することはできません。少なくとも、その方法はわかりません。

多分誰かが CK で十分にプロであり、これを理解するのを手伝ってくれるでしょうか?

目標は、ツールバーのボタンに CK ボタンと同じ機能を持たせることです。

Text Colorをクリックすると、色選択ポップアップが本文に追加されるため、CK スタイルには拡張されず、理論的にはスタンドアロンで動作するはずです。ただし、HTMLが本文に追加されているコードが見つからないようです。

UIボタンのインスタンスを取得しようとしました:

var color = CKEDITOR.instances['one'].ui.create('TextColor');

// and fire click on it
color.click();

しかし、それは部分的に予想された（クリックがツールバーから開始されていないため）例外を引き起こしました：

Uncaught TypeError: Cannot read property 'elementMode' of undefined ckeditor.js:552
    CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:552
    CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
    e ckeditor.js:540
    $.on.click cktest.js:59
    v.event.dispatch jquery.min.js:2
    o.handle.u

関数がパラメーターを受け入れることを (from: console.log(color.click)) 見たので、 を呼び出すことで任意の DOM 要素をそれに提供できると考えましたがcolor.click( element );、これもエラーを引き起こしました:

Uncaught TypeError: Cannot read property 'baseFloatZIndex' of undefined ckeditor.js:547
    CKEDITOR.ui.panel.render ckeditor.js:547
    o ckeditor.js:552
    CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.$ ckeditor.js:553
    CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel ckeditor.js:541
    e ckeditor.js:540
    $.on.click cktest.js:59
    v.event.dispatch jquery.min.js:2
    o.handle.u

カラープラグインとそのボタンが導入されたソースへのリンクは次のとおりです: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/colorbutton/plugin.js

アップデート：

これは、ダイアログの代わりにドロップダウンがあるすべてのボタンで発生すると思います。

更新 2:

Reinmarの答えは、トンネルの終わりにいくつかの光を示しました：http://apitecture.com/dev/cked/index.2.html

例では、右側の「色」テキストリンクをクリックすると、ドロップダウンが表示され、さらに、完全に機能します (影が強制されることを除いて)。ここで唯一の問題は、初めて機能することです。その結果：

TypeError: Cannot read property 'title' of undefined
    at CKEDITOR.ui.panel.block.CKEDITOR.tools.createClass.$ (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:549:298)
    at new b (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:26:149)
    at Object.CKEDITOR.ui.panel.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:547:503)
    at CKEDITOR.ui.floatPanel.CKEDITOR.tools.createClass.proto.addBlock (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:553:409)
    at CKEDITOR.ui.panelButton.CKEDITOR.tools.createClass.proto.createPanel (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:541:333)
    at e [as click] (http://apitecture.com/dev/cked/ckeditor/ckeditor.js:540:304)
    at HTMLAnchorElement.$.on.click (http://apitecture.com/dev/cked/cktest.2.js:64:24)
    at HTMLAnchorElement.v.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:38053)
    at HTMLAnchorElement.o.handle.u (http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:33916)

以降のクリックごとに。

4

1 に答える 1

1

あなたは筋金入りの質問をしました:)。私は過去 1 年間 CKEditor コア開発者であり、ツールバー、パネル、およびボタンを掘り下げるのに 1 時間費やす必要がありました。CKE の API のこの部分は非常に複雑で、明らかにドキュメントが不足しています。しかし、最悪の部分は、すべてのパーツが密結合されているため、実際には再利用できないことです。

ともかく。再利用を試み、colorbutton成功しました。プラグインなしのエディターでtoolbar(これは重要です)、指定された要素に対して開くことができました:

カラーボタンの再利用

そして、それはうまくいくようです:)（少なくともChromeでは）。

toolbarプラグインを独自の基本的な実装 (おそらく a11y サポートやその他の重いものなし)に置き換えるのがどれだけ難しいか興味があります。現時点では、太字ボタンとリンク ボタンは Chrome、FF、Opera、IE7-9 で正しく機能します (これは実際、CKE がバックグラウンドで多くのことを行っているため、CKE がいかに優れているかを証明しています ;)。深刻なトラブルに遭遇しないことを願っています。

いくつかのヒント：

  • 電話する必要はありませんeditor.getCommand().exec()。方法がありeditor.execCommand()ます。
  • コンテキスト (キャレットの位置) に応じてボタンをアクティブ化/非アクティブ化する必要があるでしょう。各コマンドには状態があり、イベント時に自動的に更新されselectionChangeます。

幸運を。そして、あなたの考えや仕事の結果を私たちと共有していただければ、それは素晴らしいことです:)。いつの日か API のこの部分を改善することを決定した場合、フィードバックは非常に役立ちます。

于 2013-01-10T00:21:31.507 に答える