[发明专利]一种基于ElementUI和UEditor富文本的组件开发方法

说明书

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

技术领域

本发明涉及一种富文本组件开发方法，尤其涉及一种基于Element UI和UEditor富文本的组件开发方法。

背景技术

Element UI是一套基于VUE 2.0的组件库，其中主要包括了基本组件设计外，还没涉及到富文本相关的组件。而现有的富文本插件是独立于Element UI，开发过程中需要工程代码中单独处理。但是，现有的Element UI没有富文本编辑组件，在基于Element UI的开发时，对于要开发文本编辑功能时，则需要在工程里单独对富文本插件做处理。现有的UEditor插件目前没有封装到Element UI组件库，对于使用Element UI开发实现富文本编辑功能时造成了开发成本的浪费。由于UEditor插件的内置的上传图片接口，只依赖php、java、.net，忽略了对其他语言的支持，同时也不支持具备跨域上传图片的功能，忽略了应用的广泛性。并且，UEditor插件的配置文件不能同时配置多个图片服务器，不能满足需要配置的多个服务器开发功能时的需求。

发明内容

本发明的目的在于提供一种基于Element UI和UEditor富文本的组件开发方法，以期能实现代码复用，并且在基于Element UI的工程开发中实现富文本编辑功能，将UEditor的功能封装，形成可复用的富文本编辑组件，同时优化图片的上传功能。

本发明通过下述技术方案实现：

一种基于Element UI和UEditor富文本的组件开发方法，包括以下步骤：

(1)在工程public文件夹中引入UEditor富文本插件，并将UEditor富文本插件封装成Element UI组件；

(2)对UEditor富文本插件进行初始化；

(3)验证初始化是否成功；

(4)在Element UI组件中修改图片上传功能；

(5)在Element UI组件中设置图片插入功能。

进一步的，步骤(3)包括以下步骤：

(3a)打开chrome浏览器的调试模式，在显示页面调用已初始化的组件；

(3b)查看控制台是否报错：是，则进入步骤(3c)；否，则进入步骤(3d)；

(3c)检查错误位置，并在错位位置对应的设置位置进行修正，然后返回步骤(3b)；

(3d)验证初始化成功，结束验证步骤。

再进一步的，步骤(2)对UEditor富文本插件进行初始化的过程为：新建vue格式文件并定义VUE对象，对页面展示出的富文本插件的样式做调整，统一富文本组件与ElementUI的样式风格。