Skip to content

Commit 04cffe8

Browse files
committed
add readme
1 parent 909ae06 commit 04cffe8

File tree

2 files changed

+53
-0
lines changed

2 files changed

+53
-0
lines changed

README.md

+53
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,56 @@
11
# xing-weapp-editor
22

33
> 开箱即用的小程序图文编辑组件
4+
5+
## 组件属性
6+
7+
属性名|类型|默认值|说明
8+
---|---|---|---
9+
image-upload-url|String|无|图片上传,必填,参考[wx.uploadFile](https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html#wxuploadfileobject)
10+
image-upload-name|String|无|图片上传,必填,参考[wx.uploadFile](https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html#wxuploadfileobject)
11+
image-upload-header|String|无|图片上传,参考[wx.uploadFile](https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html#wxuploadfileobject)
12+
image-upload-form-data|Object|无|图片上传,参考[wx.uploadFile](https://developers.weixin.qq.com/miniprogram/dev/api/network-file.html#wxuploadfileobject)
13+
image-upload-key-chain|String|无|图片上传接口返回值中url字段的路径,如返回为`{ image : { url: 'http://xxx.jpg' } }`,则填`image.url`
14+
output-type|String|html|输出的格式,`html``array`,参考[rich-text](https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)
15+
button-background-color|String|#409EFF|完成按钮的背景色
16+
button-text-color|String|#fff|完成按钮的前景色
17+
nodes|Array|无|初始内容的array形式,仅支持此组件输出的array,优先于HTML
18+
html|String|无|初始内容的HTML形式,仅支持此组件输出的HTML
19+
bindfinish|EventHandle|无|输出内容时触发,`event.detail = { content }`
20+
21+
## 代码示例
22+
23+
```xml
24+
<!-- index.wxml -->
25+
<xing-editor
26+
bindfinish="finish"
27+
output-type="html"
28+
image-upload-url="http://localhost:3000/upload"
29+
image-upload-name="image"
30+
image-upload-key-chain="image.url"
31+
html="{{html}}"/>
32+
```
33+
34+
```javascript
35+
//index.js
36+
Page({
37+
data: {
38+
html: '<p class="xing-p">123124<br><br>123124123<br><br><br>324123</p>' +
39+
'<img class="xing-img" style="width: 100%" src="http://localhost:3000/static/73e95bd90f005.png" _height="0.5743348982785602" _uploaded="true"></img>' +
40+
'<p class="xing-p">333</p>' +
41+
'<img class="xing-img" style="width: 100%" src="http://localhost:3000/static/2dab4bd82f879.png" _height="1.2095588235294117" _uploaded="true"></img>',
42+
},
43+
44+
finish: function (e) {
45+
console.log(e.detail.content);
46+
},
47+
})
48+
```
49+
50+
```javascript
51+
{
52+
"usingComponents": {
53+
"xing-editor": "/components/xing-editor"
54+
}
55+
}
56+
```

assets/editor.gif

925 KB
Loading

0 commit comments

Comments
 (0)