vue里使用quill

下载插件

npm install vue-quill-editor --save

在main.js里引入

//富文本
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

在页面里使用

<quill-editor v-model="detail":options="options"ref="QuillEditor"style="line-height: normal; width: 600px; height: 250px">
</quill-editor>
<el-uploadstyle="display: none"class="avatar-uploader":action="action":show-file-list="false":on-success="editImg" ><el-button size="small" type="primary">点击上传</el-button>
</el-upload>

import Quill from "vue-quill-editor";
let fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",
];
Quill.Quill.imports["formats/font"].whitelist = fonts;
Quill.Quill.register(Quill.Quill.imports["formats/font"]);
const toolbarOptions = [["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线["blockquote", "code-block"], // 引用  代码块// [{ header: 1 }, { header: 2 }], // 1、2 级标题[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表[{ script: "sub" }, { script: "super" }], // 上标/下标[{ indent: "-1" }, { indent: "+1" }], // 缩进//需修改js和css文件[{ size: ["12", false, "16", "18", "20", "24", "28", "32", "36"] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ font: fonts }], // 字体种类[{ align: [] }], // 对齐方式["clean"], // 清除文本格式["image"], // 链接、图片、视频
];
export default {data() {return {options: {placeholder: "",theme: "snow", // or 'bubble'placeholder: "请输入学校简介",modules: {toolbar: {container: toolbarOptions,handlers: {image: function (value) {if (value) {document.querySelector(".avatar-uploader .el-button").click();} else {this.quill.format("image", false);}},},},},},};},methods: {//富文本图片editImg(res) {let quill = this.$refs.QuillEditor.quill;let length = quill.getSelection().index;quill.insertEmbed(length, "image", res.message);quill.setSelection(length + 1);},}}

vue里使用quill相关推荐

Vue里标签嵌套限制问题解决------解析DOM模板时注意事项：
Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: 参考文章: (1)Vue里标签嵌套限制问题解决------解析DOM模板时注意事项: (2)https://www.cnblogs. ...
vue 打包后访问接口报错404 解决方案（前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
Vue 里的$如何理解
如下代码: new Vue({el: '#app',router,store,i18n,test,render: h => h(App) })// 用的时候this.$store.dispatc ...
Vue 里几个重要的指令
Vue 里几个重要的指令 --资源来自黑马程序员 v-text v-html v-on v-show v-if v-bind v-for v-model --资源来自黑马程序员) v-text &l ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...
[vue] 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？
[vue] 为什么我们写组件的时候可以写在.vue里呢?可以是别的文件名后缀吗? 也可以写为js,jsx,ts,tsx这种个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
解决vue里iscroll（better-scroll）点击触发两次和初始化无法滚动问题！
这两个插件我用过好几次,有时候很顺利,不顺利的时候真的很麻烦,一直无法滚动,明明style里已经有样式了,就是滚动不了. 先说下在vue里的三种的引入方式: 在index.html文件里通过scrip ...
html input 的value变颜色,vue里input根据value改变背景色的实例
这篇文章主要为大家详细介绍了vue里input根据value改变背景色的实例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 1.首先定义两个不同 ...
vue-loader无法解析vue里的stylus的style，外部引入styl文件可以解析，引入VueLoaderPlugin也没用
先贴webpack.config.js的配置文件 const path = require('path'); const webpack = require('webpack') const VueL ...

vue里使用quill

vue里使用quill相关推荐

最新文章

热门文章