vue 使用百度编辑器ueditor
1、先从百度管网下载资源 http://ueditor.baidu.com/website/download.html ,然后解压到静态资源 static(和src同级) 文件中,然后在 单独起一个组件 UE.vueimport '../../../static/utf8-jsp/ueditor.config.js'//根据自己文件的路径接入imp
·
1、先从百度管网下载资源 http://ueditor.baidu.com/website/download.html ,然后解压到静态资源 static(和src同级) 文件中,然后在 单独起一个组件 UE.vue
<template>
<div>
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
import '../../../static/utf8-jsp/ueditor.config.js' //根据自己文件的路径接入
import '../../../static/utf8-jsp/ueditor.all.min.js'
import '../../../static/utf8-jsp/lang/zh-cn/zh-cn.js'
import '../../../static/utf8-jsp/ueditor.parse.min.js'
export default {
name: 'UE',
data () {
return {
editor: null
}
},
mounted() {
const _this = this;
this.editor = UE.getEditor('editor', {
BaseUrl: '',
UEDITOR_HOME_URL: this.url_head + '/static/utf8-jsp/', //这个是静态资源的路径
// toolbars:[] //编辑器里需要用的功能
}); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(''); // 确保UE加载完成后,放入内容。
});
console.log(this.text);
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
},
testMsg(){
const _this = this;
this.defaultMsg = this.text;
console.log(this.defaultMsg);
this.editor.setContent(this.defaultMsg); // 确保UE加载完成后,放入内容。
}
},
watch : {
'text' : 'testMsg'
},
props : ['text'], //接收传过来的文章
destroyed() {
this.editor.destroy();
}
}
</script>
<style type="text/css">
#editor{height: 500px;}
</style>
2、在需要用的地方接入 UE.vue 组件 ,根据内容给编辑器传递参数
<template><UE :text="addData.text" ref="ueBox"></UE></template>
import UE from '../page/UE.vue';
export default{
data(){
return{
uedata: [],
addData : {
text : '123',
},
imgDataUrl : '',
formLabelWidth : '140px'
}
},
methods : {
parentClick(){
this.addData.text = '21312312'
}
},
mounted : function() {
},
components : {
UE,
}
}
打开 ueditor.config.js 文件,在里面找到
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
// , serverUrl: URL + "jsp/controller.jsp" //改掉它
…………
}
更多推荐
已为社区贡献17条内容
所有评论(0)