Giter Site home page Giter Site logo

lianjie5664 / vue-quill-editor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from surmon-china/vue-quill-editor

0.0 2.0 0.0 3.25 MB

🍡Quill editor component for Vue2

Home Page: https://surmon-china.github.io/vue-quill-editor/

License: MIT License

Vue 92.21% JavaScript 7.79%

vue-quill-editor's Introduction

GitHub issues GitHub forks GitHub stars GitHub license Twitter

NPM

Vue-Quill-Editor

🍡Quill editor component for Vue2,基于Quill、适用于Vue2的富文本编辑器。

v1.1.0

修复webpack UglifyJsPlugin中的报错Bug

Example

Demo Page

Use Setup

Install vue-quill-editor

npm install vue-quill-editor --save

use

// import with ES6
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'


// require with Webpack/Node.js
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')


// use
Vue.use(VueQuillEditor)

// --------------------------------------


// or use with component(ES6)
import { quillEditor } from 'vue-quill-editor'

// use
export default {
  components: {
    quillEditor
  }
}
<!-- use with components - bidirectional data binding(双向数据绑定) -->
<quill-editor ref="myTextEditor"
              v-model="content"
              :config="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)">
</quill-editor>


<!-- If you need to manually control the data synchronization, you can monitor the code change event like this(如果你需要手动控制数据流,就需要像这样手动监听changed事件) -->
<quill-editor ref="myTextEditor"
              :content="content"
              :config="editorOption"
              @change="onEditorChange($event)">
</quill-editor>
// editor option example:
export default {
  data () {
    return {
      content: '<h2>I am Example</h2>',
      editorOption: {
       // something config
      }
    }
  },
  // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
  // 如果需要手动控制数据同步,父组件需要显式地处理changed事件
  methods: {
    onEditorBlur(editor) {
      console.log('editor blur!', editor)
    },
    onEditorFocus(editor) {
      console.log('editor focus!', editor)
    },
    onEditorReady(editor) {
      console.log('editor ready!', editor)
    },
    onEditorChange({ editor, html, text }) {
      // console.log('editor change!', editor, html, text)
      this.content = html
    }
  },
  // if you need to get the current editor object, you can find the editor object like this, the $ref object is a ref attribute corresponding to the dom redefined
  // 如果你需要得到当前的editor对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的editor对象,实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor
    }
  },
  mounted() {
    // you can use current editor object to do something(editor methods)
    console.log('this is my editor', this.editor)
    // this.editor to do something...
  }
}

More Config

Api docs

Author Blog

Surmon

vue-quill-editor's People

Contributors

torvaldssg avatar

Watchers

James Cloos avatar 5664 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.