Skip to content
开箱即用的微信小程序图文编辑组件
JavaScript
Branch: master
Clone or download
zhangzhiwei
zhangzhiwei 添加内推链接
Latest commit 0fc7204 Mar 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets add readme Aug 10, 2018
fragment fix: 修复动态传入nodes/html无效的问题 Jan 28, 2019
.gitignore 更新代码片段链接 Feb 13, 2019
LICENSE.md Initial commit Aug 9, 2018
README.md 添加内推链接 Mar 13, 2019

README.md

xing-weapp-editor

开箱即用的小程序图文编辑组件

插入一条广告(from myself)

字节跳动 - EE内推专场;广州、深圳、上海;欢迎狂砸简历

点击进入

or 扫码 ⤵️

代码片段

https://developers.weixin.qq.com/s/adp5u9mk7H6w

效果预览

组件属性

属性名 类型 默认值 说明
image-upload-url String 图片上传,必填,参考wx.uploadFile
image-upload-name String 图片上传,必填,参考wx.uploadFile
image-upload-header String 图片上传,参考wx.uploadFile
image-upload-form-data Object 图片上传,参考wx.uploadFile
image-upload-key-chain String 图片上传接口返回值中url字段的路径,如返回为{ image : { url: 'http://xxx.jpg' } },则填image.url
output-type String html 输出的格式,htmlarray,参考rich-text
button-background-color String #409EFF 完成按钮的背景色
button-text-color String #fff 完成按钮的前景色
nodes Array 初始内容的array形式,仅支持此组件输出的array,优先于HTML
html String 初始内容的HTML形式,仅支持此组件输出的HTML
bindfinish EventHandle 输出内容时触发,event.detail = { content }

代码示例

<!-- index.wxml -->
<xing-editor
  bindfinish="finish"
  output-type="html"
  image-upload-url="http://localhost:3000/upload"
  image-upload-name="image"
  image-upload-key-chain="image.url"
  html="{{html}}"/>
//index.js
Page({
  data: {
    html: '<p class="xing-p">123124<br><br>123124123<br><br><br>324123</p>' +
    '<img class="xing-img" style="width: 100%" src="http://localhost:3000/static/73e95bd90f005.png" _height="0.5743348982785602" _uploaded="true"></img>' +
    '<p class="xing-p">333</p>' +
    '<img class="xing-img" style="width: 100%" src="http://localhost:3000/static/2dab4bd82f879.png" _height="1.2095588235294117" _uploaded="true"></img>',
  },

  finish: function (e) {
    console.log(e.detail.content);
  },
})
{
  "usingComponents": {
    "xing-editor": "/components/xing-editor"
  }
}

TODO List

  • □ 文字格式编辑
  • □ 图片免上传(转Base64存储)
  • □ 编辑预览
You can’t perform that action at this time.