찾아 다음 코드는 불을 지르고에서 오류를 반환

Question

ckeditor에서 선택 요소 :

매개 변수 것은 객체 "코드 :"아닙니다 1003
t.selectNode (S $). ckeditor.js (줄 11883)

내 코드는 기본적으로 특정 유형의 요소 (예 : 입력)를 검색합니다. 그럼 내가 여기 API에 정의 된 유형 selectElement의 현재 요소를 만들고 싶어 : 나는 수동으로 다음 위의 코드 조각 작업의 마지막 두 줄을 WYSIWYG 영역에서 요소를 강조하는 경우 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html#selectElement

var selectOption = dialog.getValueOf('find', 'findNext'); 
var documentWrapper = editor.document; // [object Object] ... CKEditor object 
var documentNode = documentWrapper.$; // [object HTMLDocument] .... DOM object 
elementArray = documentNode.getElementsByTagName(selectOption); 
editor.getSelection().selectElement(elementArray[count]); // Trying to make the  current element of type selectElement 
var elementX = editor.getSelection().getSelectedElement(); 
alert('element ' + elementX.getName()); 

및 getSelectedElement 내가 왜 오류가 발생하는지 알지 못하므로 selectElement과 같은 클래스에 정의되어 있습니다.

Answer 1

일부 어려움 : getElementsByTagName은 배열이 아니라 노드 컬렉션을 만듭니다. 노드 컬렉션은 사용 가능한 메서드와 속성에 관한 한 매우 제한적입니다.

다음은 노드 모음에 대해 알아야 할 중요한 사항에 대한 간략한 설명입니다.
모음 getElementsByTagName 실행 후 배열
http://www.sitepoint.com/a-collection-is-not-an-array/

아니라, I는 배열로 컬렉션을 옮겼다. 요소가 사용 가능한 형식이 아니므로 요소를 DOM 요소로 변환했습니다.

요소 선택으로 작업하는 대신 노드 요소에서 생성 한 범위 선택을 사용했습니다. 범위가 더 유연하게 작동하는 것으로 나타났습니다.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html

마지막으로 선택한 요소가 포함 된 DOM 선택 개체를 만들었습니다. 선택 개체에 사용할 수있는 여러 메서드를 사용하여 일부 샘플 개체를 만들었습니다.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html

오브젝트 유형 [오브젝트 오브젝트] 및 [오브젝트 HTMLDocument]에 관한 노트를 보았습니다. FireBug에서 "console.log();"를 사용해 보셨습니까? 각 개체에 대해 사용 가능한 모든 메서드와 속성을 보여줍니다. 내가 포함 된 코드의 대부분의 객체에 대해 추가했습니다. 당신이 생각하는 것을보십시오.

FireBug의 콘솔 패널에서 로그가 실행되는 각 개체에 대한 정보를 확인하십시오. console.log (CKEDITOR)를 시도하십시오; 사용할 수있는 것들에 대한 좋은 개요를 얻을 수 있습니다.

중요 사항 : Internet Explorer의 경우 "Console.log();"를 사용하는 동안 개발자 도구 창을 열고 스크립트 패널에서 디버깅을 활성화해야합니다. 그렇지 않으면 오류가 발생합니다.

여기에 코드입니다 :

var selectOption = dialog.getValueOf('find', 'findNext'); 
var documentWrapper = editor.document; // [object Object] ... CKEditor object 
var documentNode = documentWrapper.$; // [object HTMLDocument] .... DOM object 

// NEW - This isn't an array. getElementsByTagName creates a Node collection 
// Changed name from elementArray to elementCollection 
elementCollection = documentNode.getElementsByTagName(selectOption); 

// NEW - Can't use array methods on Node Collection, so move into array and 
// change the collection items into DOM elements 
// NEW - Caveat: The collection is live, 
// so if changes are made to the DOM it could modify the var elementCollection 

var nodeArray = []; 

for (var i = 0; i < elementCollection.length; ++i) { 
    nodeArray[i] = new CKEDITOR.dom.element(elementCollection[ i ]); 
} 

// NEW - Working with an element object is problematic. 
// Create a range object to use instead of an element 
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.range.html 
var rangeObjForSelection = new CKEDITOR.dom.range(editor.document); 
console.log(rangeObjForSelection); 

// NEW - Populate the range object with the desired element 
rangeObjForSelection.selectNodeContents(nodeArray[ count ]); 
console.log(rangeObjForSelection); 

// OLD - editor.getSelection().selectElement(elementCollection[count]); 
// Trying to make the current element of type selectElement 
// NEW - Highlight the desired element by selecting it as a range 
editor.getSelection().selectRanges([ rangeObjForSelection ]); 

// OLD - var elementX = editor.getSelection().getSelectedElement(); 
// NEW - Create a DOM selection object. 
var selectedRangeObj = new CKEDITOR.dom.selection(editor.document); 
console.log(selectedRangeObj); 

// NEW - You can look at the properties and methods available 
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.selection.html 
// I've created sample objects using the methods that seem most useful. 

var elementX = selectedRangeObj.getRanges(); 
console.log(elementX); 

var elementX2 = selectedRangeObj.getStartElement(); 
console.log(elementX2); 

var elementX3 = selectedRangeObj.getSelectedText(); 
console.log(elementX3); 

var elementX4 = selectedRangeObj.getNative(); 
console.log(elementX4); 

음, 조