从javascript函数将文本插入summernote答案

【问题标题】：Inserting text to summernote from javascript function从javascript函数将文本插入summernote
【发布时间】：2018-04-29 06:18:04
【问题描述】：

所以我一直在尝试在普通的 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>

【问题讨论】：

你也能显示你的html吗？
@AndrewLohr 刚刚做了

标签： javascript jquery summernote

【解决方案1】：

看起来你混合了 jQuery 选择器。您有 1 个 Summernote，因此您可以使用其 ID id="summernote" 访问它

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

您的 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>

【讨论】：