15

Web サイトで CKEditor を使用していますが、エディターで作成されたリンクの一部に特別なデータ属性を設定できるようにする必要があります。ユーザーは、リンク ダイアログのチェックボックスをオンにして、リンクに特別な属性を付ける必要があることを示します。次のコードを使用して、リンク ダイアログにチェックボックスを追加することができました。

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == "link") {
        var info = dialog.getContents("info");
        info.elements.push({
            type: "vbox",
            id: "urlOptions",
            children: [{
                type: "hbox",
                children: [{
                    id: "button",
                    type: "checkbox",
                    label: "Button",
                    commit: function(data) {
                        data.button = this.getValue()
                        console.log("commit", data.button, data);
                    },
                    setup: function(data) {
                        this.setValue(data.button);
                        console.log("setup", data.button, data);
                    }
                }]
            }]
        });
    }
});

今、私には2つの問題があります。1 つ目は、チェックボックスの状態を保存する関数commitと関数にコードを追加したにもかかわらず、機能しないことです。は、デフォルトでそこにあるパラメータ以外のパラメータを保持できないかのようですsetup。data

2 つ目の問題は、リンクのデータ属性を追加または削除する方法がわからないことです。ダイアログのコールバックでそれを行う必要があるように思えますonOkが、リンクダイアログにはすでにonOkコールバックがあるため、どのように進めるべきかわかりません。もちろん、CKEditor のファイルを直接変更したくはありません。

どうすればこれらのことを達成できますか?

4

2 に答える 2

10

最良のオプションは、プラグインを変更することです。links.jsしたがって、ソースコードを開いてファイルを見つける必要がありますc:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

ソース コードは非常に大きい (40k) ですが、ここでは、必要に応じてダイアログを変更できます。終了したら、プラグイン フォルダーにコピーして圧縮します: http://jscompress.com/

私はあなたが自分で必要なことをしました。圧縮されていないファイル全体はこちら: https://gist.github.com/3940239

するべきこと：

最初に、ダイアログの「参照」ボタンが追加される直前に、この行を追加します。約。インライン: 547:

                        {
                            id: "button",
                            type: "checkbox",
                            label: "Button",
                            setup: function (data) {
                                this.allowOnChange = false;

                                if (data.button)
                                    this.setValue(data.button);

                                this.allowOnChange = true;
                            },
                            commit: function (data) {
                                data.button = this.getValue()
                                this.allowOnChange = false;
                            }
                        },

この部分は実際にはあなたのコードです。コピーして貼り付けただけです。

次に、onOk 関数に移動します。1211 行目: commitContent の後に次のコードを追加します。

this.commitContent( data );

//My custom attribute
if (data.button)
    attributes["custom-attribute"] = "button";
else
    attributes["custom-attribute"] = "";

これにより、次のような要素に属性を追加してリンクが変更されます<a href="#" custom-attribute="button">text</a>

それでおしまい。ただし、チェックボックスの現在のステータスをロードすることもできます。次に、関数に移動しますparseLink。約。179 行目で属性をロードします。

...
if ( element )
{
    retval.button = element.getAttribute('custom-attribute');

    var target = element.getAttribute( 'target' );
...
于 2012-10-23T17:35:15.520 に答える
0

私は今同じことを調べています。この時点で私がやろうと決めたことは、次のことです。

  1. リンク プラグインなしでベースの ckeditor インストールを取得する
  2. リンクプラグインの独自のフォークを作成し、それに変更を加えてから、リンクが通常表示されるグループ内でこのプラグインを有効にして使用します。

...カスタムプラグインとして（オリジナルのコピーではありますが）それを使用すると、アップグレードの問題が軽減されます。元のリンクプラグインをまったく使用しないだけです。コピーして名前を変更し、代わりにカスタム コピーを使用します。

于 2013-03-02T18:55:45.647 に答える