My-Vue-Editor 技术文档

My-Vue-Editor 技术文档

---

安装指南

要开始使用 My-Vue-Editor，你需要先确保你的环境已经配置好了 Node.js 和 npm。之后，通过以下命令将其添加到你的 Vue 项目中：

npm install my-vue-editor

如果你的项目不使用 npm 管理，也可以通过直接下载 dist 目录下的文件并在 HTML 文件中引入：

<script src="serverpath/vue.js"></script>
<script src="serverpath/dist/my-vue-editor.js"></script>

请注意，由于本编辑器依赖于 font-awesome 提供的图标，请确保也安装并引入 font-awesome。

项目的使用说明

一旦安装完毕，你可以通过以下方式在 Vue 组件中使用 my-vue-editor：

<template>
  <my-vue-editor :content="content" @change='ctnChange' @imageUpload='imageUpload'></my-vue-editor>
</template>

<script>
export default {
  data() {
    return {
      content: '', // 编辑器的初始内容
    };
  },
  methods: {
    ctnChange(newContent) {
      this.content = newContent; // 内容变化回调
    },
    imageUpload(uploadInfo) {
      // 图片上传处理逻辑
    },
  },
};
</script>

项目API使用文档

配置选项

你可以通过 Vue.use() 方法为 my-vue-editor 提供一系列配置选项，以定制其行为：

示例配置:

Vue.use(myVueEditor, {
  modules: [...], // 你想要激活的功能模块数组
  icons: {...}, // 自定义模块图标
  commands: {...}, // 自定义编辑指令
  shortcut: {...}, // 快捷键绑定
  ...
});

避免冲突的模块配置

• exclude: 控制特定模块与其他模块的相互影响，例如：
  • 'ALL': 禁用所有模块。
  • 'ALL_BUT_MYSELF': 只保留当前模块活动。
  • 数组形式: 禁用特定命名的模块。

事件监听

• change: 监听编辑器内容变更。
• imageUpload: 图片上传事件处理。

自定义和扩展

• 修改内置模块: 直接在配置中覆盖模块的属性。
• 创建自定义模块: 利用 extendModules 配置项，可以增加自定义的行为和界面元素。

每一步配置和使用都是为了更好地适应你的应用需求，让编辑体验更加个性化和强大。

---

这个文档提供了从安装到高级定制的全面指导，帮助开发者高效集成并利用 My-Vue-Editor 在Vue项目中。记住，合理利用这些配置可以使编辑器完美匹配你的应用场景。