2013-03-21 5 views
4

저는 리치 텍스트 에디터에서 일하고 있으며 지금까지 잘 해왔습니다. 별도의 .js 파일을 플러그인으로 사용했습니다.자바 스크립트 : 클래스 이름별로 요소를 가져 오지 못했습니다.

이제는이 플러그인을 .cshtml 파일을 통해 클래스 이름을 지정하여 사용하고 싶습니다. 그러나 작동하지 않는 것 같습니다. 관련 답변을 검색했으며 document.getElementsByClassName을 사용하면 문제가 해결 될 것이라고 말했습니다.

이 코드를 살펴보고 잘못된 점을 알려주십시오.

텍스트 편집기의 .js -

var richTextEditor = document.getElementsByClassName("text-editor"); 
    richTextEditor.contentDocument.designMode = 'ON'; 
    $('#strong').live('click', function() { 
     richTextEditor.contentDocument.designMode = 'ON'; 
     richTextEditor.contentDocument.body.contentEditable = true; 

     richTextEditor.contentDocument.execCommand('bold', false, null); 
     richTextEditor.focus(); 
    }); 

cshtml은 파일 -

<script src="/js/Texteditor.js" type="text/javascript"></script> 
<script src="/js/jquery.js" type="text/javascript"></script> 
<div id="strong" class="command btn"><i class="icon-bold icon-black"></i></div> 



    <iframe id="edtNoteCreate" class="text-editor" name="DisplayNote" style="width:430px;height:150px;">@((Model.Note != null ? Model.Note : ""))</iframe> 
+2

[문서 읽기.] (https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName)'getElementsByClassName'는 둘 이상의 요소를 반환합니다. –

답변

7

처럼 사용 반환 의 일치하는 노드; 그것은 NodeList이지만 Array처럼 dereferenced 될 수 있습니다.

var richTextEditor = document.getElementsByClassName("text-editor")[0]; 
3

getElementsByClassName 그냥 첫 번째 항목을 배열 때문에이

var richTextEditor = document.getElementsByClassName("text-editor"); 
    richTextEditor[0].contentDocument.designMode = 'ON'; 
    $('#strong').live('click', function() { 
     richTextEditor[0].contentDocument.designMode = 'ON'; 
     richTextEditor[0].contentDocument.body.contentEditable = true; 

     richTextEditor[0].contentDocument.execCommand('bold', false, null); 
     richTextEditor[0].focus(); 
    }); 
+4

왜 '[0]'을 (를) 반복 하시겠습니까? var가 선언 될 때'[0]'을 준다. :) –

+0

@prasath k, 왜 배열을 반환합니까? – Manoj

+1

document.getElementsByClassName .. 클래스 이름으로 Element가 아닌 ELEMENTS를 가져옵니다. 동일한 클래스 이름을 가진 5 개의 요소가있는 경우 인덱스가 0,1,2,3,4, ... 인 5 개의 요소를 모두 반환합니다. 단일 요소를 얻으려면 getElementById()를 사용해야합니다. –

1

왜 jquery 메소드를 사용합니까 ??

var richTextEditor = document.getElementsByClassName("text-editor"); 

instead try this: 

var richTextEditor = $(".text-editor"); //again this is going to return more than one object. 

//so you can also try below code to manipulate in that. 

var richTextEditor = $(".text-editor").first(); //for first element. similarly can use .last() or n-th child. 
+0

제안은 의미가 있지만,이 편집기에 더 많은'execCommands'를 사용하고 있으므로, 아이에게주는 것이 도움이되지 않습니다. – Manoj

0

jQuery를 사용할 때 jQuery를 사용하는 것이 좋습니다.

var richTextEditor = $('.text-editor').eq(0); 

또한 jQuery를의 live 방법이 사용되지 않으며, 대신 .on()를 사용합니다.

0

$ (". 텍스트 편집기")는 HTMl 개체를 반환합니다. "document.getElementsByClassName ("텍스트 편집기 ")"는 배열 객체를 반환합니다.