富文本:http://www.wangeditor.com/index.html
一、npm安装
npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap
二、下载文件,vue-ueditor-wrap 作者修定版
(https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads)
三、下载完成的压缩包,修改文件名为 ueditor ,并放置项目目录下的public的目录中
四、修改 ueditor 文件中的 ueditor.config.js 配置为:
window.UEDITOR_HOME_URL = '/ueditor/'
五、使用
<template>
<div>
<vue-ueditor-wrap class="addtit" v-model="ruleForm.content" :config="ueConfig"></vue-ueditor-wrap>
<p>{{ruleForm.content}}</p>
</div>
</template>
<script>
// 引入
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
// 标识,当前组件的名称
name: "text_f",
components: {
VueUeditorWrap
},
data() {
return {
ruleForm: {
content: ""
},
ueConfig: {
// UEditor 资源文件的存放路径,就是放置UEditor的文件路径
UEDITOR_HOME_URL: "/ueditor/",
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 300,
// 初始容器宽度
initialFrameWidth: "100%",
// 上传文件接口
enableAutoSave: false,
// 上传文件接口
// serverUrl: this.$axios.defaults.baseURL + '/mh/ueditor/config',
serverUrl: 'http://112.6.99.125:7013/safetyPatrol/mh/ueditor/config',
elementPathEnable: false,
wordCount: false
}
};
},
mounted() {},
methods: {}
};
</script>
六、.全局注册使用
// 在 main.js 中引入
import VueUeditorWrap from 'vue-ueditor-wrap'
// 全局注册组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)
// 在组建中直接使用
<vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>
简易富文本:http://www.wangeditor.com/index.html
1、npm安装
npm install wangeditor
2、引入
import Editor from "wangeditor";
3、使用
<template>
<div>
<div ref="editorDom"></div>
</div>
</template>
<script>
// 引入
import Editor from "wangeditor"
export default {
// 标识,当前组件的名称
name: "text_f",
data() {
return {
editor:null
};
},
mounted(){
this.createEditor()
},
methods: {
// 创建富文本对象
createEditor(){
this.editor = new Editor(this.$refs.editorDom);
this.editor.customConfig.onchange = html => {};
// 创建富文本实例
this.editor.create();
}
}
};
</script>