# xing-weapp-editor

**Repository Path**: hihopeorg/xing-weapp-editor

## Basic Information

- **Project Name**: xing-weapp-editor
- **Description**: 图文编辑组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2022-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# xing-weapp-editor

## 简介

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


## 演示效果

![Image text](/screenshot/xing-weapp-editor.gif)

## 安装教程

```shell
npm install @ohos/xing-weapp-editor --save
```

OpenHarmony npm环境配置等更多内容，请参考 [如何安装OpenHarmony npm包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_npm_usage.md) 。

## 使用说明

1. 在hml文件引用：

```html
<element src="../../components/xing-editor.hml"></element>
<div class="container">
    <xing-editor 
        on:click="finish" 
        output-type="html" 
        image-upload-url="http://localhost:3000/upload" 
        image-upload-name="image" 
        html="{{html}}">
    </xing-editor>
</div>
```

2. 你可以在js代码中这样写：

```javascript
onInit() {
    this.html = '<p class="xing-p">不谈琐碎的细节，突出主题，颜色运用。这些都是行为，这些行为是纹身师的能力表达，而他们要达到一个目标：</p>‘ + 
        ’<img class="xing-img" style="width: 100%" src="/common/images/sample.jpg" height="433px" _uploaded="true"></img>‘ + 
        ’<p class="xing-p">创作出来的这个纹身，有没有在瞬间抓住人眼球，让人不断的想一直看。</p>'
}
```

## 组件属性
| 参数                   | 类型          | 必填    | 说明                                                    |
| ---------------------- | ------------- | ------- | ------------------------------------------------------- |
| output-type            | String        | html    | 输出的格式，html或array                                 |
| button-background-color| String        | #409EFF | 完成按钮的背景色                                        |
| button-text-color      | String        | #fff    | 完成按钮的前景色                                        |
| nodes                  | Array         | 无      | 初始内容的array形式，仅支持此组件输出的array，优先于HTML|
| html                   | String        | 无      | 初始内容的HTML形式，仅支持此组件输出的HTML              |
| bindfinish             | EventHandle   | 无      | 输出内容时触发，event.detail = { content }              |

## 贡献代码

使用过程中发现任何问题都可以提 [Issue](https://gitee.com/hihopeorg/xing-weapp-editor/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://gitee.com/hihopeorg/xing-weapp-editor/pulls) 。

## 版权和许可信息

本项目基于 [MIT License](https://gitee.com/hihopeorg/xing-weapp-editor/blob/master/LICENSE)，请自由地享受和参与开源。