# tony-tinymce-wrap

> tony-tinymce-wrap

Latest version **1.0.1** (published 2021-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install tony-tinymce-wrap
pnpm add tony-tinymce-wrap
yarn add tony-tinymce-wrap
bun add tony-tinymce-wrap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-03-24 |
| First published | 2021-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 (+19 in 2 direct dependencies) |
| Install scripts | no |
| Author | tony@sh123.cn |
| Maintainers | hitony |

## Links

- npm: https://www.npmjs.com/package/tony-tinymce-wrap
- npm.io page: https://npm.io/package/tony-tinymce-wrap

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [tinymce](https://npm.io/package/tinymce.md) 5.1.5

## Recent versions

- 1.0.1 (latest) — 2021-03-24
- 1.0.0 — 2021-03-24

## README

## 基于 Tinymce 的富文本编辑器

### 安装
```
npm i tony-tinymce-wrap

或

yarn add tony-tinymce-wrap
```

### 使用
- [ index.html ] 部分
  ``` html
  ...
  <script src="https://oss.sh123.cn/libs/tinymce.5.1.5/tinymce.min.js"></script>
  ...
  ```

- [ template ] 部分
  
  ``` html
  <template>
    <div>
        ...
        <tinymce-editor 
          :value="componentTinymceEditor.content" 
          :setting="componentTinymceEditor.setting" 
          @result="componentTinymceEditor.result">
        </tinymce-editor>
        ...
    </div>
  </template>
  ```

- [ javascript ] 部分
  
  ``` javascript
  import TinymceEditor from 'tony-tinymce-wrap'

  export default {

      components: { 
          TinymceEditor 
      },

      data () {

          return {

            // Tinymce 富文本编辑器
            componentTinymceEditor: {
                content: '<p>Tinymce富文本编辑器</p>',
                setting: {
                    img_upload: {
                        api_url: '',
                        access_token: ''
                    }
                },
                result: ( _cnt ) => {
                    console.log(_cnt)
                }
            }
          }
      }
  }
  ```

  ### 参数说明
  | 名称        | 描述                                                  |
  | ----------- | ----------------------------------------------------- |
  | `:value` | 类型 `String`，作为文本内容传入编辑器 |
  | `:setting` | 类型 `Object`，编辑器配置项: `img_upload` 类型 `Object`，详细见下方参数说明；其他配置见：http://tinymce.ax-z.cn/general/basic-setup.php |
  | `@result` | 类型 `Function`，编辑器中 `Input` `Change` `Undo` `Redo` 事件响应后触发的事件返回文本内容，可绑定父页面对应数据 |

  #### `img_upload` 参数说明
  | 名称        | 描述                                                  |
  | ----------- | ----------------------------------------------------- |
  | `api_url`  | 类型 `String`，图片上传的API地址 |
  | `access_token` | 类型 `String`，请求头(Header)的Token |
  | `max_size` | 类型 `Number`，图片上传的最大限制，默认：`1`，单位：`M` |
  | `allow_type`  | 类型 `Array`，图片上传的格式限制，默认：`['jpeg', 'png', 'gif']` |

---
_Source: https://npm.io/package/tony-tinymce-wrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._