新手如何在vue项目中优雅的使用ueditor（百度富文本编辑器）(代码片段)

关键词：

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、这时候的控制台会有如下提示：

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

如何在vuejs中优雅使用javascript各种插件

...更快满足业务需求，不得不使使用js第三方库或者插件。如何在Vue项目中引入javascript第三方库 全局变量将JavaScript第三方库添加到项目中，最简单的办法是通过将其附加到 window 对象上，以使其成为全局变量。如何引... 查看详情

vue3中如何优雅地在setup使用globalproperties(代码片段)

一、前言vue3已经发布到v3.2.x版了，在项目中也使用上了vue3，总体感觉还是不错的。vue3中使用Proxy来实现响应式数据，解决了vue2中的部分性能损耗、无法监听动态添加的属性的值变化、无法监听数组元素对象的属性的值的变化问... 查看详情

如何在nodejs项目中优雅的使用es6

如何在NodeJS项目中优雅的使用ES6NodeJs最近的版本都开始支持ES6（ES2015）的新特性了，设置已经支持了async／await这样的更高级的特性。只是在使用的时候需要在node后面加上参数：--harmony。但是，即使如此node也还是没有支持全部的... 查看详情

vue2.0项目中使用ueditor富文本编辑器示例

最近在vue项目中需要使用富文本编辑器，于是将Ueditor集成进来，作为公共组件。在线预览：https://suweiteng.github.io/vue2-management-platform/#/editor项目地址：https://github.com/suweiteng/vue2-management-platform 记得在右上角点个赞哦~1.放入静... 查看详情

vue使用ueditor富文本的配置(代码片段)

UEditor是百度的一个javascript富文本编辑器，功能强大，以下是vue项目中的引入过程1.下载vue-ueditor-wrap:  说明：下载这个插件对vue使用方便，有双向数据绑定的优势，操作相对方便点第一步，先下载依赖npmivue-ueditor-wrap-S第... 查看详情

vue2.0项目中使用ueditor富文本编辑器应用中出现的问题(代码片段)

...e,//自动保存功能重点：enableAutoSave不一定生效，怎么办？ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。 //启用自动保存 ,enabl 查看详情

vue中使用ueditor编辑器

 　　一、  下载包：　　　　从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：　　　　　　http://ueditor.baidu.com/website/　　　　　下载解压后会得到如果下文件目录： 　　　　　　 　　　　将上述... 查看详情

vue项目中使用百度编辑器(代码片段)

vue中使用百度编辑器1、yarnaddvue-ueditor-wrap//下载此包可实现双向绑定功能2、将去官网下载百度编辑器包(jsp版本),将名字改为UEditor放在项目的static文件夹下3、在components文件夹下新建文件Ueditor.vue并写入以下代码（提醒：注意下方... 查看详情

vue中使用ueditor编辑器

　　一、  下载包：　　　　从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为：　　　　　　http://ueditor.baidu.com/website/　　　　　下载解压后会得到如果下文件目录： 　　　　　　 　　　　将上述Uedito... 查看详情

在基于angularjs架构的abp项目中使用ueditor

【前提须知】读过此篇博客了解angular-ueditor了解ABP如何使用会使用VS2017【1.下载ABP模板】https://aspnetboilerplate.com/Templates选择ASP.NETMVC5.x页签下基于AngularJs前端框架和基于EntityFramework对像映射关系的模板，如下图所示： 【2.下载U... 查看详情

vue3.0中如何使用ueditor

1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html]，解压后放到public文件下的static文件中重命名为Editor（自己建立一个static文件，直接放到public文件下会出错）。2.修改相应的配置。ueditor.config.js中window.UEDITOR_HOME_UR... 查看详情

如何在vue中优雅地使用v-if判断(代码片段)

情况一：做vue项目，有的时候会遇到有几个元素都使用同一个v-if条件。下面这种方法虽然可以实现，但是整体代码看起来有点笨拙，我们可以用<template>标签进行优化一下。<template><divclass="card"... 查看详情

vue3.0+ueditor(代码片段)

...正这个系统也是自己人用，颜值无所谓了 关于vue2.0+ueditor有需要的可以看原文：https://juejin.im/post/5c6e78f95188252f30483be3注：我是参考的这个配的vue3.0+ueditor第一步：下载Ueditor相关静态文件 在下载的同时，不要让小手闲着，... 查看详情

如何优雅地使用vscode来编辑vue文件？

...lStdioCode).当然vscode对vue也不是原生支持的，今天来扒一扒如何配置vscode以便优雅地编辑vue文件先来扒一扒使用PHPStorm遇到的问题：vue文件虽然可以通过插件来解决高亮问 查看详情

在vue2.0中集成ueditor富文本编辑器(代码片段)

...片上传和视频上传的支持并不是很好，最终还是决定使用UEditor。这类的文章网上有很多，我进行了摸索、手写代码、汇总、排版，形成了这篇文章。下载对应的UEditor源码首先，去官网上下载UEditor的源码，根据你后台语言的不同... 查看详情

vue使用富文本ueditor

参考技术A将utf8-php文件复制到vue项目里的public文件(这里我将utf8-php改名称为ueditor)下面就可以在vue项目引用了（自己定义一个公共组件） 查看详情

超详细！新手如何创建一个vue项目(代码片段)

本篇仅以HBuilderX为例，其余开发软件同样适用这里两种方法，使用script标签直接引入本地的vue.js或使用CDN引入。目录一、在官网下载Vue.js二、使用<script>标签直接引入本地的vue.js三、使用CDN引入Vue.js四、验证是否安装成功五... 查看详情

在vue中优雅的使用localstrong

h5的LocalStrong帮我们缓存一些数据到本地，最常用的使用场景，比如京东购物在未登陆的状态下，把商品加入购物车，收藏某个商品。当我们把url复制到另外一个浏览器，购物车就是空的。以下是一个简单的商品收藏小demo,让我们... 查看详情