zoukankan      html  css  js  c++  java
  • 小tips:vue结合百度UEditor富文本编辑器实现vue-ueditor-wrap

    1.下载vue-ueditor-wrap

    cnpm i vue-ueditor-wrap -S

    下载最新的 UEditor 资源文件放入你项目的静态资源目录中(比如 static 或者 public,这取决于你项目的配置)。

    2.引入VueUeditorWrap组件

    import VueUeditorWrap from 'vue-ueditor-wrap'

    3.注册组件

    components: {
      VueUeditorWrap
    }
    // 或者在 main.js 里将它注册为全局组件
    Vue.component('vue-ueditor-wrap', VueUeditorWrap)

    4.v-model绑定数据

    <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

    5.示例

    <template>
      <div class="hello">
        <vue-ueditor-wrap ref="ueditor" v-model="msg" :destroy="false" :config="config" style=" 600px;margin: 0 auto;"></vue-ueditor-wrap>
        <button @click="showData" class="preview">保存内容</button>
      </div>
    </template>
    
    <script>
    import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
    export default {
      name: 'HelloWorld',
      components: {
        VueUeditorWrap
      },
      data () {
        return {
          msg: '请输入内容',
          config: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: true,
            // 初始容器高度
            initialFrameHeight: 240,
            elementPathEnabled: false,
            wordCount: false,
            enableAutoSave: false,
            // 初始容器宽度
            initialFrameWidth: '100%',
            serverUrl: ''
          }
        }
      },
      mounted () {
    
      },
      methods: {
        showData () {
          console.log(this.msg)
        }
      }
    }
    </script>

    详细的配置可参考UEditor富文本编辑器官网。

    参考地址

  • 相关阅读:
    Java知识15 Number&Math类【多测师】
    python callable()方法实例
    高级super实例
    高级any、for组合用法
    python 字典update、setdefault、pop方法案例
    一个经典的python字典生成式案例
    一个发挥到极致的yield案例
    python map使用
    Python yield详解
    django __path__使用
  • 原文地址:https://www.cnblogs.com/moqiutao/p/13998094.html
Copyright © 2011-2022 走看看