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

5 回答 5

8

只取匹配节点的第一项；它是一个 NodeList，但可以像数组一样被取消引用。

var richTextEditor = document.getElementsByClassName("text-editor")[0];
于 2013-03-21T04:12:43.750 回答
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();
    });
于 2013-03-21T04:05:21.093 回答
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.
于 2013-03-21T04:13:10.130 回答
0

$(".text-editor") 返回 HTMl 对象。“document.getElementsByClassName("text-editor")” 返回数组对象。

于 2013-03-21T05:47:06.107 回答
0

当您使用 jQuery 时，为什么不坚持使用 jQuery。

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

并且live不推荐使用 jQuery 的方法，请.on()改用。

于 2013-03-21T04:30:11.847 回答