WeChat-GraphicEdit

源码地址WeChat-GraphicEdit

微信小程序的图文编辑功能，可针对单个输入框的文字进行简单样式调整，在文字中间插入、删除图片；

组件的组成：

使用方法

首先需要下载相应的组件代码，可以在源码链接里面下载 然后将文件直接拖入到你项目中对应的位置

1、toolBartoolBar组件不需要自己去操作，如果不想要工具栏，这可以在的文件的注释掉，然后将行的注释打开，就可以了。

2、GraphicEdit图文编辑展示页这个组件具体样式为：

图中的方框部分就是的样式，这个是没有文字和图片的时候展示的样式

1、如果需要，就要在你需要加此组件的page里面的

文件里面导入组件：

2、在page的文件里面对应位置加上。

参数说明：：传入的富文本字符串，格式需要和下面介绍具体介绍一样，也就是

：这是一个绑定方法，是点击事件，点击进入到图文编辑界面，并且需要带上参数，如：

3、GraphicEditPage使用这个组件，建议先创建一个page来作为该组件的父试图，这样对数据的处理和使用比较方便。 1、在文件里面导入组件：

2、在

文件里面对应的地方使用：

参数说明：

：组件的id，在js文件里可以通过这个id获取到这个组件

：富文本字符串，格式和上面一致

：绑定图文编辑页的提交按钮点击回调，可以在这里获取编辑的内容，如：

：图片删除绑定事件，可以获取到删除图片的url，根据这个url可进行服务器图片删除操作

:选择照片成功，这里如果可以获取到选择照片的本地地址，如：

注意事项：

各组件的基本介绍：

GraphicEditPage

先介绍核心界面，这个组件能实现文字和图片混编，在文字中间插入图片；可以针对单个输入框的文字进行大小和颜色的改变；可以自动将本组件的编辑内容以本组件支持的数据结构的形式回调出去；可以将本组件编辑的内容转换成html字符串回调出去，外界展示的时候可以直接用富文本展示第三方展示，这样就可以直接以字符串的形式存到数据库，取值展示的时候直接展示。

由于微信小程序官方输入框组件不支持图片展示的原因，所以在设计图文编辑组件的时候，参考了一些其他的小程序，将文字和图片分别用和来展示，类似于下图这样：

针对这样的设计，所以本组件用到的数据结构就比较特殊，为了便于编辑和数据处理，本组件设计的数据结构为：

如上面的数据结构中，通过来判断是还是，在wxml文件里面布局对应的组件。

通过的方法，我们可以获取到失去焦点时，焦点所在的位置，保存到data中的中，在插入图片的时候，通过焦点位置进行判断，将中的内容从焦点位置一份为二，中间放入图片，则数据结构就是这样：

当然这是普通现象，还要对特殊情况进行判断插入，比如焦点在最后，焦点在最开始处，输入框没有输入的时候插入图片的情况，这些判断都在组件方法方法中实现：

图片有可能上传失败，这里也做了对上传失败的处理，如果上传失败，可以点击图片区域重新上传

2、图片的删除 对添加的图片进行删除，这里的删除会提供回调方法供外面界面回调，但是删除图片的操作不受外面的影响。

---

2、 :数组类型的数据，为本组件自定义的数据结构，适用于本组件，外界也可以遍历根据判断取值。 提交按钮方法实现:

--------

Graphic

组件Graphic是一个展示图文编辑的组件，会提供一系列方法，比如一个界面需要在一个区域实现点击跳转到图文编辑页，然后展示编辑内容，那么这个组件就可以使用。该组件组要是通过实现，目前小程序对富文本的支持不是很友好，需要自己将富文本转换成组件需要数据。

ToolBar

Toolbar 是一个工具类，就是简单的改变输入框的字体大小和颜色，然后就是图片选择拍照功能按钮。提供三个方法回调： 1、选择照片按钮点击回调：

----

2、选择字体按钮点击回调

---

3、选择文字颜色按钮点击回调

---