I am working on rich text editor and did well till now. I've made a separate .js file to use it as a plugin.

Now i want to use this plugin by giving it a class name through .cshtml file.But it doesn't seem to work, i've searched for related answers and they said using document.getElementsByClassName will solve my problem.

Please go through this code and tell me what went wrong?

Text editor .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 file-

<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>

I am working on rich text editor and did well till now. I've made a separate .js file to use it as a plugin.

Now i want to use this plugin by giving it a class name through .cshtml file.But it doesn't seem to work, i've searched for related answers and they said using document.getElementsByClassName will solve my problem.

Please go through this code and tell me what went wrong?

Text editor .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 file-

<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>

• javascript
• jquery
• asp.net-mvc-4
• razor
• rich-text-editor

• 2 Read the documentation. getElementsByClassName returns more than one element. – Matt Ball Commented Mar 21, 2013 at 4:02

5 Answers 5

Just take the first item of the matched nodes; it's a NodeList but can be dereferenced like an Array.

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

getElementsByClassName returns an array so use like this

 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();
    });

why dont you use jquery methods??

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.

As you are using jQuery, why not stick with jQuery.

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

and also live method of jQuery is deprecated, use .on() instead.

$(".text-editor") returns HTMl object. “document.getElementsByClassName("text-editor")” returns array object.