vue+富文本编辑器UEditor
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的更多相关文章
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- 富文本编辑器Ueditor 及 hibernate 逆向工程
1.1 富文本编辑器Ueditor ueditor下载地址: http://ueditor.baidu.com/ 下载1.4.3 –utf8-Jsp版本.完整demo可参考下载文件 ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
- 富文本编辑器-Ueditor传值
前两天研究了一下富文本编辑器Ueditor的使用和配置,并且我们已经可以正常的在页面上编辑内容到富文本编辑器中,那么我们如何将输入的内容传到数据库中呢 ? Listen carefully. 首先介绍 ...
随机推荐
- Goland开发工具安装教程
开发工具: 文本类的编辑器:记事本,notepad,sublime text,atom... 通过命令执行程序 IED:集成开发环境(integrated development environmen ...
- JS实现div的抖动:缓动式抖动
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- php伪造ip头
<? $fp = fsockopen ("passport.baidu.com", 80, $errno, $errstr, 30); if (!$fp) { echo &q ...
- 项目添加大量js文件时关闭Eclipse校验机制
1,如:当添加Ext JS的examples文件夹时
- ajax的三次封装简单概况
原生ajax: readyState 准备状态 status 页面状态 ...
- numpy, matplotlib库学习笔记
Numpy库学习笔记: 1.array() 创建数组或者转化数组 例如,把列表转化为数组 >>>Np.array([1,2,3,4,5]) Array([1,2,3,4,5]) ...
- centos7 harbor 单机搭建
环境说明:centos 7.4 下面使用的域名是自己编造 可自行设置使用 域名在centos7.4 系统做解析 在windows vhost文件也做解析 分享压缩包 因github下载过慢 所以我 ...
- Java笔试
异常 Throwable是Java错误处理的父类,有两个子类:Error和Exception. Error:无法预期的严重错误,导致JVM虚拟机无法继续执行,几乎无法恢复捕捉的 Exception:可 ...
- ASP.NET - Validators
ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or ...
- 从客户端取到浏览器返回的oauth凭证
这个随便记录一下,也是朋友问我的一个问题. 在网上找了下,没找到相关的,用英文也搜索了一下,可能我的关键词没找对,找了一会没找到. 想到以前用过的rclone也是用的这样的方式,去看了下相关部分源码. ...