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. 首先介绍 ...
随机推荐
- 20180519001 - DataTable Group by功能参考
DataSet6 = DataSet1.Copy(); DataRow[] dr = DataSet6.Tables[0].Select(" 完工状态 = '完工异常' "); D ...
- deepin 安装scrapy安装出错:fatal error: Python.h 的解决办法
环境deepin Linux 15.7 Python3.6.5 今天重新装了deepin系统,需要重新安装scrapy,直接pip了一下,没成. 报错:fatal error: Python.h: 没 ...
- 【视频合集】极客时间 react实战进阶45讲 【更新中】
https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...
- 编译原理 #02# 简易递归下降分析程序(js实现)
// 实验存档 截图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- hadoop过程中遇到的错误与解决方法
本文整理了在hadoop学习过程中遇到的各种问题. windows下开发环境搭建 大部分情况下,我们都是在windows下开发,hadoop则一般部署于linux服务器(无论是CDH还是原生hadoo ...
- anaconda中安装mmdetection
1.新建conda环境(有则跳过) conda create -n py36 python=3.6 && source activate py36 2.安装pytorch ...
- String,StringBuilder,tringBuffer
这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面. 运行速度,或者说是执行速度,在这方面运行速度快慢为:StringBuilder > StringBuffer > Str ...
- net应用程序池自动关闭的解决方法
while (true) { using (ServerManager sm = ServerManager.OpenRemote("localhost")) { string p ...
- vfile.hpp
//vov #ifndef VFILE_HPP #define VFILE_HPP #include <cstdio> #include <unistd.h> #include ...
- Linux安装.net core
1.添加yum源 rpm -Uvh https://packages.microsoft.com/config/rhel/7/packages-microsoft-prod.rpm 2.升级所有包同时 ...