基於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的兼容圖片放在這裏了）：