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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
js tab效果的实现代码
Dec 26 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 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
php 获取客户端的真实ip
2009/11/30 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
初始Nodejs
2014/11/08 NodeJs
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
js自定义回调函数
2015/12/13 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
如何使用PHP session
2015/04/21 面试题
统计员岗位职责
2015/02/11 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers