Question

大家好，我正在尝试向我的 quill 文本编辑器（下面的代码）添加一个保存按钮。我把它输入到 HTML 中，但现在我需要一个按钮来保存它，还有一个可以重新加载相同内容的不同页面上的按钮。我没有找到足够的信息，但不是特别具体或与我的项目相关。

此外，文本也以“HTML”格式打印在屏幕上，我无法弄清楚如何在不将其打印在屏幕上的情况下将其记录下来，但这是次要的。

谢谢

            {% load static %}
<HTML>
  <head>
    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
    <link rel="stylesheet" href="{% static "css/text_editor.css" %}">
    <meta charset="UTF-8">
    <title>Collapsible Sidebar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static "css/side.css" %}">
    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="blue">
  <div class="nav-wrapper">
    <a href="/signup/front_page" class="header__logo" style="color: orange">Logo</a>
    <a href="/signup/front_page" class="header__image" style="color: orange"><i class="material- 
icons">landscape</i></a>
    <ul class="right brand-logo">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="/signup/front_page/account">Account</a></li>
  

<li><a href="{% url 'logout' %}">LOGOUT</a></li>
    </ul>
  </div>
</nav>
  </head>
<div class="container" id="editor-container">
<body>
    <div id="editor" style=height: 200px></div>
    <div id="editor style="height: 200px"></div>
</body>
  <div class="container javascript" id="delta-container"></div>
<script>

  var toolbarOptions = [
    [{ 'font': [] }],
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic'],
    [{ 'align': [] }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ 'color': [] }, { 'background': [] }],
    [ 'image', 'link', 'video' ],
    ['blockquote'],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],
    ['clean']                                         // remove formatting button

  ]
  var quill = new Quill('#editor', {
    modules: {
      toolbar: toolbarOptions
    },
    theme: 'snow'
  });
  function logHtmlContent() {
    console.log(quill.root.innerHTML);
  }
quill.on('text-change', update);
var container = document.querySelector('#delta-container');
update();

function update(delta) {
  var contents = quill.getContents();
  console.log('contents', contents);
  var html = "contents = " + JSON.stringify(contents, null, 2);
  if (delta) {
    console.log('change', delta)
     html = "change = " + JSON.stringify(delta, null, 2) + "\n\n" + HTML;
  }
  container.innerHTML = HTML;
  hljs.highlightBlock(container);
}
</script>
</html>













html,body {
  margin: 50;
  height: 95%;
}

#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#editor-container {
  height: 100%;
  /* added these styles */
  flex: 1;
  display: flex;
  flex-direction: column;
}

#editor {
  height: 100%;
  /* added these styles */
  flex: 1;
  overflow-y: auto;
  top: 0px;
  width: 100%;
}


.container:first-child {
  border-right: 0px;
}

Quill 文本编辑器 - 保存按钮

0 个答案: