quill——简单的富文本编辑器

先介绍一下一般网页如何实现 quill 富文本编辑器

引入 quill.js 文件

<script src="https://cdn.quilljs.com/1.3.3/quill.js"></script>

引入主题 css 文件

 <link href="https://cdn.quilljs.com/1.3.3/quill.snow.css" rel="stylesheet">

本文操作基于 JQ，引入 JQ

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

实现 HTML 文本

<!-- 编辑器 -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>
<!-- 按钮 -->
<div style="padding: 15px;margin-top: 20px;">
  <span onclick="nihao();" class="btn">获取编辑器内容</span>
</div>
<!-- 获取内容 -->
<div class="content">
</div>

JS 初始化

var quill = new Quill('#editor', {
    theme: 'snow'
  });
  function nihao() {
    let t = quill.container.firstChild.innerHTML
    console.log(t)
    $('.content').css('display', 'block')
    $('.content').text(t)
  }

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>quill富文本编辑器</title>
  <style>
    .btn{
      border:1px solid #eee;
      padding: 15px;
      margin-top: 20px;
      cursor: pointer;
      background: #00aac5;
      color: #fff;
    }
    .content{
      margin-top: 20px;
      padding:12px;
      border:1px solid #eee;
      background: #000;
      color: #fff;
      display: none;
    }
  </style>
  <script src="https://cdn.quilljs.com/1.3.3/quill.js"></script>
  <link href="https://cdn.quilljs.com/1.3.3/quill.snow.css" rel="stylesheet">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 编辑器 -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>
<!-- 按钮 -->
<div style="padding: 15px;margin-top: 20px;">
  <span onclick="nihao();" class="btn">获取编辑器内容</span>
</div>
<!-- 获取内容 -->
<div class="content">
</div>

<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
  function nihao() {
    let t = quill.container.firstChild.innerHTML
    console.log(t)
    $('.content').css('display', 'block')
    $('.content').text(t)
  }
</script>
</body>
</html>

项目demo 请点击这里。

官方文档请点击这里。

VUE 如何实现 quill 富文本编辑器

这里推荐一款插件 vue-quill-editor，具体代码如下

// js
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

export default {
  data() {
    return {
        text: ''
    }
  },
  components: {
    quillEditor
  }
}

// template
<quill-editor ref="myTextEditor" v-model.trim="text"></quill-editor>

更多内容请查看 vue-quill-editor

quill——简单的富文本编辑器

先介绍一下一般网页如何实现 quill 富文本编辑器

VUE 如何实现 quill 富文本编辑器

后续还会有 quill 富文本插件的 REACT 使用介绍，敬请期待！

猜你喜欢