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

WEB前端 waitig 826℃ 百度已收录 0评论

先介绍一下一般网页如何实现 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 请点击这里。

官方文档请点击这里。

后续还会有 quill 富文本插件的 VUE 及 REACT 使用介绍,敬请期待!


本文由【waitig】发表在等英博客
本文固定链接:quill——简单的富文本编辑器
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)