vue+富文本编辑器UEditor

昨天的需求是把textarea换成富文本编辑器的形式,

网上找了几种富文本编辑器ueditor、tinymce等,

觉得ueditor实现双向绑定还挺有意思,

分享一下~

按照下面步骤即可

前言

vue2  https://github.com/yangTwo100/vue2UEditor

vue-cli3

安装插件

npm i vue-ueditor-wrap
// 或者
yarn add vue-ueditor-wrap

下载最新编译的UEditor

你可以登陆官网下载也可以使用一个修复好的版本

点击连接修复好的内容如图所示:

根据你的需要下载这八个中的一个即可。

将下载好的压缩包解压并命名为UEditor

放入你的static目录下

引入VueUeditorWrap组件

import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS

注册组件

components: {
VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

v-model绑定数据

<vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
data () {
return {
msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
}
}

至此你已经可以在页面中看到一个初始化之后的 UEditor 了,并且它已经成功和数据绑定了!

vue+富文本编辑器UEditor的更多相关文章

  1. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  2. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  3. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  4. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  5. 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  6. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  7. 富文本编辑器Ueditor 及 hibernate 逆向工程

    1.1           富文本编辑器Ueditor ueditor下载地址: http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本.完整demo可参考下载文件 ...

  8. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  9. 富文本编辑器-Ueditor传值

    前两天研究了一下富文本编辑器Ueditor的使用和配置,并且我们已经可以正常的在页面上编辑内容到富文本编辑器中,那么我们如何将输入的内容传到数据库中呢 ? Listen carefully. 首先介绍 ...

随机推荐

  1. Goland开发工具安装教程

    开发工具: 文本类的编辑器:记事本,notepad,sublime text,atom... 通过命令执行程序 IED:集成开发环境(integrated development environmen ...

  2. JS实现div的抖动:缓动式抖动

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  3. php伪造ip头

    <? $fp = fsockopen ("passport.baidu.com", 80, $errno, $errstr, 30); if (!$fp) { echo &q ...

  4. 项目添加大量js文件时关闭Eclipse校验机制

    1,如:当添加Ext JS的examples文件夹时

  5. ajax的三次封装简单概况

    原生ajax:                readyState         准备状态                status             页面状态               ...

  6. numpy, matplotlib库学习笔记

    Numpy库学习笔记: 1.array()   创建数组或者转化数组 例如,把列表转化为数组 >>>Np.array([1,2,3,4,5]) Array([1,2,3,4,5]) ...

  7. centos7 harbor 单机搭建

    环境说明:centos 7.4 下面使用的域名是自己编造 可自行设置使用 域名在centos7.4 系统做解析 在windows vhost文件也做解析 分享压缩包  因github下载过慢  所以我 ...

  8. Java笔试

    异常 Throwable是Java错误处理的父类,有两个子类:Error和Exception. Error:无法预期的严重错误,导致JVM虚拟机无法继续执行,几乎无法恢复捕捉的 Exception:可 ...

  9. ASP.NET - Validators

    ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...

  10. 从客户端取到浏览器返回的oauth凭证

    这个随便记录一下,也是朋友问我的一个问题. 在网上找了下,没找到相关的,用英文也搜索了一下,可能我的关键词没找对,找了一会没找到. 想到以前用过的rclone也是用的这样的方式,去看了下相关部分源码. ...