回答済み:
結果はここで見ることができます: 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)
以降のクリックごとに。