vue富文本编辑器

1、mavon-editor富文本编辑器（可以识别html）

1、下载安装：

npm install mavon-editor--save
也可使用淘宝镜像下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install mavon-editor--save

2、使用：

<template>
	<div>
		<mavon-editor
	 		@save="saveDoc"
            @change="updateDoc"
            ref="editor"
            v-model="doc"
		>
		</mavon-editor>
	</div>
</template>
<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default{
 	components:{
      mavonEditor,
    },
	data(){
		return{
			doc:''
		}
	},
	methods:{
		//内容改变时会触发
      updateDoc(markdown, html){
        console.log(markdown, 111);
        console.log(html, 222);
      },.
      //点击保存时触发
      saveDoc(markdown, html){
        console.log(markdown, 333);
        console.log(html, 444);
      }
	}
}
</script>

2、quillEditor富文本编辑器

1、下载及安装：

npm install vue-quill-editor --save
也可使用淘宝镜像下载
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install vue-quill-editor --save

2、使用：

<template>
	<div>
	 //富文本编辑器最外层须有一个父级元素，加上ql-editor类名。否则回显样式不正确
		<div class="ql-editor"> 
            <quill-editor 
                v-model="content" 
                ref="myQuillEditor" 
                :options="editorOption" 
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
         </div>
	</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; 
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default{
 	components:{
      quillEditor
    },
	data(){
		return{
			content:'',
          	editorOption: {   //工具项配置
              modules: {
                toolbar: [
                  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                  ["blockquote", "code-block"], // 引用  代码块
                  [{ header: 1 }, { header: 2 }], // 1、2 级标题
                  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
                  [{ script: "sub" }, { script: "super" }], // 上标/下标
                  [{ indent: "-1" }, { indent: "+1" }], // 缩进
                  // [{'direction': 'rtl'}],                         // 文本方向
                  [{ size: ["small", false, "large", "huge"] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                  [{ font: [] }], // 字体种类
                  [{ align: [] }], // 对齐方式
                  ["clean"], // 清除文本格式
                  ["link", "image", "video"] // 链接、图片、视频
                ] // 工具菜单栏配置
              },
              placeholder: '请在这里添加产品描述', // 提示
              readyOnly: false,  // 是否只读
              theme: 'bubble',  // 主题 snow/bubble
              syntax: true  // 语法检测
            },
		}
	},
	computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    },
	methods:{
		// 准备编辑器
		onEditorReady(editor) { 
        	console.log(editor);
        },
        // 失去焦点事件
        onEditorBlur(file){
          console.log(file, "失去焦点");
        }, 
        // 获得焦点事件
        onEditorFocus(file){
          console.log(file, "获得焦点");
        }, 
         // 内容改变事件
        onEditorChange(file){
          console.log(file, "内容改变");
        }
	}
}
</script>

3、鼠标悬浮提示

one：首先创建一个js文件 quill-title.js：

const titleConfig = {
    'ql-bold': '加粗',
    'ql-color': '颜色',
    'ql-font': '字体',
    'ql-code': '插入代码',
    'ql-italic': '斜体',
    'ql-link': '添加链接',
    'ql-background': '背景颜色',
    'ql-size': '字体大小',
    'ql-strike': '删除线',
    'ql-script': '上标/下标',
    'ql-underline': '下划线',
    'ql-blockquote': '引用',
    'ql-header': '标题',
    'ql-indent': '缩进',
    'ql-list': '列表',
    'ql-align': '文本对齐',
    'ql-direction': '文本方向',
    'ql-code-block': '代码块',
    'ql-formula': '公式',
    'ql-image': '图片',
    'ql-video': '视频',
    'ql-clean': '清除字体样式'
  }
  export function addQuillTitle () {
    const oToolBar = document.querySelector('.ql-toolbar')
    const aButton = oToolBar.querySelectorAll('button')
    const aSelect = oToolBar.querySelectorAll('select')
    aButton.forEach(function (item) {
      if (item.className === 'ql-script') {
        item.value === 'sub' ? item.title = '下标' : item.title = '上标'
      } else if (item.className === 'ql-indent') {
        item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
      } else {
        item.title = titleConfig[item.classList[0]]
      }
    })
    aSelect.forEach(function (item) {
      item.parentNode.title = titleConfig[item.classList[0]]
    })
  }

two：然后在页面中引入：

import { addQuillTitle } from '../../common/js/quill-title.js'

three：在该页面的mounted中引用：

mounted(){
   addQuillTitle(); 
},