Quill富文本编辑器—多图片视频混合上传示例

秦岭熊猫

于 2020-06-07 12:41:38 发布

阅读量646

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/tianshan2010/article/details/106599382

版权

本文介绍了Quill富文本编辑器的使用，包括快速入门、主要资源简介及如何创建编辑器。Quill是一个现代的所见即所得（WYSIWYG）编辑器，强调兼容性和可扩展性。通过HTML和JavaScript，可以轻松创建自定义工具栏和编辑容器，实现编辑器的初始化。文章提供了两种创建工具栏的方法，并展示了编辑器的最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Quill is a modern WYSIWYG editor built for compatibility and extensibility. https://quilljs.com

Quill 的使用

快速开始

开始构建一个quill编辑项目包括引入文件、创建自定义工具栏、创建编辑容器以及初始化这几部分。

<!-- 引入css文件 -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- 自定义编辑器工具栏 -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- 创建编辑容器 -->
<div id="editor">
  <p>Hello World!</p>
</div>

<!-- 引入js文件 -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- 初始化编辑器，snow主题 -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
</script>

quill主要资源介绍

<!-- 主要的库文件，js -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- css文件，有两个主题，snow和bubble -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel=&