前端Quill实现富文本编辑器

西凉的悲伤

已于 2022-08-26 15:12:01 修改

阅读量3k

点赞数

分类专栏：前端文章标签：前端 html javascript 富文本编辑器 Quill

于 2022-08-25 16:35:22 首次发布

本文链接：https://blog.csdn.net/qq_33697094/article/details/126527717

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

网页上经常会需要用户输入一些文本或者代码块，所以需要富文本编辑器来支持。常见的富文本编辑器有Quill、Draft.js、TinyMCE、wangEditor、ProseMirror、Tiptap、CKEditor5、Jodit、kindeditor等等。

本文主要介绍通过 Quill 来实现富文本编辑器。

Quill 介绍

Quill 是一个开源免费具有跨平台和跨浏览器支持的轻型富文本编辑器。

凭借其可扩展架构和富有表现力的API，可以完全自定义它以满足个性化的需求。

由于其模块化架构和富有表现力的API，可以从Quill核心开始，然后根据需要自定义其模块或将自己的扩展添加到这个富文本编辑器中。

它提供了两个用于更改编辑器外观的主题，可以使用插件或覆盖其CSS 样式表中的规则进一步自定义。

Quill还支持任何自定义内容和格式，因此可以添加嵌入式幻灯片、3D模型等。它的代码高亮功能比较强。

Quill 官网和 github 地址：

Quill 官网

quill 的 github

Quill 简单实现

代码如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <style>
    .ql-editor {
      font-size: 1.05rem;
      line-height: 2;
    }

    .ql-snow .ql-editor pre.ql-syntax {
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      color: #000;
      overflow: visible;
    }
    </style>
    <title>Quill Demo</title>
  </head>
  <body>
    <div class="container mt-4 mb-4">
      <div class="row">
        <div class="col">
          <div id="editor">

          </div>
        </div>
      </div>
      <br>
      <div class="row mt-4">
        <div class="col">
          <button id="submit" class="btn btn-primary mt-2">Senden</button>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col">
          <div id="editorContent">

          </div>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
    	var toolbarOptions = [
         ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
		 ['blockquote', 'code-block'],

		[{ 'header': 1 }, { 'header': 2 }],               // custom button values
		['image','link'],
		[{ 'list': 'ordered'}, { 'list': 'bullet' }],
		[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
		[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
		//[{ 'direction': 'rtl' }],                         // text direction

		[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
		[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

		[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
		[{ 'font': [] }],
		[{ 'align': [] }],

		['clean']  
      ];
      var options = {
        modules: {
          toolbar: toolbarOptions
        },
        placeholder: 'Verfasse einen Tipp...',
        readOnly: false,
        theme: 'snow'
      };
      var editor = new Quill('#editor', options);


      $(document).on('click', '#submit', function() {
        $('#editorContent').html(editor.root.innerHTML);
      });
    </script>
  </body>
</html>

效果

在这里插入图片描述

西凉的悲伤

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端Quill实现富文本编辑器

网页上经常会需要用户输入一些文本或者代码块，所以需要富文本编辑器来支持。常见的富文本编辑器有Quill、Draft.js、TinyMCE、wangEditor、ProseMirror、Tiptap、CKEditor5、Jodit、kindeditor等等。本文主要介绍通过 Quill 来实现富文本编辑器。Quill 是一个开源免费具有跨平台和跨浏览器支持的轻型富文本编辑器。凭借其可扩展架构和富有表现力的API，可以完全自定义它以满足个性化的需求。由于其模块化架构和富有表现力的API，可以从Quill核心开始
复制链接

扫一扫