# vue-vuecmf-editor

**Repository Path**: emei/vue-vuecmf-editor

## Basic Information

- **Project Name**: vue-vuecmf-editor
- **Description**: 基于vue3+typescript+element plus的HTML5富文本编辑器
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://www.vuecmf.com
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-12-31
- **Last Updated**: 2025-01-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, 富文本编辑器, 在线编辑器

## README

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

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

## 注意
### 打包方式变更
v2版本开始使用vite方式打包，原v1版本使用的是webpack方式打包

## 安装

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

<br>openai  AI生成内容 (v1.8新增)</br>
<br>amap-map  高德地图 (v1.8新增)</br>

### 事件
#### on-change
添加或修改编辑器中的内容时，触发此事件，参数为当前编辑的全部内容。
返回的参数第一个为编辑器内容，第二个为编辑器ID