首页 / VUE / 在vue中使用Ueditor

在vue中使用Ueditor

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了在vue中使用Ueditor，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1697字，纯文字阅读大概需要3分钟。

内容图文

今天研究的主角是：UEditor

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。

版本有很多

技术分享图片

我用的是：[1.4.3.3 PHP 版本] UTF-8版 

下载地址：http://ueditor.baidu.com/website/download.html

安装下载之后，将插件解压放在static目录下： static/ue/

技术分享图片

修改ueditor.config.js,配置目录 ：

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

技术分享图片

ps：这个插件的代码写的真的是”与众不同“，如果你用eslint检查代码，并且是个强迫症患者，那就很欢乐了。

 

下面是相关代码：

新建组件 /src/base/ueditor/ueditor.vue

            <
            template
            >
            <
            div
            >
            <
            script 
            id
            ="editor"
             type
            ="text/plain"
            ></
            script
            >
            </
            div
            >
            </
            template
            >
            <
            script
            >
            
export 
            default
             {
  name: 
            "
            ue
            "
            ,
  data() {
    
            return
             {
      editor: 
            null
            
    };
  },
  props: {
    value: 
            ""
            ,
    config: {}
  },
  mounted() {
    const _this 
            =
            this
            ;
    
            this
            .editor 
            =
             window.UE.getEditor(
            "
            editor
            "
            , 
            this
            .config);
    
            //
             初始化UE
            this
            .editor.addListener(
            "
            ready
            "
            , 
            function
            () {
      _this.editor.setContent(_this.value);
      
            //
             确保UE加载完成后，放入内容。
                });
  },
  methods: {
    getUEContent() {
      
            //
             获取内容方法
            return
            this
            .editor.getContent();
    }
  },
  destroyed() {
    
            this
            .editor.destroy();
  }
};

            </
            script
            >

在组件中引用

            <
            template
            >
            <
            div
            >
            <
            Ueditor 
            :value
            ="ueditor.value"
             :config
            ="ueditor.config"
             ref
            ="ue"
            ></
            Ueditor
            >
            <
            input 
            type
            ="button"
             value
            ="显示编辑器内容（从控制台查看）"
             @click
            ="returnContent"
            >
            </
            div
            >
            </
            template
            >
            <
            script
            >
            
import Ueditor from 
            "
            ../../base/ueditor/ueditor
            "
            ;
export 
            default
             {
  data() {
    
            return
             {
      dat: {
        content: 
            ""
            ,
      },
      ueditor: {
        value: 
            "
            编辑默认文字
            "
            ,
        config: {}
      }
    };
  },
  methods: {
    returnContent() {
      
            this
            .dat.content 
            =
            this
            .$refs.ue.getUEContent();
      console.log(
            this
            .dat.content);
    },
    showContent() {
      
            this
            .show 
            =
            !
            this
            .show;
    }
  },
  components: {
    Ueditor
  }
};

            </
            script
            >

下面来看看要实现的效果：

技术分享图片

 

原文：https://www.cnblogs.com/shengnan-2017/p/9226803.html

内容总结

以上是互联网集市为您收集整理的在vue中使用Ueditor全部内容，希望文章能够帮你解决在vue中使用Ueditor所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1276265.html

来源：【匿名】