封装了个Quill编辑器的vue组件,欢迎star

2018-06-14 admin

MQuillEditor

A quill editor component for vue.

Example

img

npm

npm install vue-m-quill-editor

use

import MQuillEditor from 'vue-m-quill-editor'

Vue.use(MQuillEditor)
<template>
  <m-quill-editor 
    :width="quill.width"
    :has-border="quill.border"
    v-model="quill.content"
    :sync-output="quill.syncOutput"
    :theme="quill.theme"
    :disabled="quill.disabled"
    :fullscreen="quill.full"
    @upload="upload"
    ></m-quill-editor>
</template>
<script>
import MQuillEditor from 'm-quill-editor'
export default {
  components: {
    MQuillEditor
  },
  data () {
    return {
      pkg,
      quill: {
        width: 800,
        border: false,
        content: 'wellcome ~',
        syncOutput: false,
        theme: 'snow', //bubble snow
        disabled: false,
        full: false,
        toolbar: [
          [{ 'header': 1 }, { 'header': 2 }],
          ['bold', 'italic', 'underline', 'strike', 'link']
        ]
      }
    }
  },
  methods: {
    upload (file, insert) {
      console.log(file)
      insert('https://avatars0.githubusercontent.com/u/11366654?s=460&v=4', 'center')
    }
  }
}
</script>

MQuillEditor Attributes

参数 说明 类型 可选值 默认值
value 内容 string
width 宽度 number
height 高度 number
placeholder 占位符 string 在这里输入内容…
toolbar 工具栏配置 object
zIndex 编辑器z-index值 string 1000
fullscreen 是否全屏 boolean true/false false
syncOutput 是否同步value(同步到v-model) boolean true/false false
theme 主题 string bubble/snow snow
has-border 是否显示边框 boolean true/false false
disabled 禁用 boolean true/false false
img-accept 图片输入框 accept 属性 string

toolbar:

[
  // [{ 'font': fonts }],
  // [{'size': ['small', false, 'large', 'huge']}],
  ['bold', 'italic', 'underline', 'strike', 'link', {'header': [1, 2, 3, 4, 5, 6, false]}],
  // [{ 'header': 1 }, { 'header': 2 }],
  // [{'header': [1, 2, 3, 4, 5, 6, false]}],
  ['blockquote', 'code-block'],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  // [{ 'script': 'sub'}, { 'script': 'super' }],
  // [{ 'indent': '-1'}, { 'indent': '+1' }],
  // [{ 'direction': 'rtl' }],
  [{'color': []}, {'background': []}],
  // [{align: []}],
  // [{ 'align': [false, 'right', 'center', 'justify'] }],
  [{align: ''}, {align: 'right'}, {align: 'center'}, {align: 'justify'}],
  ['image', 'video'],
  ['clean']
]

MQuillEditor Events

事件 说明 参数
init 初始化 quill, MQuillEditor
blur 失去焦点
focus 获取焦点
change 内容改变
upload 选择图片 File, quill.insertImage

MQuillEditor Methods

名称 说明 参数
setContent 设置html html
getContent 获取html
setDisabled 禁用

other

Quill

Quill Github

Quill API

原文链接:https://github.com/mengdu/m-quill-editor

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34078.html

文章标题:封装了个Quill编辑器的vue组件,欢迎star

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
vue+element-ui+slot-scope实现可编辑表格
1.咱开发拿到需求大多数是去网上找成型的组件,找不到再看原生的方法能否实现,大牛除外哈,大牛一般喜欢封装组件框架。 2.可编辑表格在后台管理系统还是比较常用的,因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法,下...
2017-12-25
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部