hidoc-editor

介绍

基于Tinymce5.7.1实现的富文本编辑器

使用

请先下载Node.js 1.下载npm包:

VUE项目的根目录下运行：

npm install hidoc-editor

2.在node_modules中找到hidoc-editor，将dist下的lib文件夹拷贝到public中

在index.html中,引用lib文件夹下的tinymce.min.js

<script src="lib/tinymce.min.js"> </script>

3.引入本npm包并注册为vue的组件，两种方式选一种即可：

（方式1）在你的vue项目的入口js中注册为全局的vue组件，然后在所有vue文件中都可以直接使用:

例如:在main.js中

import Vue from 'vue'
import Editor from 'hidoc-editor';
Vue.component('Editor', Editor);

然后在需要使用的vue页面中

<template>
    <div>
        <Editor v-modal='content' @save="save"></Editor>
    </div>
</template>

（方式2）在需要使用的vue页面中单独引入并注册为一个局部的组件:

例如:demo.vue：

<template>
    <div>
        <Editor v-modal='content' @save="save"></Editor>
	</div>
</template>

<script>
import Editor from 'hidoc-editor';//引入本组件

export default {
  components: {
    Editor
  },
  data() {
    return {
      content: "在此输入···", //编辑器文本
    };
  },
  methods: {
    //保存编辑器的内容
    save() {
      console.log("保存编辑器内容");
      console.log(this.content);
    },
  },
};

</script>

注意

• 编辑器支持常用快捷键，如Ctrl+S保存，Ctrl+F查找替换，Ctr+Z撤销等
• 保存表情时若出现问题 Incorrect string value: '\xF0\x9F\x98\x82\xF0\x9F...' for column 'x' at row 1 是因为存储emoji表情需要数据库支持，可以尝试把数据库的字符集改为utf8mb4，参考：https://www.cnblogs.com/h--d/p/5712490.html
• 上传分辨率过大的图片可能会出现卡顿的现象，且数据库可能无法存储过大的图片，需要插入图片后将其分辨率缩小。