说明:我用的富文本编辑器是国内的wangEditor
wangEditor的使用 官网文档很详细不过多叙述
-
安装
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
yarn add html-docx-js-typescript
# 或者 pm install html-docx-js-typescript --save-dev
-
引入资源
import '@wangeditor/editor/dist/css/style.css' // 引入 富文本编辑器css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'//富文本编辑器
import { asBlob } from 'html-docx-js-typescript';//将html转为word
-
wangeditor+vue3 实现Web 富文本编辑器
html部分
<el-button type="primary" plain @click="exportDoc">导出文档</el-button>
<div style="border: 1px solid #eee">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
/>
</div>
js部分
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { asBlob } from 'html-docx-js-typescript';
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = {
placeholder: '请输入内容...' ,
MENU_CONF: {}
}
// 默认形式
const mode = ref('default');
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy();
});
// 编辑器创建完毕时的回调函数
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例,重要!
}
// 上传图片
editorConfig.MENU_CONF["uploadImage"] = {
// server: 'http://127.0.0.1:XXX/XXX/XXX/fileUpload',
customInsert(res, insertFn) { // JS 语法
// res 即服务端的返回结果
// let url = import.meta.env.VITE_APP_BASE_API +'/system/attachFile/download?fileId='+ res.data.fileList[0].fileId,
let url = ...,//res.data.url
alt='...',href='...';
// 从 res 中找到 url alt href ,然后插入图片
insertFn(url, alt, href);
},
base64LimitSize: 50*1024 * 1024 // 50M
};
// 导出文档
const exportDoc = async()=>{
const editor = editorRef.value;
// 将富文本内容拼接为一个完整的html
let html= editor.getHtml(),
value = `<!DOCTYPE html><html lang="en"><body style="font-family:方正仿宋_GBK,serif;mso-ascii-font-family:'Times New Roman';">${html}</body></html>`;
console.log(value)
// 1、将html转为word的blob 2、 landscape就是横着的,portrait是竖着的,默认是竖屏portrait。
const data = await asBlob(value, { orientation: 'landscape', margins: { top: 100 } });
let aTag = document.createElement('a');
aTag.href = window.URL.createObjectURL(data);
aTag.setAttribute('download', 'file.docx');
aTag.click();
// 下载后将标签移除
aTag.remove();
}
</script>
-
转word的具体代码
// 导出文档
const exportDoc = async()=>{
const editor = editorRef.value;
// 将富文本内容拼接为一个完整的html
let html= editor.getHtml(),
value = `<!DOCTYPE html><html lang="en"><body style="font-family:方正仿宋_GBK,serif;mso-ascii-font-family:'Times New Roman';">${html}</body></html>`;
console.log(value)
// 1、将html转为word的blob 2、 landscape就是横着的,portrait是竖着的,默认是竖屏portrait。
const data = await asBlob(value, { orientation: 'landscape', margins: { top: 100 } });
let aTag = document.createElement('a');
aTag.href = window.URL.createObjectURL(data);
aTag.setAttribute('download', 'file.docx');
aTag.click();
// 下载后将标签移除
aTag.remove();
}
-
效果图
Web 富文本编辑器富文本
word文档