vue中使用ueditor富文本编辑器


Posted in Javascript onFebruary 08, 2018

最近在做后台管理系统的时候遇到要使用富文本编辑器。最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建,

 1、下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下:

vue中使用ueditor富文本编辑器vue中使用ueditor富文本编辑器

2、将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图:

vue中使用ueditor富文本编辑器vue中使用ueditor富文本编辑器

3、编写子组件

<template>
 <div :id="id" type="text/plain"></div>
</template>
<script>
 import '../../../static/ueditor/ueditor.config.js'
 import '../../../static/ueditor/ueditor.all.min.js'
 import '../../../static/ueditor/lang/zh-cn/zh-cn.js'
 import '../../../static/ueditor/ueditor.parse.min.js'
 export default {
 name: 'UE',
 data() {
 return {
 editor: null
 }
 },
 props: {
 defaultMsg: {
 type: String,
 default: '请输入内容'
 },
 config: {
 type: Object
 },
 id: {
 type: String,
 default: `ue${Math.random(0, 100)}`
 }
 },
 mounted() {
 this.$nextTick(() => {
 this.editor = UE.getEditor(this.id, this.config); // 初始化UE
 this.editor.addListener("ready", () => {
  this.editor.execCommand('insertHtml', this.defaultMsg);
  this.editor.focus() // 确保UE加载完成后,放入内容。
 })
 })
 },
 methods: {
 getUEContent() { // 获取内容方法
 return this.editor.getContent()
 },
 clearContent() { // 清空编辑器内容
 return this.editor.execCommand('cleardoc');
 },
 },
 beforeDestroy() {
 // 组件销毁的时候,要销毁 UEditor 实例
 if (this.editor !== null && this.editor.destroy) {
 this.editor.destroy();
 }
 }
 }
</script>
<style scoped></style>

4、在父组件中使用

<UE :config="configEditor" :id="ue1" ref="ue" :defaultMsg="val"></UE>

5、弄好之后,上传图片会提示后端配置项http错误,文件上传会提示上传错误。这里提别申明一点,ueditor在前端配置好后,需要与后端部分配合进行,然后将配置ueditor.config.js 里的serverUrl的前缀改陈你自己的后端访问的请求路径地址

serverUrl: "统一请求地址"

总结

以上所述是小编给大家介绍的vue中使用ueditor富文本编辑器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
浅析node.js中close事件
Nov 26 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 #Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 #Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 #Javascript
web前端页面生成exe可执行文件的方法
Feb 08 #Javascript
ajax前台后台跨域请求处理方式
Feb 08 #Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
You might like
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
js实现从数组里随机获取元素
2015/01/12 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
Python 列表的清空方式
2020/01/13 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
中学教师自我鉴定
2014/02/07 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
九九重阳节致辞
2015/07/31 职场文书
采购部年度工作总结
2015/08/13 职场文书
Win11查看设备管理器
2022/04/19 数码科技
vue动态绑定style样式
2022/04/20 Vue.js