0

CMS の一部として CKeditor を使用しようとしていますが、JavaScript が「それほど」得意ではなく、ドキュメントがあまり役に立ちません。

リンクプラグインダイアログを変更して値のドロップダウンを表示し、それらからURLを構築する方法を誰かが教えてくれるかもしれませんが、ダイアログシステムがどのように機能するか理解していません。を使用する必要があることはわかっていますが、これを使用する_sources/plugins/link/dialogs/link.jsときにどのように迷子になるかについては、理解できません。

ドロップダウン (選択) をダイアログに追加するために必要なコードを教えてください。ダイアログには、値を URL フィールド EG に書き込むオプションがあります。

私のサーバー システムには URL /content/getLinks/ があり、これは次のように CMS ページを返します。

[
 {"page_name":"Contact Us","url":"Contact_Us","page_id":"1"},
 {"page_name":"Welcome to Doxie Promotions","url":"Welcome_to_Doxie_Promotions","page_id":"2"},
 {"page_name":"Bands","url":"Bands","page_id":"3"},
 {"page_name":"Upcoming Events","url":"Upcoming_Events","page_id":"4"},
 {"page_name":"About","url":"About","page_id":"7"},
 {"page_name":"Lost Efftect","url":"Lost_Efftect","page_id":"10"}
]

このデータから、このような選択ボックスを作成したいと思います

<select>
    <option value="Contact_Us:1">Contact Us</option>
    <option value="Welcome_to_Doxie_Promotions:1">Welcome to Doxie Promotions</option>
    <option value="Bands:1">Bands</option>
    <option value="Upcoming_Events:1">Upcoming Events</option>
    <option value="About:1">About</option>
    <option value="Lost_Efftect:1">Lost Efftect</option>
</select>

次に、1 つが選択されたら、URL フィールドを変更したい EG 最初のオプションが選択された場合、URL は次のようになります。

/content/load/pid/1/url/Contact_Us

プラグイン ダイアログのソース バージョンを、マイニングされた標準バージョンの上にコピーする必要があることは承知しています。

これまでに試したことを更新し_sources/plugins/link/dialogs/link.js、plugins/link/dialogs/link.js

私はこのコードを構築しました

429行目のファイルに

,
{
    type : 'select',
    id : 'cms_links',
    label : 'CMS Page',
    items:[],
    onLoad : function(){
        (function($){
            $.ajax({
              url: "/content/getLinks/",
              dataType: 'json',
              data: "",
              success: function(data){
                $.each(data, function(key, val){
                    $("#cms_links").append(
                        "<option value='"+val.url+":"+val.page_id+"'>"+val.page_name+"</option>"
                    );
                });
              }
            });
        })(jQuery);
    }
},

しかし、追加したコード用に描画された選択ボックスさえないので、まだ途方に暮れています

4

3 に答える 3

2

これを行うには、パスの _sources にある非最小化バージョンのコードを用意する必要があります。_sources/plugins/link/dialogs/link.jsこれを最小化されたコードの上にコピーしますplugins/link/dialogs/link.js。429 行目あたりに以下のコードを追加しました。

,
{
    type : 'select',
    id : 'cms_links',
    label : 'CMS Page',
    class : 'cms_links',
    items:[],
    onLoad : function(){
        (function($){
            var cms_pageSelectElement;
            var protocolSelectElement;
            var urlSelectElement;
            $.ajax({
              url: "/content/getLinks/",
              dataType: 'json',
              success: function(data){
                  $("label").each(function(){
                    var value = $(this).html();
                    if(value == "CMS Page"){
                        cms_pageSelectElement = $(".cke_dialog_ui_input_select", $(this).parent());
                        console.log(cms_pageSelectElement);
                    }
                    if(value == "Protocol"){
                        protocolSelectElement = $(".cke_dialog_ui_input_select", $(this).parent());
                        console.log(protocolSelectElement);
                    }
                    if(value == "URL"){
                        urlSelectElement = $(".cke_dialog_ui_input_text", $(this).parent());
                        console.log(urlSelectElement);
                    }
                  });

                  $(cms_pageSelectElement).append("<option selected='selected'><none CMS link></option>");
                for(var key in data){
                    var val = data[key];
                    $(cms_pageSelectElement).append(
                        "<option value='"+val.url+":"+val.page_id+"'>"+val.page_name+"</option>"
                    );
                }
                $(cms_pageSelectElement).change(function(){
                    var val = $(this).val();
                    var parts = val.split(":");
                    var url = "content/load/pid/"+parts[1]+"/url/"+parts[0];
                    $(urlSelectElement).val(url);

                });
              }
            });
        })(jQuery);
    }
},

jQueryを使用する場合、設定できる値がなく、HTML要素に設定できるため、システムをわずかに活用して他の要素を更新する必要があるため、ラベルを選択して親から入力を取得することでハックする必要がありますラベル

于 2012-04-08T21:49:15.067 に答える
2

このプラグインを試すことができます: http://cksource.com/forums/viewtopic.php?f=18&t=24282

于 2012-04-08T21:54:28.670 に答える
1

私はあなたにこれを与えることができます: http://jsfiddle.net/VGWPL/

于 2012-04-08T21:10:44.823 に答える