基于vue-quill-editor的富文本Demo

基于Vue的一个富文本编译器的插件，安装并简单使用步骤：

1、项目：一个前端基于vue框架的项目。我用的是一个项目模板（下载路径：https://github.com/nolimits4web/Framework7-Vue-Webpack-Template）按网址上教程配置模板。接下来就是关于vue-quill-editor的安装步骤了。

2、下载：npm install vue-quill-editor --save

3、配置：app.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);

4、配置：创建一个组件文本，名为 vueQuillEditor.vue，代码如下

		<template>
		  <div>
		    <quill-editor
				ref="myQuillEditor" 
				:options="editorOption"
				@focus="$emit('onInputFocus')"
				@blur="$emit('onInputBlur')"
				@change="$emit('onInputChange')"
		    ></quill-editor>
		  </div>
		</template>
		
		<script>
		export default {
		  data(){
		    return {
		    }
		  },
		  props: ['editorOption'],
		}
		</script>

5、使用：在你想使用的页面中引用该组件

<template>
  <f7-page>
    <f7-navbar>
      <f7-nav-left>
        <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
      </f7-nav-left>
      <f7-nav-title>My App</f7-nav-title>
      <f7-nav-right>
        <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-block>
    // 引用组件
      <v-vueQuillEditor
        :editorOption="editorOption"
        @onInputFocus="onInputFocus"  
        @onInputBlur="onInputBlur"  
        @onInputChange="onInputChange"  
      ></v-vueQuillEditor>
    </f7-block>
  </f7-page>
</template>
<script>
import vueQuillEditor from './vueQuillEditor.vue';
export default {
  data(){
    return {
      editorOption: {
        modules: {
         //配置工具栏的工具（可挑选自己所需工具使用）
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        
            ['blockquote', 'code-block']
          ]
        },
        // 改变提示文字内容
        placeholder: '请输入内容...',
      },
    }
  },
  components: {
    'v-vueQuillEditor': vueQuillEditor
  },
  methods: {
    onInputFocus:function() {
      console.log('input focus event');
    },
    onInputBlur:function() {
      console.log('input blur event');
    },
    onInputChange:function() {
      console.log('input change event');
    }
  }
}             
</script>

这就是个简单的demo了，还有其他属性和方法，还没深究。。。。因为突然发现他ie兼容有点麻烦，只兼容到ie11及以上，不满足我的需求。。只能再看看其他插件

兼容（vue-quill-editor是基于quilljs的开发，所以我就把quilljs的兼容图片放在这里了）：
基于vue-quill-editor的富文本Demo