一种基于ElementUI和UEditor富文本的组件开发方法技术

本发明专利技术公开了一种基于Element UI和UEditor富文本的组件开发方法，其特征在于，包括以下步骤：(1)在工程public文件夹中引入UEditor富文本插件，并将UEditor富文本插件封装成Element UI组件；(2)对UEditor富文本插件进行初始化；(3)验证初始化是否成功；(4)在Element UI组件中修改图片上传功能；(5)在Element UI组件中设置图片插入功能。本发明专利技术步骤简单便于操作，能实现代码复用，并且在基于Element UI的工程开发中实现富文本编辑功能，将UEditor的功能封装，形成可复用的富文本编辑组件，即可优化图片的上传功能，因此适合推广使用。

【技术实现步骤摘要】
一种基于ElementUI和UEditor富文本的组件开发方法
本专利技术涉及一种富文本组件开发方法，尤其涉及一种基于ElementUI和UEditor富文本的组件开发方法。
技术介绍
ElementUI是一套基于VUE2.0的组件库，其中主要包括了基本组件设计外，还没涉及到富文本相关的组件。而现有的富文本插件是独立于ElementUI，开发过程中需要工程代码中单独处理。但是，现有的ElementUI没有富文本编辑组件，在基于ElementUI的开发时，对于要开发文本编辑功能时，则需要在工程里单独对富文本插件做处理。现有的UEditor插件目前没有封装到ElementUI组件库，对于使用ElementUI开发实现富文本编辑功能时造成了开发成本的浪费。由于UEditor插件的内置的上传图片接口，只依赖php、java、.net，忽略了对其他语言的支持，同时也不支持具备跨域上传图片的功能，忽略了应用的广泛性。并且，UEditor插件的配置文件不能同时配置多个图片服务器，不能满足需要配置的多个服务器开发功能时的需求。
技术实现思路
本专利技术的目的在于提供一种基于ElementUI和UEditor富文本的组件开发方法，以期能实现代码复用，并且在基于ElementUI的工程开发中实现富文本编辑功能，将UEditor的功能封装，形成可复用的富文本编辑组件，同时优化图片的上传功能。本专利技术通过下述技术方案实现：一种基于ElementUI和UEditor富文本的组件开发方法，包括以下步骤：(1)在工程public文件夹中引入UEditor富文本插件，并将UEditor富文本插件封装成ElementUI组件；(2)对UEditor富文本插件进行初始化；(3)验证初始化是否成功；(4)在ElementUI组件中修改图片上传功能；(5)在ElementUI组件中设置图片插入功能。进一步的，步骤(3)包括以下步骤：(3a)打开chrome浏览器的调试模式，在显示页面调用已初始化的组件；(3b)查看控制台是否报错：是，则进入步骤(3c)；否，则进入步骤(3d)；(3c)检查错误位置，并在错位位置对应的设置位置进行修正，然后返回步骤(3b)；(3d)验证初始化成功，结束验证步骤。再进一步的，步骤(2)对UEditor富文本插件进行初始化的过程为：新建vue格式文件并定义VUE对象，对页面展示出的富文本插件的样式做调整，统一富文本组件与ElementUI的样式风格。更进一步的，所述vue格式文件包括<template></template>；<script></script>；<style></style>三个部分；所述<template></template>部分用于定义一个dom，即富文本插件在页面展示的容器；所述<script></script>部分用于控制页面渲染；所述<style></style>部分则用于对页面展示出的富文本插件的样式做调整。为了更好地实现本专利技术，所述<style></style>部分采用的是Less语言。为了确保效果，所述VUE对象包括name，props，data，watch，methods，mounted，beforeDestory。本专利技术与现有技术相比，具有以下优点及有益效果：(1)本专利技术不仅步骤简单，便于操作，还能实现代码复用，并且在基于ElementUI的工程开发中实现富文本编辑功能，将UEditor的功能封装，形成可复用的富文本编辑组件，即可优化图片的上传功能。(2)本专利技术结合ElementUI图片上传，实现多图片上传，且无需单独配置，实现组件的灵活性。(3)本专利技术优化结合UEditor样式，调整组件风格，实现组件的外观风格统一性。(4)本专利技术的组件封装后形成，对外暴露配置参数，低耦合，可移植性高。(5)本专利技术利用vue数据双向绑定的方式，监听图片是否上传成功，从而减少开发成本。具体实施方式下面结合实施例对本专利技术作进一步地详细说明，但本专利技术的实施方式不限于此。实施例本专利技术的基于ElementUI和UEditor富文本的组件开发方法，首先需要在工程public文件夹中引入UEditor富文本插件，并UEditor富文本插件封装成ElementUI组件。具体实施时，可在工程public文件夹中新建一个名为ueditor1.4.3.3的文件夹，该文件名是以组件名ueditor+版本号1.4.3.3组成的。将ueditor官网上下载下来的文件夹存放在新建的ueditor1.4.3.3文件夹中，在该文件夹下包括了主要实现文件ueditor.config.js、ueditor.all.min.js以及样式、语言文件等文件。然后在页面渲染的html页面即index.html页面body的底部引用ueditor.config.js与ueditor.all.min.js文件，在html页面的body的底部引用ueditor.config.js与ueditor.all.min.js文件是因为页面渲染的时候dom是顺序加载的，放在body部分的底部加载更优于放在body部分的头部加载，因为可以避免js加载失败导致页面整体加载失败。实施时，可验证UEditor富文本插件是否引入成功，其验证方法是启动该工程，并打开chrome浏览器的调试模式，即可查看是否引入成功。如果引入不成功，则重复上述引入UEditor富文本插件的步骤。完成UEditor富文本插件封装成ElementUI组件后即可对UEditor富文本插件进行初始化，具体实现时，首先新建vue格式文件，该vue格式文件包括了<template></template>；<script></script>；<style></style>三个部分，该三部分分别以标签的形式隔开，该标签可采用html中的常规标签。所述<template></template>采用HTML5进行页面渲染，该<template></template>部分主要用于定义一个dom，即富文本插件在页面展示的容器。所述<script></script>采用ES6语言进行逻辑处理并编写页面数据。该<script></script>部分用于控制页面渲染，控制页面渲染则需定义一个VUE对象。所述VUE对象包括name，props，本文档来自技高网...

【技术保护点】
一种基于Element UI和UEditor富文本的组件开发方法，其特征在于，包括以下步骤：(1)在工程public文件夹中引入UEditor富文本插件，并将UEditor富文本插件封装成Element UI组件；(2)对UEditor富文本插件进行初始化；(3)验证初始化是否成功；(4)在Element UI组件中修改图片上传功能；(5)在Element UI组件中设置图片插入功能。

【技术特征摘要】
1.一种基于ElementUI和UEditor富文本的组件开发方法，其特征在于，包括以下步骤：(1)在工程public文件夹中引入UEditor富文本插件，并将UEditor富文本插件封装成ElementUI组件；(2)对UEditor富文本插件进行初始化；(3)验证初始化是否成功；(4)在ElementUI组件中修改图片上传功能；(5)在ElementUI组件中设置图片插入功能。2.根据权利要求1所述的一种基于ElementUI和UEditor富文本的组件开发方法，其特征在于，步骤(3)包括以下步骤：(3a)打开chrome浏览器的调试模式，在显示页面调用已初始化的组件；(3b)查看控制台是否报错：是，则进入步骤(3c)；否，则进入步骤(3d)；(3c)检查错误位置，并在错位位置对应的设置位置进行修正，然后返回步骤(3b)；(3d)验证初始化成功，结束验证步骤。3.根据权利要求1或2所述的一种基于ElementUI和UEditor富文本的组件开发方法，其特征在于：步骤(2)对UEditor富文本插件进行初始化的过程为：新建vue格式文件并定义VUE对象，对页面展示出的富文本插件的样式做调整，统一富文本组件与ElementUI的样式风格。4.根据权利要求3所述的一种基于ElementUI和UEditor富文本的组件开发方法，其特征在于：所述...

【专利技术属性】
技术研发人员：夏耩，
申请(专利权)人：易知成都数据服务有限公司，
类型：发明
国别省市：四川,51