我们在做后台页面的时候,有时候要用到富文本编辑器,载着我用的是UEditor富文本编辑器
首先到官网下载插件 http://ueditor.baidu.com/website/

下载完,解压完包之后 把包名改为 UEditor
因为我用的是vue-cli3的脚手架,所以把改完名的压缩包放在 public文件夹下static文件夹中
然后安装依赖 npm install vue-ueditor-wrap
在需要的页面引入
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
components: {
VueUeditorWrap
},
在template 里边 调用
<vue-ueditor-wrap v-model="dataList" :config="myCongif"></vue-ueditor-wrap>
引用了之后我们在页面可以看到

控制台会报上传功能不能使用

如果需要配置,需要在static目录UEditor,php,config.json可配置文件上传路径

以及编辑器的一些配置

myCongif: {
serverUrl: "", // 上传文件接口
autoHeightEnabled: true, // 编辑器不自动被内容撑高
autoFloatEnabled: false,
initialFrameHeight: "100%", // 初始容器高度
initialFrameWidth: "100%", // 初始容器宽度
enableAutoSave: true, //是否关闭本地保存功能
// UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,
//vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
UEDITOR_HOME_URL: "/static/UEditor/"
},
dataList: ""