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
编辑器中工具条大小样式，默认default, 可选（large, small）
编辑器内容。
编辑器高度
传给后端的token
传给后端的参数
上传文件地址
上传事件回调函数
ChatGPT后端地址（也可接入其他大模型接口）
高德地图应用KEY
编辑器工具条设置
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 撤销
openai AI生成内容 (v1.8新增)
amap-map 高德地图 (v1.8新增)
添加或修改编辑器中的内容时，触发此事件，参数为当前编辑的全部内容。 返回的参数第一个为编辑器内容，第二个为编辑器ID