vue中使用ueditor富文本编辑框

1.把下载的Ueditor资源,放入静态资源static中。

修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图:

2.在main.js中引入以下文件:

import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

3.创建组件(ue.vue):

<template>
<div>
<script id="ueid" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},

},
mounted() {
const _this = this;
this.editor = UE.getEditor("ueid", this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
destroyed() {
this.editor.destroy();
}
}
</script>

在src目录下新建一个ue文件,把组件ue.vue放到ue文件夹中。

4.引入组件:

<template>

  <section>

    <UE :defaultMsg='uetest' :config=config ref="ue"></UE>

  </section>

</template>

<script>

  import UE from '@/ue/ue.vue';                   //引入组件

  export default {

    components: {UE},

    data() {

      return {

        uetest:'试一下!!!!',

        config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
        }

      }

  }

  }

</script>

5.效果图

 

 

 

转载于:https://www.cnblogs.com/wangyunhui/p/7463132.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值