Question

您好，我正在开发一个包含羽毛笔富文本编辑器的页面。单击“编辑”按钮时，我正在尝试从.content类中获取内容。编辑后，通过Quill编辑器将内容更新为相同的.content类。显然，

首先，我想通过羽毛笔编辑.content类中的内容编辑器。
第二，我想将编辑后的内容更新为相同的内容在更新按钮上点击.content课程。
第三，由于我将在对话中使用它，因此如何为每个消息生成编辑器？这样我就可以分别编辑所有消息。但是现在我只在小提琴中显示了一条信息。

我需要您的帮助。谢谢：）

$(function() {
  //Bootstrap tooltip
  $('[data-toggle="tooltip"]').tooltip();
  var toolbarOptions1 = [
    ['bold', 'italic'],
    [{
      'header': 2
    }],
    [{
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }],
    ['clean']
  ];

  var quill1 = new Quill('.conversation-editor', {
    modules: {
      toolbar: toolbarOptions1
    },
    placeholder: 'Compose...',
    theme: 'bubble'
  });

  var justHtmlContent = document.getElementById('justHtml');
  var content = document.getElementsByClassName('content');

  quill1.on('editor-change', function() {
    var justHtml = quill1.root.innerHTML;
    justHtmlContent.innerHTML = justHtml;
  });

  $(".update-conversation-btn").on("click", function() {
    $(this).closest(".coversation-wrap").find(".content").html($("#justHtml").html());
    $(this).closest(".conversation-right").find(".conversation-editor-wrp").hide();
    $(this).closest(".conversation-right").find(".content").show();
  });

  $(".delete-conversation").on("click", function() {
    $(this).tooltip("hide");
    $(this).closest(".coversation-wrap").remove();
    return false;
  });

  $(".edit-conversation").on("click", function() {
    $(this).closest(".coversation-wrap").find(".conversation-editor-wrp").show();
    $(this).closest(".coversation-wrap").find(".content").hide();
    quill1.updateContents($(this).closest(".conversation-right").find(".content").html());
  });

});

body {
  background: #ccc !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
<link href="https://cdn.paperindex.com/teamwork/teamwork.css" rel="stylesheet" />
<script src="https://cdn.paperindex.com/js/avatars.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="coversation-wrap d-flex">
        <div class="coversation-left">
          <img avatar="pk prabu">
        </div>
        <div class="conversation-right w-100">
          <div class="conversation-right-tools"><a href="#" class="edit-conversation" role="button" aria-pressed="true"><i class="fas fa-edit" data-toggle="tooltip" title="" data-original-title="Edit"></i></a><a href="#" data-toggle="tooltip" title="" data-original-title="Delete" class="delete-conversation"
              role="button" aria-pressed="true"><i class="fas fa-trash-alt"></i></a></div>
          <h4>Pk prabu</h4>
          <div class="content">
            <p>I remember my creating my <b>first image-less</b> speech bubble many years ago.</p>
            <div class="attached"></div>
          </div>
          <p id="justHtml" hidden="hidden"></p>
          <!-- Create the editor container -->
          <input name="editor" type="hidden">
          <div class="conversation-editor-wrp">
            <div class="conversation-editor"></div>
            <div class="d-flex mt-2 justify-content-end">
              <div class="mr-2">
                <button type="button" class="btn btn-sm btn-success update-conversation-btn">Update</button>
              </div>
              <div>
                <a href="#" class="conversation-cancel">Cancel</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

笔管编辑器-无法将内容显示到其他Div的编辑器中

0 个答案: