訪問CKEditor對話框HTML元素

我很難搞清楚爲了訪問我修改的插件中的CKEditor中的某些UI元素必須做些什麼。訪問CKEditor對話框HTML元素

本質上，我添加了內部鏈接到他們的鏈接對話框，我在部分和出版物之間分開的鏈接。當用戶從選擇下拉列表中選擇一個區段時，該區段的出版物將填入不同的下拉列表中。

以下代碼正在從插件文件夾中的link.js文件修改。我刪除了所有不必要的部分，忽略了我認爲相關的東西。正如你在下面的代碼中看到的那樣，我正在定義一個選擇下拉菜單，其中的'section'標識後跟'item'下拉菜單。如何訪問「項目」下拉列表，以在其下拉菜單的onChange功能中填充它？

我有我的ajax代碼都想通了，如果我硬編碼最終在運行時在ID標記中填充的ID，但這從編輯器更改編輯器，所以我不能依靠硬編碼值。

{ 
type : 'vbox', 
id : 'internalOptions', 
children : 
[ 
    { 
    id : 'section', 
    type : 'select', 
    items : 
    [ 
    ], 
    setup : function(data) 
    { 
    //populate sections here 
    }, 
    onChange : function (data) 
    { 
    //populate items here 
    }, 
    }, 
    { 
    id : 'item', 
    type : 'select', 
    items : 
    [ 
    ], 
    setup : function(data) 
    { 
    }, 
    } 

] 
}

編輯：我的問題是，CKEditor的會改變每一個ID，以便他們unqiue。雖然我將下拉菜單命名爲「section」，但CKEditor將其稱爲176_section，但它並不總是相同的INT，因此我需要在設置階段找出如何抓住它。

來源

2010-11-03 Gazillion

如果要在CKEditor對話框中獲取元素的DOM對象，可以在CKEditor元素上使用getElement。

而得到的CKEditor元素，使用getContentElement在對話框

來源

2010-11-12 21:46:47 AlfonsoML

這使我在正確的軌道上，所以我給你正確的答案。我最終做的是在每個編輯器的範圍內設置一個全局變量，該編輯器保存着用該方法抓取的UI元素。我真的不喜歡我的實現，但這個問題一直拖得太久，有時候你想知道你得做些什麼:)感謝你的幫助。 – Gazillion 2010-11-17 14:38:04

我們如何才能獲得當前焦點元素內的對話？ – bpbhat77 2014-03-14 05:19:16

我知道如何用jQuery抓住#176_section。如果你只知道section，而不是前綴，試試這個選擇：

假定該元素是一個選擇框：

$('select[id*="_section"]')

這將抓住這有一個包含「_section」的ID的所有選擇框。

看一看這樣的：http://api.jquery.com/attribute-contains-selector/

如果你不使用jQuery JavaScript是更詳細一點的香草，但不要太難以把握：

var selects = document.getElementsByTagName("select"); 
for (var i = 0; i < selects.length; i++) { 
    if(selects[i].id.indexOf("_section")) { 
     // Your select box is here. Do something with it. 
    } 
}

後一種方法是修改此答案：Getting elements by a partial id string in javascript

來源

2010-11-11 18:44:39 Stephen

謝謝，我實際上並不知道部分id字符串，它會在未來的項目中非常方便:) – Gazillion 2010-11-17 14:36:11

如果您只搜索後綴，請使用ends-with選擇器（$ =）而不是包含選擇器。同樣，如果您要搜索前綴，請使用^ =。這些應該也適用於document.querySelector和querySelectorAll。 – 2010-11-23 11:39:24

我也找到了解決辦法。我/_source/core/dom/element.js改變的元素類型的conctructor現在

CKEDITOR.dom.element = function(element, ownerDocument) 
    { 
     if (typeof element == 'string') 
     element = (ownerDocument ? ownerDocument.$ : document).createElement(element); 
    this.real_dom_element = element; 
    // Call the base constructor (we must not call CKEDITOR.dom.node). 
    CKEDITOR.dom.domObject.call(this, element); 
};

，如果你的CKEDITOR.dom.element對象上得到保持你可以得到一個DOMElement通過訪問object.real_dom_element

在UI元素的defenition中你可以添加一個onLoad函數，你得到這個對象。real_dom_element並添加一個屬性是這樣的：

onLoad : function() 
{ 
    $(this.getElement().blicsm_element).attr("myID", "link_url"); 
}

以後可以像這樣訪問（例如使用jQuery）領域

$('div[myID="link_url"]').find("input");

所以，你有3個步驟： 1.更改CKEDITOR.dom。元素構造函數，以便訪問真正的dom元素 2.將onLoad事件添加到稍後要訪問的字段並添加自定義屬性 3.通過在onLoad中設置的custum屬性訪問元素

我這樣做，它的工作原理。也許有更簡單的解決方案，但我有一個stuggle找到解決方案，所以我很高興我找到了這個。

歡呼聲

來源

2011-01-21 13:53:51 simon

你爲什麼要通過jQuery元素來做？這從來沒有意義！ – 2013-04-23 09:58:32

'id'屬性用於javascript中的內部引用。它不會將id應用於生成的html元素。

我已經使用了一種非常好用的解決方法，它可能在所有情況下都可能不起作用，但是您的想法是存儲對ckeditor自動應用的id的引用。

{ 
    id : 'txtCredit', /* not CSS ID attribute! */ 
    type : 'text', 
    label : 'Credit', 
    className : 'imageCredit', 

    elemId : null, /* to store a reference to ckeditor's automagically generated id */ 

    setup : function() { 

     // get the id that ckeditor generated for this element and store as an object property 
     this.elemId = this.getInputElement().getAttribute('id'); 

     // now we can reference the element by the id we stored above. Hacky? Yeah probably 
     var inputElem = document.getElementById(this.elemId); 

    } 
}

來源

2011-02-03 18:23:09

正如AlfonsoML指出的那樣，getContentElement是你正在尋找。

我加入一些代碼來完成它

你必須知道的對話框頁面的ID了。（它不在您的示例代碼中）相關對話框頁面中「頂部」元素的標識（如果對話框中有多個頁面，則您的字段可能位於另一頁面上，而不是第一個頁面）。

例如，如果對話框的js文件的內容是：

... 
contents : [ 
    { 
    id : 'info', 
    label : 'blabla', 
    elements : 
     ...

然後使用「信息」的對話框名稱。

在當地的功能，您可以使用代碼：

var dialog = this.getDialog(); 
var sectionElement = dialog.getContentElement('info', 'section');

的getContentElement在CKEditor的是處理實際的ID名之間的轉換。

來源

2013-04-03 10:55:23

我們如何才能獲得當前焦點元素內的對話？ – bpbhat77 2014-03-14 05:19:44

訪問CKEditor對話框HTML元素

回答

相關問題