vue3·富文本vue3-tinymce 富文本编辑器
QuillEditor富文本编辑器
1】加载
npm install @jsdawn/vue3-tinymce
2】引入
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
3】使用
<template> <vue3-tinymce v-model="state.content" :setting="state.setting" /> </template>
二、QuillEditor富文本编辑器
官方官网 https://vueup.github.io/vue-quill/guide/usage.html
1】终端载入
npm install @vueup/vue-quill@latest --save # OR yarn add @vueup/vue-quill@latest
2】引用
import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css';
3】组件
<div class="box"> <quill-editor ref="myQuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" :toolbar="toolbarOptions" theme="snow" ret="refQuillEditor" v-model:content="content" /> <!-- opacity:0 用于隐藏上传图片 --> <input type="file" id="file" :onchange="changeFile" style="opacity:0;" /> </div>
4】js属性
let toolbar = { //工具栏目 container: [ ['bold', 'italic', 'underline', 'strike'], // 加粗,斜体,下划线,删除线 ['blockquote', 'code-block'], //引用,代码块 [{ 'header': 1 }, { 'header': 2 }], // 几级标题 [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 有序列表,无序列表 [{ 'script': 'sub' }, { 'script': 'super' }], // 下角标,上角标 [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进 [{ 'direction': 'rtl' }], // 文字输入方向 [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ 'color': [] }, { 'background': [] }], // 颜色选择 [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体 [{ 'align': [] }], // 居中 ['clean'], // 清除样式, ['link', 'image', 'video'], // 上传图片、上传视频 ], handlers: { //点击工具栏目 图片标签 image: function(value) { console.log(value) if (value) { // 调用原生的图片上传组件 var file = document.getElementById('file') file.click() // 插入图片 this.quill.insertEmbed(length, 'image', "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg") // 调整光标到最后 this.quill.setSelection(length + 1) } else { this.quill.format('image', false) } } } } const refQuillEditor = ref(); //链接节点 function changeFile(el) { console.log('接收选择的文件:', el); // axios.post上传图片返回地址 let quill = refQuillEditor.value.getQuill() //获取节点 let length = quill.getSelection().index //获取光标位置 //插入图片 quill.insertEmbed(length, 'image', res.data) // 调整光标到最后 quill.setSelection(length + 1) } const onEditorBlur = (quill) => { console.log('1editor blur!', quill.value) } const onEditorFocus = (quill) => { console.log('2editor focus!', quill) } const onEditorReady = (quill) => { console.log('3editor ready!', quill) }
927 Views