在Vue2.0中集成UEditor 富文本编辑器

在vue的’项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor。

这类的文章网上有很多,我进行了摸索、手写代码、汇总、排版,形成了这篇文章。

下载对应的UEditor源码

首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP、Asp、.Net、Jsp),下载地址。

下载之后,把资源放到 /static/ue/ 静态目录下。文档结构如下:

(我把UEditor放到了static静态目录下面,这里的文件不会被webpack打包,当然你也可以选择性地放进src中)

编辑 UEditor 编辑器 配置文件

我们打开 ueditor.config.js,修改其中的 window.UEDITOR_HOME_UR配置,如下:

window.UEDITOR_HOME_URL = "/static/UE/";     //指定编辑器资源文件根目录
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

ueditor.config.js文件有很多配置,可以在这里进行一些初始化的全局配置,比如编辑器的默认宽高等:

,initialFrameWidth:1000  //初始化编辑器宽度,默认1000
,initialFrameHeight:320  //初始化编辑器高度,默认320

其他的参数配置,在该文件中有详细列出,或者参考官方文档 http://fex.baidu.com/ueditor/

将编辑器集成到系统中

打开 /src/main.js 文件,插入下面的代码:

//ueditor
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

开发公共组件 UE.vue

我们在 /src/components/ 目录下创建 UE.vue 文件,作为我们的编辑器组件文件。
下面代码提供简单功能,具体使用根据需求完善该组件即可。

<template>
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
    export default {
        name: 'ue',
        data () {
            return {
                editor: null
            }
        },
        props: {
            value: '',
            config: {}
        },
        mounted () {
            this.editor = window.UE.getEditor('editor', this.config);
            this.editor.addListener('ready',  () => {
                this.editor.setContent(this.value)
            })
        },
        methods: {
            getUEContent () {
                return this.editor.getContent()
            }
        },
        destroyed () {
            this.editor.destroy()
        }
    }
</script>

组件暴露了两个接口:
value是编辑器的文字
config是编辑器的配置参数

在其他页面中使用该组件

简单地创建一个需要UEditor的页面,再该页面中使用刚才封装好的UE.vue组件:

<template>
    <div>
        <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
        <button @click="returnContent">显示编辑器内容</el-button>
        <div>{{dat.content}}</div>
    </div>
</template>
<script>
    import Uediter from '@/components/UE.vue';

    export default {
        data () {
            return {
                dat: {
                    content: ''
                },
                ueditor: {
                    value: '编辑器默认文字',
                    config: {
                        initialFrameWidth: 800,
                        initialFrameHeight: 320
                    }
                }
            }
        },
        methods: {
            returnContent () {
                this.dat.content = this.$refs.ue.getUEContent()
            }
        },
        components: {
            Uediter
        },
    }
</script>

效果如下:

What's more: 服务端需要做的配置

配置完上述内容后,控制台可能会出现"后台配置项返回格式出错,上传功能将不能正常使用!"的报错,
我们在编辑器中上传图片或者视频,也会出现响应的报错,这是因为没有配置服务器的请求接口,在ueditor.config.js中,对serverUrl进行配置:

// 服务器统一请求接口路径
, serverUrl: 'http://172.16.254.49:83/File/UEditor'   //地址管你们后端要去
本文转载于网络 如有侵权请联系删除

相关文章

  • python小程序:无限求和平均

    编写一个程序,重复读取数据,直到用户输入‘done’。一旦输入‘done’,打印总和、个数与平均值。如果用户输入的不是数字,使用try和except捕获异常,打印错误信息,然后跳过继续执行循环。复制1arr=[] 2num=0 3sum=0 4while1: 5val=input('请输入一个数:') 6try: 7ifval=='done': 8foriinarr: 9sum=sum+float(i) 10print('总和为:'+str(sum)) 11print('输入个数为:'+str(num)) 12print('平均数为:'+str(sum/num)) 13exit() 14else: 15#判断是否是数字 16float(val) 17#如果是数字就不会抛出异常,则就会压入数组里面 18arr.append(float(val)) 19num=num+1 20exceptExceptionaserr: 21print('这不是一个数字') 22print

  • 用python爬取 20w 表情包之后,感叹我族人是多么强大!

    是这样的有一次想要斗图配图就在网上搜索表情包然后发现了一个表情巨多的网站不小心动起了邪念产生了兴趣那就把它们存下来吧用requests请求了一下发现这个网站没有做反爬发现这里有4k+的页面简单的切换一下页面可以发现第一页的链接是这样的https://fabiaoqing.com/biaoqing/lists/page/1.html所以以此类推构建一下所有url_url='https://fabiaoqing.com/biaoqing/lists/page/{page}.html'复制这样我们就可以得到所有表情包的链接了我们来看一下页面里面的信息在这里我们只需要图片的地址和图片的名称即可所以我们只要获取到每个页面的所有img标签就可以了可以使用BeautifulSoup根据类名获取response=requests.get(url)复制拿到了页面里面的所有img那么就可以获取每个图片的地址和名称从而下载到我们想要的位置forimginimg_list:复制至此几行代码就搞定了先来测试一下下载一个页面的图片可以发现每张图片都获取到了效果还行不过要下载那么多张表情包的话这

  • Ubuntu 修改 mysql 密码

    今天重置mysql密码时,遇到两个坑,所以记录下来以后复习。用mysql--version查看当前sql版本mysqlVer14.14Distrib5.7.22,forLinux(x86_64)usingEditLinewrapper复制关闭mysqlservicemysqlstop复制跳过安全检查/usr/bin/mysqld_safe--skip-grant-tables&复制更改密码这时候新开一个终端依次执行下列命令mysql-uroot usemysql; updatemysql.usersetauthentication_string=password('newpassword')whereuser='root';复制刷新权限flushprivileges;复制退出mysqlquit复制重启mysqlservicemysqlstart复制问题在跳过安全检查是遇到mysqld_safeDirectory'/var/run/mysqld'forUNIXsocketfiledon'texists. 解决办

  • 2017年最流行的15个数据科学Python库

    导读Python近几年在数据科学行业获得了人们的极大青睐,各种资源也层出不穷。数据科学解决方案公司ActiveWizards近日根据他们自己的应用开发经验,总结了数据科学家和工程师将在2017年最常使用的Python库。核心库1)NumPy地址:http://www.numpy.org当使用Python开始处理科学任务时,不可避免地需要求助Python的SciPyStack,它是专门为Python中的科学计算而设计的软件的集合(不要与SciPy混淆,它只是这个stack的一部分,以及围绕这个stack的社区)。这个stack相当庞大,其中有十几个库,所以我们想聚焦在核心包上(特别是最重要的)。NumPy(代表NumericalPython)是构建科学计算stack的最基础的包。它为Python中的n维数组和矩阵的操作提供了大量有用的功能。该库还提供了NumPy数组类型的数学运算向量化,可以提升性能,从而加快执行速度。2)SciPy地址:https://www.scipy.orgSciPy是一个工程和科学软件库。除此以外,你还要了解SciPyStack和SciPy库之间的区别。SciPy

  • 树上的边题解

    题面给一棵n个点的树,定义f(l,r)为:\foralli\in[l,r],j\in[l,r],都存在i\toj的路径时,需要选择的最少树边数量。现在你要求出:\sum\limits_{l=1}^n\sum\limits_{r=l}^nf(l,r)题解枚举l或者r是没有前途的,时间复杂度的下界是O(n^2),并且无法在左端点移动时更新整体的答案,没有进一步优化的空间。因此换一个思路,考虑统计每条边的贡献。一条u\tov的边,将原树分成两棵子树。该边会对答案产生贡献,当且仅当:\existsi\in[l,r],j\in[l,r],满足i\in\operatorname{subtree}(u),j\in\operatorname{subtree}(v).对于一个编号序列1,2,3,\ldots,n,每个编号只有两种状态:i\in\operatorname{subtree}(u)或i\in\operatorname{subtree}(v).选择的一个连续编号区间[l,r],钦定的边会产生贡献,当且仅当该区间内同时包含i\in\operatorname{subtree}(u)与j\in\ope

  • VUE3.X版本error: Parsing error: Parsing error: Unexpected token 的解决办法

    例如如下错误:其实与代码无关 errorin./src/App.vue ModuleError(from./node_modules/eslint-loader/index.js): D:\workspace\test\element-plus-test\src\App.vue 1:1errorParsingerror:Unexpectedtoken< ✖1problem(1error,0warnings)复制 解决办法: 1.安装eslint-plugin-vue插件 npminstalleslint-plugin-vue-D复制 2.在.eslint.js配置文件中添加如下配置: module.exports={ root:true, parserOptions:{ "ecmaVersion":7, sourceType:'module' }, "parser":"vue-eslint-parser",//添加这一句 rules:{ "@typescript-eslint/explicit-module-boundary-types":"off" } }复制

  • 为什么你申请微信支付收到的邮件中没有PaySignKey?

    关键词:微信支付 PaySignKey 原文:http://www.cnblogs.com/txw1958/p/weixin-paysignkey.html    微信支付现在分为v2版和v3版 2014年9月10号之前申请的为v2版,之后申请的为v3版。   V2版中的参数有AppIDAppSecret支付专用签名串PaySignKey商户号PartnerID初始密钥PartnerKey 并且包含一个证书文件:安全证书 V3版中的参数有AppIDAppSecret商户号PartnerID初始密钥PartnerKey商户号MCHID申请编号商户平台登录帐号商户平台登录密码 包含5个证书文件(证书pkcs12格式、证书pem格式、证书密钥pem格式、CA证书,安全证书)     如果收到的邮件中没有【支付专用签名串PaySignKey】,表示已经是V3版的微信支付,没有paySignKey这个参数了。

  • fastai fit_one_cycle AttributeError: &#39;function&#39; object has no attribute &#39;parameters&#39;

       初学fastai  fit_one_cycle语句报错指向614行,即: return[pforpinm.parameters()ifp.requires_grad]复制 在以前遇到这种问题的时候,原因是函数名和系统中某个名称相同,但是这次并没有任何名为‘parametres’的,后来回归这句话的本质,某个对象没有parameters的属性,于是想起来用pytorch的时候 optimizer=torch.optim.Adam(cnn.parameters(),lr=LR),想到应该是前面定义模型时候出的问题,后来修改后就没这个问题了。 对于我的代码,是讲下图上面的语句换成了下面的语句(本来就打算用unet的) 由于刚刚接触fastai,为什么之前定义的模型会出现上述错误还不清楚,在看文档的时候文档中的内容便是上面语句的写法,不知为什么会遇到此种错误。如过你知道还请指教。  

  • OpenStack创建实例状态error

    1、检查网络 openstacknetworklist复制 出现问题1  Missingvalueauth-urlrequiredforauthpluginpassword  尝试解决 问题 缺少身份验证插件密码所需的身份验证网址 内容:source命令 export命令环境变量 1、Youcansourcethe openrc inyourDevStackdirectory(assumingitliesunder /opt/stack): source/opt/stack/devstack/openrcadmin 复制 2、Alternatively,youmaycreate yourown openrc withthiscontent(adaptaccordingtoyoursettings): exportOS_PROJECT_DOMAIN_NAME=Default exportOS_USER_DOMAIN_NAME=Default exportOS_PROJECT_NAME=a

  • 再谈ArrayList LinkedList Set等集合的java原理

    英文中有个词语,叫做迭代,名为:Iterable 显然,这是个形容词,叫做可迭代的,于是jdk1.5版本,开始引入了这样一个接口,这样一个interface,看着就很炫,很有概念,很有思想,给人以无限的联想,想着能够实现好多好多的类,仿佛开启了一扇门,进入了新世界   这是所有集合的的接口入口,看到有个iteator,那就是所有集合都可以调用iterator,这个没毛病,例如,list.iterator().xx             Iterator里面的方法就在下面了,不作解释了           hasNext(),就是用来给实现类寻找数组中的下一个成员是否存在,告诉下一个是否为空,存不存在,指针动吗?不动,当然,结果肯定是布尔值的    next(),返回类型是E,就是Iterator中的成员,意思是找到数组中下一个成员,并获取,指针么毋庸置疑,肯定动了    remove(),移除这个成员,   forEachRemaining(),我们本来有个forEach,

  • 培训机构出来的,在厦门这边。刚开始工资可能就3000多。。未来很迷茫。还是大专。

    大专找工作问题不大,关键是如何提高技术获得发展和高薪,如果成为核心程序员,或者能带队开发,那么价值和薪水就大大提高了;程序员,架构师,技术经理,部门经理,技术总监,三年一个台阶作为目标,长期坚持学习,提高技术研发,业务分析,技术管理,这三方面能力,持续努力,就不会迷茫了。 技术研发,包括开发语言,如java,py,c#开发;数据库,oracle,mysql;前端技术bt,vue,elemnet,weui,react;分布式系统,互联网架构;扩展的还有流行的大数据库技术,AI技术; 业务分析,包括行业业务知识,如金融业务,证券业务,保险业务,电商业务,物流业务,供应链业务; 技术管理,如项目管理,产品管理,组织管理,战略管理; 以上都会了,做个部门经理,技术总监或者副总,年薪60-100万,问题不大;

  • datatable隐藏列设置及获取隐藏列的值

    "columns":[ {"data":"name"}, {"data":"password"}, {defaultContent:'<tdclass="caozuo">'+ <spanclass="lookup">查看</span>'+ '<spanclass="modify">修改</span>'+ '<spanclass="delete">删除</span></td>'}, {"data":"id","visible":false} ] 复制 由于因为该id列设置为隐藏后,在页面就没有dom节点,所以使用jquery获取不到该id的值 使用下面的方法就可以获取到id //先拿到点击的行号   varrowIndex=$(this).parents("tr").index();   //此处拿到隐藏列的id   varid=$('#example').DataTable().row(rowIndex).data()

  • 『片段』OracleHelper (支持 多条SQL语句)

    C# 调用 Oracle 是如此尴尬 >System.Data.OracleClient.dll ——.Net 自带的已经过时作废。 >要链接 Oracle 服务器,必须在本机安装 Oracle 客户端 —— 而 SQLServer 不需要安装客户端。      win32_11gR2_client.zip(652M)     win64_11gR2_client.zip(587M)  >Oracle.DataAccess.dll——Oracle 官方提供的.Net 程序集【在安装目录 ODP.NET 中】。     Oracle.DataAccess.dll 严格区分 x32、x64—— 程序集不是 AnyCPU。 &nb

  • 函数的递归

    函数的递归 是什么? 在一个函数中,当函数内部含有调用自身函数的语句,则表示该函数采用递归方法,例如下所示: deff1(a,b): f1(c,d) ....... ....... return0复制 解法? 思路:①找重复       ②找变化:这里可能需要构造变量。       ③找边界:是哪个变化的变量,并根据变量变化的规律来得到边界 例如:求n的阶层       ①找重复(子问题):则为n*(n-1)的阶层,化为求解(n-1)的阶层。求解(n-1)的阶层比求n的阶层问题规模要小,以此类推,这个为子问题。       ②找变化:这里是n在变小。       ③找边界:当n=1是结束的标志。 若要使用递归来解决问题,则可以按照此步骤进行解题,这样就更加容易解题。 递归的运用具有一下几

  • 常见的网络协议

    SSH介绍 SSH为SecureShell的缩写,它是建立在应用层基础上的安全协议,专为远程登录会话和其他网络服务提供安全性的协议。

  • 2019数码倒腾经验 斐讯T1以及9008刷机 新路由三newifi3 470矿卡

    pdd70-80的T1盒子tips 1恩山降级包wifi连接也可以降级bl 2对公usb线很重要淘宝买的30公分连接win764bit电脑刷机软件按教程走刷机   9008刷机 高通模式无视bl  破账号锁屏幕密码 红米基本上9008触点图短接再连电脑几秒内跳安装9008驱动 miflash其实都有 注意必须带签名版本否则要F8禁止驱动签名启动 必须win764位刷机里面高通lusb.exe软件是64位 以前mtk刷机xp很容易现在是64位天下 miflash201805版本修改很多以前bug 刷ov机子自带老版本不行 而且刷机包很多推广软件root折腾很久才干掉     新路由三 newifi3是在k2p涨到160后好数码玩意淘宝广西很多60-90 老版本漏油胜在便宜 都是挖矿商回收成本出的东西 刷breed 个人喜欢老毛子  国内高恪也不错   470矿卡 pdd上讯景470版本加优惠卷226到手 boom也不可惜

  • 3水仙花数

    1//题目:打印出所有的"水仙花数(narcissusnumber)",所谓"水仙花数"是指一个三位数, 2//其各位数字立方和等于该数本身。例如:153是一个"水仙花数",因为153=1的三次方+5的三次方+3的三次方。 3publicclasslianxi{ 4//1.100-9992.各个数字分离出来,需要求余%,和整除/3.用立方的函数,不用也行Math.pow(a,3) 5////2562=256/1005=256%100/106=256%100%10 6staticinta,b,c; 7publicstaticvoidmain(String[]args){ 8 9 10for(inti=100;i<1000;i++){ 11a=i/100; 12b=(i%100)/10; 13c=(i%100)%10; 14if(Math.pow(a,3)+Math.pow(b,3)+Math.pow(c,3)==i) 15System.out.print(i+""); 16 17} 18} 19}复制 153370371407复制  

  • [日常]线段树空间

    线段树空间到底该开多大?(转载自luogu@小粉兔) 这里的线段树指的是,每个节点都有00或22个孩子的二叉树。 编号为xx的节点的左孩子(如果存在的话)的编号为2x2x,右孩子的编号为2x+12x+1。而根节点的编号一般为11。 一棵拥有xx个叶子节点的线段树被称为xx-线段树。 除此之外,一棵xx-线段树(x>1)(x>1)还需要满足其左子树为一棵\lfloorx/2\rfloor⌊x/2⌋-线段树,其右子树为一棵\lceilx/2\rceil⌈x/2⌉-线段树。 有上述条件可以唯一确定一棵xx-线段树(x>0)(x>0)的形态。 接下来要探讨的是:一棵nn-线段树的节点中的最大的编号id_{\max}idmax​,与nn有什么关系。因为最大的编号和在程序中实现时所用的数组大小以及使用的内存大小有密切的联系。 有人认为id_{\max}idmax​小于4n4n,有人认为id_{\max}idmax​不会超过5n5n。有人提出可以证明id_{\max}\leq3n+1idmax​≤3n+1。 真相到底是什么? ①线段树的高度和形态 11-线段树高度为11。 2

  • 《30天自制操作系统》Day01

    我宣布,从今天开始,本懒狗正式踏入自制操作系统的大坑之中,内容将使用较现代的新工具和新思路来编写,会不定期更新(谁让我懒呢...) 当然,这个系列不会涉及太多理论,主要以我自己的实践过程为主,看理论请看书。 可以在GitHub跟进我的学习实践进度... 1.工具准备 作者使用的工具,并不是我熟悉的,也不一定是最好的解决方案。 对于16进制编辑器,你可以选用WinHex,我将采用开源免费的wxMEdit: 文本编辑器我首选VisualStudioCode,你可以选择自己喜欢的文本编辑器。 虚拟机的话,你可以使用VirtualBox或者VMware。我将使用VMwareWorkstation14,因为它更加强大。 汇编的话,还是老老实实采用作者的nask.exe吧,我们并不需要自己写一个汇编器。 我们还需要一个Bash环境,你可以选择Git的Bash,我这里使用Cmder。 2.以16进制方式编辑image映像文件 2.1.Bash环境,dd命令,生成全0的image文件 软盘规定大小必须为1440KB,也就是1474560字节(1440*1024Bytes,1KB=1024Byte

  • Lumen/Laravel调试API接口利器laravel-debugbar

    Laravel、Lumen打印sql每次都要在手动加调试代码挺麻烦的。本文主要介绍另一个调试神器 barryvdh/laravel-debugbar  先讲一下效果。可以调试带页面的接口,也可以调试单纯的jsonapi接口。 图一:请求的接口列表,可以根据一些条件进行过滤。红色划线的部分是我自己修改composer保增加上去的选项,后面一起放出composer仓库链接。   图二、查看异常(就不用到服务器看日志文件了)  图三、打印sql(所有sql一目了然)      还有其他几个面板,就不截图了。 安装步骤: 1、安装composer包 #原版composer包,请求接口列表没有我图一划线那几个筛选项composerrequirebarryvdh/laravel-debugbar composerrequirebarryvdh/laravel-debugbar--dev//仅开发环境安装复制 #我修改的过的composer包composerrequireevan766/laravel-debugbar co

  • UML概括

    一、 类关系:   关联(单向关联,双向关联,自关联):通常是一个类作为另外一个类的成员变量   聚合:成员变量可以独立于整体运行(空心菱形)。(作为成员变量)   组合:成员变量与整体共存亡,通常是在构造的时候实例化(实心菱形)。(作为成员变量)     依赖:在方法入参、方法体内是用被使用的类(虚线箭头)。   泛化:类的集成(空心三角实线)   接口实现:接口的实现(空心三角虚线)     

相关推荐

推荐阅读