UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码，同时支持复制携带样式。目前官方已停止维护，可选用
目前UEditor官方文档网站已经被百度给关闭了，但是GitHub仓库还在。而且有其他的文档网站
项目开启
下载Ueditor
在 GitHub 上下载压缩包,并将压缩包解压放入 public 目录
原生项目集成使用
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>Vue3项目集成使用
安装组件
安装 vue-ueditor-wrap@3.x(该版本仅支持Vue3) yarn add vue-ueditor-wrap@3.x
yarn add vue-ueditor-wrap@3.x
注册组件
main.jsimport { createApp } from 'vue';
import VueUeditorWrap from 'vue-ueditor-wrap';
import App from './App.vue';
createApp(App).use(VueUeditorWrap).mount('#app');
编辑页面
home.vue<vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
<script>
import { ref } from 'vue';
export default {
const msg = ref('<h2>Hello World!</h2>');
const editorConfig = reactive({
UEDITOR_HOME_URL: '/UEditor/', //public的静态目录
serverUrl: '//ueditor.zhenghaochuan.com/cos', //后端上传的服务地址
})
};
</script>
展示页面
page.vue<template>
<iframe style="width: 100%; min-height:500px;height: 675px;"
ref="editorRef"
src="./iframe.html"
frameborder="0"
></iframe>
</template>
<script>
// 编辑器ref
const editorRef = ref()
// 设置数据，使用iframe展示，防止样式污染
details({id:route.query.id}).then((res:any) => {
state.text = res.data.text
const frame = editorRef.value.contentWindow;
frame.postMessage(state.text);
})
</script>