1.首先下载UEditor源码(https://ueditor.baidu.com/website/),将整个文件放到static文件夹中

2.在src/components文件夹下创建公共组件UEditor.vue文件,作为编辑器组件

3.通过ueditor.config.js来改变编辑器所显示的选项

  3.1设置图片上传路径

  

  3.2上传图片,并显示在编辑器中(js原型)

  

4.单页面调用

<UEditor :config="config" ref="ueditor"></UEditor>

vue2.x结合百度UEditor富文本编辑器的更多相关文章

  1. 百度ueditor富文本编辑器的使用

    百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...

  2. ASP.NET MVC5 中百度ueditor富文本编辑器的使用

    随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...

  3. PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...

  4. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  5. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  6. 在Vue2.0中集成UEditor 富文本编辑器

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很 ...

  7. 百度UEditor(富文本编辑器)的基础用法

    百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的. 我用是的SSH来写的项目. 1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到W ...

  8. 百度UEditor富文本编辑器去除过滤div等标签

    将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签. 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代 ...

  9. 百度UEditor富文本编辑器去除自动追加p标签

    本篇文章还原了我在遇到这个问题时的解决过程: 找到ueditor.all.js文件,搜索 me.addInputRule(function(root){ 或者直接搜索 //进入编辑器的li要套p标签 ...

随机推荐

  1. Kudu版本升级(官网推荐的步骤)(Upgrade from a Previous Version of Kudu)

    不多说,直接上干货! http://kudu.apache.org/docs/installation.html#sles_from_source

  2. script脚本中写不写$(document).ready(function() {});的区别

    $(document).ready() 里的代码是在页面内容都加载完才执行的,如果把代码直接写到script标签里,当页面加载完这个script标签就会执行里边的代码了,此时如果你标签里执行的代码调用 ...

  3. 现有分布式技术(socket、.net remoting、asp.net webservice、WSE、ES)和wcf的比较及优势

    1:socket VS remoting 使用socket无疑是效率最高的.但是,在复杂的接口环境下,socket的开发效率也是最低的.故在兼顾开发效率的情况下,可以使用remoting来代替sock ...

  4. FormCollection的用法

    FormCollection的用法: 有时候前台抛来的字段太多,在后台一个一个例举出来显得麻烦,而且还容易出错,FormCollection解决了这个烦恼 #region 给商家留言 [HttpPos ...

  5. Spring Data JPA 事务

    Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套 JPA 应用框架,可使开发者用极简的代码即可实现对数据的访问和操作.它提供了包括增删改查等在内的常 ...

  6. url长度

    今天在测试Email Ticket的时候发现在进行Mark as Read/Unread操作时,请求是通过GET方式进行的.URL中列出了所有参与该操作的Ticket Id.于是,我想起GET请求是有 ...

  7. 【Android 界面效果48】Android-RecyclerView-Item点击事件设置

    在上一篇博客Android-RecylerView初识中提到,RecyclerView不再负责Item视图的布局及显示,所以RecyclerView也没有为Item开放OnItemClick等点击事件 ...

  8. 开发中常用的sql语句二

    sql 数字全角半角转换 create FUNCTION dbo.ConvertWordAngle ( ), --要转换的字符串 @flag bit --转换标志,0转换成半角,1转换成全角 )) A ...

  9. ASP.NET设置母版页

    母版页允许开发人员创建具有指定的可编辑区域的站点级模板.随后,此模板可应用到网站中的 ASP.NET 页面上.这些 ASP.NET 页面只需为母版页中指定的可编辑区域提供相应内容 – 在使用母版页的所 ...

  10. 01、Scala介绍与安装

    01.Scala介绍与安装 1.1 Scala介绍 Scala是对java语言脚本化,特点是就是使不具备脚本化的java语言能够采用脚本化方式来使用,使其具有脚本语言简单.所见即所得的特点,并且编程效 ...