Question

我正在尝试几种WYSIWYG HTML5 / JQuery编辑器。但是，使用Bootstrap WISWYG和Summernote，我得到'无法读取属性'fn'的undefined'或'无法读取属性'编辑器'未定义。我只是在GitHub上使用标准文件。有人使用JQuery插件熟悉这些错误吗？

修改

我现在正在尝试Bootstrap WISWYG

在我体内，我有

<div id="editor">Editor</div>

在我的js中，我有

$(document).ready(function() {
  $('#editor').wysihtml5();
});

然而，我得到的错误是：无法读取未定义的属性“编辑器”（第157行）

第157行：

var editor = new wysi.Editor(this.el[0], options);

JSFiddle：http://jsfiddle.net/MgcDU/8125/

编辑2

我忘了包含一个JS文件。但是，在包含它后，我收到一个新错误：

Uncaught TypeError: Cannot read property 'firstChild' of undefined

错误引用的代码行：

if (isString) {
  element = wysihtml5.dom.getAsDom(elementOrHtml, context);
} else {
  element = elementOrHtml;
}

while (element.firstChild) <<<Error

Answer 1

问题是您使用DIV元素而不是textarea，但也缺少依赖项。检查Bootstrap WYSIHTML5页面，它说：

依赖关系：


自举-wysihtml5.js

bootstrap-wysihtml5.css

wysihtml5

Twitter Bootstrap

那么您的文档应该类似于：

<!DOCTYPE html>
<header>
    <title>HTML5 Editor</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Of course place sources in your own server, do not leech bandwidth -->
    <script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
    <script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
    <link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/src/bootstrap-wysihtml5.css">
</header>
<body>
   <textarea class="editor"></textarea>
   <script type="text/javascript">
       $(document).ready(function(){
           $('.editor').wysihtml5();
       });
   </script>
</body>

如需进一步参考，请查看：Wysihtml5 #Usage

Answer 2

"cannot read property 'fn' of undefined"

通常意味着脚本没有将脚本加载到DOM中。您可能缺少jQuery文件？我经常注意到，将jQuery脚本直接加载到HTML的底部，就在

之前。

</body>

但是，如果我只在头文件中加载一个Jquery文件，而其余的其他jquery插件脚本加载到html文件的底部，它总能正常工作。

JQuery - 无法读取未定义的属性“编辑器”

2 个答案: