Quill富文本编辑器的使用

1、快速起步

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<div id="editor"> <p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p><p><br></p> </div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', { theme: 'snow' });
</script>

2.自定义Toobar

方法一

 const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],        // toggled buttons['blockquote', 'code-block'],[{ 'header': 1 }, { 'header': 2 }],               // custom button values[{ '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': [] }],['link', 'image'],['clean']                                         // remove formatting button];var quill = new Quill('#editor-container', {modules: {toolbar: toolbarOptions,},placeholder: 'Compose an epic...',theme: 'snow'  // or 'bubble'
});

方法二

<!-- Create toolbar container -->
<div id="toolbar"><!-- Add font size dropdown --><select class="ql-size"><option value="small"></option><!-- Note a missing, thus falsy value, is used to reset to default --><option selected></option><option value="large"></option><option value="huge"></option></select><!-- Add a bold button --><button class="ql-bold"></button><!-- Add subscript and superscript buttons --><button class="ql-script" value="sub"></button><button class="ql-script" value="super"></button>
</div>
<div id="editor"></div><!-- Initialize editor with toolbar -->
<script>var quill = new Quill('#editor', {modules: {toolbar: '#toolbar'}});
</script>

三。自定义图片上传

<span class="ql-formats"><button type="button" class="ql-link"></button></span>
<span class="ql-formats"><button type="button" onclick="imgClick()"  style="outline:none"><svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg></button>
</span>

    function imgClick(){/*内存创建input file*/let input = document.createElement('input');input.type = 'file';input.name = 'uploadFile';input.accept = 'image/jpeg,image/png,image/jpg,image/gif';input.onchange = onFileChange;input.click();}function onFileChange(e) {let fileInput = e.target;if (fileInput.files.length === 0) {return}quill.focus();let data = new FormData;data.append('uploadFile', fileInput.files[0]);axios.post('/url', data).then(res => {if (res.data) {quill.focus();var range = quill.getSelection(true);quill.insertEmbed(range.index, 'image', res.data);quill.setSelection(range.index + 1);}})}

五、获取富文本数据

let introHtml = this.quill.container.firstChild.innerHTML;
let text = quill.getText();

六、自动调节图片大小

<!--引入image-resize.min.js-->
<script src="/node_modules/quill-image-resize-module/image-resize.min.js"></script>
<script>
var quill = new Quill(editor, {modules: {//添加 调节图片 模块ImageResize: {}}
});
</script>

Quill富文本编辑器的使用相关推荐

Quill 富文本编辑器二次封装
Quill 富文本编辑器二次封装 Quill 是一个很流行的富文本编辑器,github 上 star 大约 21k.但是很少项目中使用时直接使用它,都要对其进行二次封装,你作为一个页面仔是挡不住有想法 ...
quill富文本编辑器——修改默认图片、视频上传功能
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式,可能会导致字段过长:默认的视频上传是插入iframe标签,与需要的video标签不符合图片上传初始化编辑器时重写image上 ...
quill 富文本编辑器自定义格式化
quilljs 现在富文本编辑器轮子太多了,Github 上随便搜一下就有一堆,我需要实现的功能很简单,所以就佛系地选了 quilljs,quilljs 是一个轻量级的富文本编辑器. 链接: 官网:q ...
vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...
vue中使用quill富文本编辑器
因为公司的需求,对比了线在很火的几款富文本编辑器,最终选定了quill,他够轻量,拓展性也比较高,除了文档是英文的阅读不方便之外,都很适合公司项目.故整理出来,也方便以后使用. 在网上找了一个中文文档 ...
quill 富文本编辑器
富文本quill 富文本框中上传图片的缩放功能 vue.config.js添加如下配置 import "./resizeImg.js"➡ resizeImg.js下载链接 3.以下 ...
*使用quill富文本编辑器的插件，自定义formData图片上传
官网地址:https://quilljs.com 项目需求:自带的上传图片是base64,直接入库的话,请求头太长,导致网页十分十分的卡,所以才改用formData自定义上传(改完之后,相当于覆盖了他 ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
1.安装 npm install vue-quill-editor --save 2.使用 import { quillEditor } from 'vue-quill-editor' 3.组件中 & ...

Quill富文本编辑器的使用

Quill富文本编辑器的使用相关推荐

最新文章

热门文章