Vue-vuecmf-editor NPM

vue-vuecmf-editor

vuecmf editor是一款基于vue3+typescript+element plus的HTML5富文本编辑器

示例演示： http://www.vuecmf.com

注意

打包方式变更

v2版本开始使用vite方式打包，原v1版本使用的是webpack方式打包

安装

# yarn方式安装 vue-vuecmf-editor
yarn add vue-vuecmf-editor

# npm方式安装 vue-vuecmf-editor
npm install vue-vuecmf-editor

项目中使用

注意：

从v1.4.0开始增加支持文件上传功能，表单名称为 file （即后端接收的参数为 file）；

上传文件后端返回数据格式如下：

{
    "code": 0,
    "data": {
        "url": "http://www.vuecmf.com/uploads/20221025/c88d8d80e10e7ee73c83afd6e960a2af.txt"
    },
    "msg": "请求成功"
}

增加插入文件功能；

属性增加如下：

upload：上传文件的后端地址，不设置则插入图片、视频及文件都不会显示上传按钮

token: 上传文件传给后端的header中的token（没有的可以不传）

params: 上传文件传给后端额外的form表单的参数（没有的可以不传）

1.5.x版本开始，增加函数类属性upload_action，可自定义上传文件表单，如接入外部文件管理器组件。具体使用可查examples

1.8.x版本开始, 增加AI生成内容、高德地图功能

###1、先在项目中的main.ts 引入

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import "bootstrap-icons/font/bootstrap-icons.css"

//导入
import VuecmfEditor from "vue-vuecmf-editor"

createApp(App).use(VuecmfEditor).mount('#app')

###2、在模板中使用

<template>
  <h3>vuecmf-editor demo</h3>

  <vuecmf-editor
      id="myeditor"
      size="default"
      :content="contentHtml"
      @on-change="getContent"
      :token="token"
      :params="params"
      upload="http://www.vuecmf.com/vuecmf/upload"
      openai="http://localhost:8080/web/ai"
      :upload_action="uploadAction"
      amap_key="高德地图申请的应用KEY"
  ></vuecmf-editor>
  <button @click="save">保存</button>


  <el-dialog
      v-model="dialogVisible"
      title="上传文件"
      width="50%"
  >
    <span>此处可以自定义上传组件或接入外部文件管理器组件，如<a href="https://github.com/vuecmf/vue-vuecmf-fileexplorer" target="_blank">vue-vuecmf-fileexplorer</a> </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFile">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>


<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const contentHtml = ref('Hello world!')
    const token = ref('')
    const params = ref('')

    const getContent = (content:string, id: string) => {
      console.log('id=', id)

      contentHtml.value = content
    }

    const save = ():void => {
      console.log(contentHtml.value)
      alert(contentHtml.value)
    }

    token.value = 'b9fa3e1f2fd0bcfc75aa7a5efd9d9d2b'
    params.value = '{"field_name":"pic"}'

    const dialogVisible = ref(false) //上传弹窗
    const fileObj = ref()
    
    //uploadAction为函数时，则调用的自定义上传表单，否则为默认上传表单
    const uploadAction = null
    /*const uploadAction = (fileInfo: any, from: string):void => {
      fileObj.value = fileInfo
      dialogVisible.value = true
      console.log(fileInfo, from)
    }*/

    //保存文件信息，如可将文件管理器中选择的文件信息保存
    const saveFile = ():void => {
      fileObj.value.url = 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/300'
      dialogVisible.value = false
    }

    return {
      getContent,
      contentHtml,
      save,
      token,
      params,

      dialogVisible,
      uploadAction,
      saveFile
    }

  }
});
</script>

自定义编辑器功能

<!-- 添加tools属性 可自定义编辑器 -->
<vuecmf-editor
      id="myeditor"
      :content="contentHtml"
      @on-change="getContent"
      height="400px"
	  tools="heading, align-left, align-center, align-right, bold"
  ></vuecmf-editor>

属性

id

编辑器id

size

编辑器中工具条大小样式，默认default, 可选（large, small）

content

编辑器内容。

height

编辑器高度

token

传给后端的token

params

传给后端的参数

upload

上传文件地址

upload_action

上传事件回调函数

openai (v1.8新增)

ChatGPT后端地址（也可接入其他大模型接口）

amap_key (v1.8新增)

高德地图应用KEY

tools

编辑器工具条设置 heading 标题 align-left 左对齐 align-center 居中对齐 align-right 右对齐 bold 加粗 italic 斜体 underline 下横线 strikethrough 删除线 superscript 上角标 subscript 下角标 quote-left 块引用 link 添加超链接 unlink 取消超链接 font 字体 font-size 字大小 font-color 字体颜色 font-bg-color 文本背景色 indent 增加缩进 outdent 减少缩进 list-ol 有序列表 list-ul 无序列表 select-all 全选 remove-format 清除格式 cut 剪切 copy 复制 hr 插入水平线 table 插入表格 image 插入图片 film 插入视频 file 插入文件 code 插入代码 redo 恢复 undo 撤销