小tips:vue结合百度UEditor富文本编辑器实现vue-ueditor-wrap

前端开发 作者: 2024-08-20 21:35:01
1.下载vue-ueditor-wrap cnpm i vue-ueditor-wrap -S 下载最新的 UEditor 资源文件放入你项目的静态资源目录中(比如 static 或者 public,
cnpm i vue-ueditor-wrap -S
import VueUeditorWrap from 'vue-ueditor-wrap'
components: {
  VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap',VueUeditorWrap)
<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
<template>
  div class="hello">
    vue-ueditor-wrap ref="ueditor" v-model="msg" :destroy="false" :config="config" style="width: 600px;margin: 0 auto;"></vue-ueditor-wrapbutton @click="showData" class="preview">保存内容</buttondiv>
>

script>
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
export default {
  name: HelloWorld,components: {
    VueUeditorWrap
  },data () {
    return {
      msg: 请输入内容 编辑器不自动被内容撑高
        autoHeightEnabled: true 初始容器高度
        initialFrameHeight: 240false 初始容器宽度
        initialFrameWidth: 100%''
      }
    }
  },mounted () {

  },methods: {
    showData () {
      console.log(this.msg)
    }
  }
}
>
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65732.html