Vue使用ueditor百度富文本编辑器
1.进入官网或者github下载源码
地址:https://github.com/fex-team/ueditor
推荐 git clone https://github.com/fex-team/ueditor.git
2.使用grunt编译
全局安装grunt
npm install -g grunt-cli
安装后在全局变量里配置 !!!
找到安装目录
3.编译 ueditor 项目
安装依赖
npm install
依赖安装好以后,使用命令
grunt default
进行编译,编译后会生成 dist 文件
将dist
目录中 utf8-php
目录复制到vue原项目的 public
目录中,修改 utf8-php
目录名为 UEditor
4.原项目安装 vue-ueditor-wrap
npm install vue-ueditor-wrap
5.组件中引入,自定义组件
引入组件:
<template>
<vue-ueditor-wrap v-model="dataStr" :config="myConfig" @ready="ready"></vue-ueditor-wrap>
</template>
参数配置:
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
components: { VueUeditorWrap },
data() {
return {// 编辑器
dataStr: '我是渲染字段',
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 600,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口
serverUrl: '',
// UEditor 是文件的存放路径,
UEDITOR_HOME_URL: '/static/ueditor/'
}
}
},
mounted() {
this.ready()
},
methods: {
ready(editorInstance) {
console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
},
}
}
</script>
