quill——简单的富文本编辑器
2017-10-16 14:33
267 查看
先介绍一下一般网页如何实现 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
bc68
="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 使用介绍,敬请期待!
相关文章推荐
- 富文本编辑器Quill的简单React封装
- vue-quill-editor富文本编辑器简单使用方法
- HTML5 简单富文本编辑器
- [置顶] 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
- 百度富文本编辑器UEditor使用简单示例
- 百度编辑器UEEDITOR使用简单介绍 UEditor表单提交和后台交互详解 最后更新对应的版本:1.2.5.1 教程描述: 富文本编辑器的使用开发中,表单提交有多种场景,编辑器初始化有新增文章和编辑
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
- quilljs 一款简单轻量的富文本编辑器(适合移动端)
- Quill – 可以灵活自定义的开源的富文本编辑器
- ueditor富文本编辑器java使用及最简单的配置(ssh)
- Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
- 开源简单的富文本编辑器大集合
- Javascript实现简单的富文本编辑器
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
- 富文本编辑器kindEditor简单教程
- 简单、易用、轻量的富文本编辑器
- 推荐一款简单好用的富文本编辑器-----kindEditor
- Quill – 可以灵活自定义的开源的富文本编辑器
- 简单的富文本编辑器实现——用jQuery实现在textarea光标处插入内容
- React中使用富文本编辑器Quill,支持粘贴图片