Summernote 文本编辑器在生成 html 的简单引导页面中不起作用
Posted
技术标签:
【中文标题】Summernote 文本编辑器在生成 html 的简单引导页面中不起作用【英文标题】：Summernote text editor not working in simple bootstrap page where html is generated 【发布时间】：2016-10-19 12:42:07 【问题描述】：我将Summernote（用于引导的文本编辑器）添加到我正在测试表单生成器的小页面中。即使示例很简单，我似乎也无法在我的页面中获得编辑器。
See this simplified jsfiddle I made that works and only has 2 lines.
这是我的index.html 文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.min.js" defer></script>
<script src="js/bootstrap-filestyle.min.js" defer></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script src="js/myjavascript.js"></script>
</head>
<body onload="addAllElements()">
<br/>
<div class="row" id="mainRow">
</div>
</body>
</html>
这是我的javascript 文件：
//This function should read a json file and produce the right form
function addAllElements()
//A test for generated forms (from objects)
for (var i = 0; i < 3; i++)
addElement(
label: "Some rich text editing :",
tag: "richEditor",
);
//We add the styling for checkboxes, file inputs and rich editors
$(':checkbox').checkboxpicker();
$(":file").filestyle( buttonText: "File", buttonName: "btn-primary", placeholder: "No file" );
$('#richEditor').summernote();
//This function add a single element to the form
function addElement()
//We create the group div (the whole element div)
var newDiv = document.createElement("div");
if(arguments[0].tag !== "richEditor")
newDiv.className = "form-group col-xs-12 col-sm-6 col-lg-4 col-xl-3";
else
newDiv.className = "form-group col-xs-12 col-sm-12 col-lg-12 col-xl-12";
//We create and add the label to the div
var newLabel = document.createElement("label");
if(arguments[0].tag == "richEditor")
newLabel.className = "col-xs-6 col-sm-5 control-label";
else
newLabel.className = "col-xs-6 col-sm-5 control-label";
newLabel.innerHTML = arguments[0].label;
newDiv.appendChild(newLabel);
//We create and add the input to the div
var inputDiv = document.createElement("div");
if(arguments[0].tag == "richEditor")
inputDiv.className = "col-xs-6 col-sm-7";
else
inputDiv.className = "col-xs-6 col-sm-7";
newDiv.appendChild(inputDiv);
switch (arguments[0].tag)
case "richEditor":
var newInput = document.createElement("div");
newInput.className = "form-control";
newInput.id = "richEditor";
inputDiv.appendChild(newInput);
break;
default:
var mainRow = document.getElementById("mainRow");
mainRow.appendChild(newDiv);
您是否知道如何更正我的代码，以便编辑器实际加载到我提供的空间中？
【问题讨论】：
【参考方案1】：Bootstrap plugins depend on jQuery;如果不先加载，它们将失败：
插件依赖
一些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于 jQuery（这意味着 jQuery 必须包含在插件文件之前）。请查阅我们的 bower.json 以了解支持的 jQuery 版本。
The defer attribute 在您的 jQuery 脚本加载标签中导致它加载 您在 onload 事件中调用 addAllElements。
defer此布尔属性设置为向浏览器指示脚本将在文档被解析后执行。由于所有其他主要浏览器尚未实现此功能，因此作者不应假设脚本的执行实际上会被推迟。不应该在没有 src 属性的脚本上使用 defer 属性。从 Gecko 1.9.2 开始，没有 src 属性的脚本会忽略 defer 属性。但是，在 Gecko 1.9.1 中，如果设置了 defer 属性，甚至内联脚本也会被延迟。
【讨论】：
我做了一个 CodePen 来演示a (mostly) working version of your code。请注意，第二个和第三个文本区域不起作用，因为您已为所有三个元素分配了相同的id。以上是关于Summernote 文本编辑器在生成 html 的简单引导页面中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap summernote，超级漂亮的富文本编辑器