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.innerHTMLconsole.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.innerHTMLconsole.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 富文本插件的 REACT 使用介绍，敬请期待！

quill——简单的富文本编辑器相关推荐

php简单富文本,JavaScript_Javascript实现简单的富文本编辑器附演示，复制代码代码如下: span styl - phpStudy...
Javascript实现简单的富文本编辑器附演示富文本编辑器编辑区字体颜色: Black Red Green Blue 字体样式: Bold Italic Underline StriketTh ...
现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
前端Quill实现富文本编辑器
目录前言 Quill 介绍 Quill 简单实现效果前言网页上经常会需要用户输入一些文本或者代码块,所以需要富文本编辑器来支持.常见的富文本编辑器有Quill.Draft.js.TinyMCE ...
React H5 使用div自定义简单富文本编辑器
最近项目中h5端要实现图文上传,而且还要支持用户用户输入的格式,例如换行啥的,那么使用输入控件保存输入内容,图片上传控件就不合适了,因为很难知道用户的输入样式. 如果使用一些现有的富文本编辑器,貌似又 ...
【效率】几个免费的富文本编辑器，这不完胜付费？
所以今天给大家分享几款我用过的.觉得值得一用的.开源免费的富文本编辑器,甚至可以说是完胜国外的付费编辑器(付费的自己还不方便修改和定制). 富文本编辑器推荐 editor.md GitHub:htt ...
【推荐】1657- 灵活可扩展，2023年值得尝试的13款富文本编辑器
作为前端开发人员,我们经常需要为网站和应用程序添加文本内容.与传统的文本编辑器不同,富文本编辑器可让您轻松创建各种类型的文本内容,包括加粗字体.斜体字.框架.列表.图片和视频等. 本文我将向大家推荐 ...
2021 年 React 的 5 大富文本编辑器
5大富文本编辑器今天,富文本编辑器被用于许多应用中,包括简单的博客和复杂的内容管理系统.然而,选择一个并不容易,因为有很多具有不同功能的编辑器. 因此,在这篇文章中,我将评估5个React的富文本编 ...
vue-quill富文本编辑器插入img标签时自定义属性
最近被quill.js这个富文本编辑器折磨了好几天,最终也算是完成需求.现描述一下这次遇到的需求时什么: 产品说需要在富文本编辑器加入一个图文混排的功能(图片需要支持缩放.并且图片与文字需要居中对齐) ...
灵活可扩展，2023年值得尝试的13款富文本编辑器
作为前端开发人员,我们经常需要为网站和应用程序添加文本内容.与传统的文本编辑器不同,富文本编辑器可让您轻松创建各种类型的文本内容,包括加粗字体.斜体字.框架.列表.图片和视频等. 本文我将向大家推荐 ...

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

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

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

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

quill——简单的富文本编辑器相关推荐

最新文章

热门文章