zoukankan      html  css  js  c++  java
  • 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.效果图

     

  • 相关阅读:
    Vijos训练计划 1304回文数
    18.03.03 位运算作业三则
    18.03.01 codevs1014 装箱问题
    Wikioi 1020 孪生蜘蛛 Label:Floyd最短路
    TYVJ P1004 滑雪 Label:记忆化搜索
    洛谷 P1118 数字三角形游戏 Label:dfs
    TYVJ P1015 公路乘车 &&洛谷 P1192 台阶问题 Label:dp
    洛谷 P1147 连续自然数和 Label:等差数列
    洛谷 P1019 单词接龙 Label:dfs
    洛谷 P1025 数的划分 Label:dp
  • 原文地址:https://www.cnblogs.com/wangyunhui/p/7463132.html
Copyright © 2011-2022 走看看