从 javascript 函数向 summernote 插入文本

Question

所以我一直在尝试在普通 javascript 函数中将文本插入到 summernote 中。我有一个值列表，单击它们时应该将它们附加到实际的文本区域中。这些函数正在触发，因为当我单击时我将消息记录到控制台但由于某种原因仍然没有附加任何内容。这是函数：

function appendListItem(ele){
    console.log("Clicked!");
    var id = $(ele).attr("id");
    console.log(typeof(id));
    console.log("ID:" + id);
    //var htmlStr = "<p>#"+id+"</p>";
    $(".summernote").summernote('code', id);
    console.log($("#summernote").summernote('code'));
}

除第 7 行 $(".summernote").summernote('code', id); 外，一切正常。我也尝试在 summernote 函数中使用 'insertText' 。 id 是一个字符串。我已经尝试传递一个 html 字符串，如注释掉的行（第 6 行）所证明的那样。如果您能给我任何帮助，我们将不胜感激！

编辑 1：

这是我要求的 html：

<body>
    <div><img src="./images/Logo.png" alt="Logo"  class="logo-center"></div>
    <div id="summernote"></div>
    <div class="checkList">
        <p id="checkTitle">CHECKLIST (<span id="fraction">0/5</span>)</p>
        <ul class="list-group" id="trigList">
            <li class='list-group-item'><a id='mood' onclick='appendListItem(this)'>Mood</a></li>
            <li class='list-group-item'><a id='phone' onclick='appendListItem(this)'>Phone</a></li>
            <li class='list-group-item'><a id='email' onclick='appendListItem(this)'>Email</a></li>
            <li class='list-group-item'><a id='lead' onclick='appendListItem(this)'>Lead</a></li>
        </ul>
    </div>
    <div><button type="button" class="btn btn-primary" onclick="logNote();">Log Note</button></div>
</body>

Answer 1

您似乎混淆了 jQuery 个选择器。您有 1 个 Summernote，因此您可以使用其 ID id="summernote"

访问它

你目前正在做什么，使用这一行 $(".summernote").summernote('code', id);- 告诉 jQuery 获取所有具有 class 的元素summernote 由于开头的 . 选择器。

您的 html 中没有任何元素具有 class 的 summernote，所以这就是它不起作用的原因。

将 $(".summernote").summernote('code', id); 更改为 $("#summernote").summernote('code', id); 应该可以。 # 将获得带有 id="summernote" 的元素，这是您实际的 Summernote 元素。

这是一个完整的工作示例

<body>
    <div><img src="./images/Logo.png" alt="Logo"  class="logo-center"></div>
    <div id="summernote"></div>
    <div class="checkList">
        <p id="checkTitle">CHECKLIST (<span id="fraction">0/5</span>)</p>
        <ul class="list-group" id="trigList">
            <li class='list-group-item'><a id='mood' onclick='appendListItem(this)'>Mood</a></li>
            <li class='list-group-item'><a id='phone' onclick='appendListItem(this)'>Phone</a></li>
            <li class='list-group-item'><a id='email' onclick='appendListItem(this)'>Email</a></li>
            <li class='list-group-item'><a id='lead' onclick='appendListItem(this)'>Lead</a></li>
        </ul>
    </div>
    <div><button type="button" class="btn btn-primary" onclick="logNote();">Log Note</button></div>
  <script>
    $(document).ready(function() {
      $('#summernote').summernote();
    });
    function appendListItem(elem) {
      //var htmlStr = "<p>#"+id+"</p>";
      var id = $(elem).attr("id");
      console.log(id);
      $("#summernote").summernote('code', id);
      // use 'insertText' instead of 'code' to append the id instead
    }
  </script>
</body>

从 javascript 函数向 summernote 插入文本

Inserting text to summernote from javascript function

javascript

jquery

summernote