码迷,mamicode.com
首页 > 其他好文 > 详细

新手如何在Vue项目中优雅的使用UEditor(百度富文本编辑器)

时间:2019-12-28 11:30:27      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:one   tor   template   img   配置   load   ddl   href   成功   

1、去官网,下载ueditor,解压,重命名,放在vue项目中的static文件夹下。

  ps:新手会觉得在官网上有几种不同版本的文件,俺到底要下载哪一个,如果你仅仅是一个前端,那么好,只要是最新版本的UEditor,随便下,如果你比较负责,问问你后端同事用什么语言写后端的,那就用什么版本的,其实不同语言的功能都一样,只是为了方便给后面图片上传的配置提供方便。

官网链接:http://ueditor.baidu.com/website/download.html

技术图片

 

 

 

UEditor目录如下所示:

技术图片

 

 

2、在main.js中引入:

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‘

 

3、创建自己的UE组件界面:

把如下代码放到新建的UE.vue文件中即可。

<template>
  <div>
    <script id="editor" 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(‘editor‘, 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>

4、引入组件,注册组件,使用子组件。

  引入:

  import UE from "../components/UE"

  注册为局部组件:

  components: {UE},

  使用子组件:

  <UE :defaultMsg=‘content‘ :config=‘config‘ ref="ue"></UE>

    说明:content是组件刚加载完成时的默认内容,config里面是一些相关的配置项。ref的作用是为了父组件能够调用子组件的方法。示例如下:

        content:‘请编辑相关内容‘,
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
        },        

5、此时此刻,启动。如果你看到如下内容,ok-》你成功了,赶快喝杯咖啡庆祝一下。

技术图片

 

 6、这时候,你作为前端需要配置一下UE/ueditor.config.js中的window.UEDITOR_HOME_URL,将其改写为:

window.UEDITOR_HOME_URL = "/static/UE/";

示例如下:

技术图片

 

7、这时候的控制台会有如下提示:

技术图片

 

 好了,你如果只搞前端,去把你们后端牵过来,你可以品杯可乐并安慰一下他:“慢慢来不急”。

新手如何在Vue项目中优雅的使用UEditor(百度富文本编辑器)

标签:one   tor   template   img   配置   load   ddl   href   成功   

原文地址:https://www.cnblogs.com/art-poet/p/12111022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!