vue-quill-editor

vue- quil l-editor 介绍

安装

npm?install?vue- quil l-editor?--save

该 插件 是依赖于 quil l的，但是无需再下载 quil l,因为在安装vue- quil l-editor时，已经安装了 quil l

引入

全局引用

在main.js中引入 插件

//引入 插件 核心 文件

import vue quil lEditor from 'vue- quil l-editor'

//引入 插件 样式

import ' quil l/ dis t/ quil l.core.css'

import ' quil l/ dis t/ quil l.s Now .css'

import ' quil l/ dis t/ quil l.bubble.css'

vue.use(vue quil lEditor);

局部引用

在使用该 插件 的组件中引入

import { quil lEditor } from 'vue- quil l-editor'

import ' quil l/ dis t/ quil l.core.css'

import ' quil l/ dis t/ quil l.s Now .css'

import ' quil l/ dis t/ quil l.bubble.css'

// 注册 子组件

export default {

components: {

quil lEditor

}

}

刚开始看到全局引用和局部引用方式还不一样， 一个 是import直接引入， 一个 是加{}引入，后来又在 百度 找其他 文章 ，发现也是两种都有用，于是去看了下源码，所以两种 方法 都可以。

import _ quil l from ' quil l'

import quil lEditor from './editor.vue'

const quil l = window. quil l || _ quil l

const install = (vue,globalOptions) => {

if (globalOptions) {

quil lEditor.props.globalOptions.default = () => globalOptions

}

vue.component( quil lEditor.name, quil lEditor)

}

const Vue quil lEditor = { quil l, quil lEditor,install }

export default Vue quil lEditor

export { quil l,install }

使用

< quil l-editor

v-model="editorhtml"

ref="my quil lEditor"

:options="editorOption">

</ quil l-editor>

data(){

return{

editorhtml:'',

editorOption:{}

}

}

edithtml是富文本的 内容

editorOption是关于 插件 的配置，具体请查看文档

GitHub: https://github.com/surmon-china/vue-quill-editor

网站描述: 基于Vue的移动端富文本 插件

vue-quill-editor官方网站

官方网站：

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于vue-quill-editor的详细内容...