如何向Bootstrap wysihtml5编辑器插入文本？点击按钮插入报错求助

我来帮你排查这个问题，你遇到的问题主要出在两个地方：资源引入的错误，以及没有使用wysihtml5编辑器专用的API来操作内容——直接用val()操作原textarea是无效的，因为wysihtml5已经把普通textarea转换成了富文本编辑器实例。

问题分析 #

1. 资源引入错误：你有两个script标签写错了属性（把src写成了type），而且引入顺序不对——jQuery必须最先引入，因为bootstrap和wysihtml5插件都依赖它。
2. 编辑器操作方式错误：wysihtml5初始化后，原textarea只是编辑器的“后备”元素，直接修改它的value不会同步到可视化的编辑区域，必须通过编辑器提供的API来操作内容。

修复步骤 #

1. 修正资源引入

把你的资源引入代码改成下面的顺序和正确格式：

<!-- 先引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入Bootstrap的JS -->
<script src="https://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
<!-- 引入wysihtml5核心库 -->
<script src="https://raw.githubusercontent.com/xing/wysihtml5/master/dist/wysihtml5-0.3.0.js"></script>
<!-- 引入bootstrap-wysihtml5插件 -->
<script src="https://raw.github.com/jhollingworth/bootstrap-wysihtml5/master/src/bootstrap-wysihtml5.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

注意：通常会把CSS放在页面的<head>标签里，这样页面加载时样式会优先渲染，避免闪烁。

2. 使用wysihtml5 API插入内容

初始化编辑器时，保存它的实例，然后在点击事件里用编辑器的API来插入文本：

// 初始化编辑器并保存实例
var editor = $(".textarea").wysihtml5().data("wysihtml5").editor;

$(".module").click(function(){
  var text = $(this).text();
  // 用insertHTML在当前光标位置插入文本（如果要替换全部内容可以用editor.setValue(text)）
  editor.composer.commands.exec("insertHTML", text);
});

• insertHTML：会在编辑器的当前光标位置插入指定的HTML/文本，适合追加或插入到指定位置。
• setValue：会替换编辑器的全部内容，如果你需要覆盖原有内容可以用这个方法。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <textarea class="textarea" placeholder="Insert Text..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
  <a class="btn btn-default module" href="javascript:;">This text should be inserted into the textarea on click</a>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"></script>
  <script src="https://raw.githubusercontent.com/xing/wysihtml5/master/dist/wysihtml5-0.3.0.js"></script>
  <script src="https://raw.github.com/jhollingworth/bootstrap-wysihtml5/master/src/bootstrap-wysihtml5.js"></script>
  <script>
    var editor = $(".textarea").wysihtml5().data("wysihtml5").editor;

    $(".module").click(function(){
      var text = $(this).text();
      editor.composer.commands.exec("insertHTML", text);
    });
  </script>
</body>
</html>

这样修改后，点击按钮就能把文本插入到wysihtml5编辑器里了。

内容的提问来源于stack exchange，提问作者peace_love