Vue项目8：vue-quill-editor富文本编辑器的使用

1. 新建vue-cli项目

C:\Users\Administrator>f:

F:\>cd F:\Study\vue\test

F:\Study\vue\test>vue init webpack quilleditordemo

? Project name quilleditordemo
? Project description A Vue.js project
? Author xxx <xxx@xxx.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "quilleditordemo".


# Installing project dependencies ...

...这里输出省略...

# Project initialization finished!
# ========================

To get started:

  cd quilleditordemo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

用vscode打开项目，项目目录如下：

2. 安装vue-quill-editor

cnpm install vue-quill-editor --save

3. 安装quill依赖

cnpm install quill --save

4.引入vue-quill-editor

  1）修改main.js

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

  保存

  2）修改App.vue

注释掉<template></template>中div原有的内容，添加编辑器<quill-editor></quill-editor>，template代码如下：

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <HelloWorld/> -->
     <div class="edit_container">
      <quill-editor 
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
      </quill-editor>
      <button v-on:click="saveHtml">保存</button>
    </div> 
  </div>
</template>

<script></script>里添加data()、computed、methods，代码如下：

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
  return {
   content: `<p>hello world</p>`,
   editorOption: {}
  }
 },
 computed: {
  editor() {
   return this.$refs.myQuillEditor.quill;
  },
 },
 methods: {
  onEditorReady(editor) { // 准备编辑器
  },
  onEditorBlur(){}, // 失去焦点事件
  onEditorFocus(){}, // 获得焦点事件
  onEditorChange(){}, // 内容改变事件
  saveHtml:function(event){
   alert(this.content);
  }
 }

}
</script>

保存

5.运行项目

返回cmd命令窗口，输入如下命令运行项目：

cd quilleditordemo
npm run dev

6.浏览器效果

浏览器地址栏输入

http://localhost:8080/

在编辑窗口编辑内容，例如：

使用vue-quill-editor富文本编辑器

 

点击保存按钮，出现如下弹窗，弹窗提示的内容为编辑器里内容的html代码。

 

7.自定义工具栏

修改App.vue在data()里的editorOption，代码如下：

  data(){
  return {
   content: `<p>hello world</p>`,
   editorOption: {
     modules: {
       toolbar: {
         container: [  //设置自己需要的工具
          ['bold'],
          ['italic'],
          ['underline'],
          ['strike'],
          [{'list':'ordered'},{'list': 'bullet' }],
          ['blockquote'], ['code-block'],
          ['link'],
          ['image'],
         ]
       }
     }
   }
  }
 },

 效果如下：

 

 

 

quill-editor文档地址：https://quilljs.com/docs/quickstart/

 

 

 

完成！ enjoy it!