# vue-como-editor

> 基于wangeditor编辑器的二次封装，使用更便于使用

Latest version **1.0.1** (published 2020-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-como-editor
pnpm add vue-como-editor
yarn add vue-como-editor
bun add vue-como-editor
```

## 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 | 2020-10-21 |
| First published | 2020-10-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 717.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | szjcomo |
| Maintainers | como20170606 |
| Keywords | editor, vue-como-editor, vue-szjcomo, szjcomo |

## Links

- npm: https://www.npmjs.com/package/vue-como-editor
- Repository: http://git.sizhijie.com/vue-plugins/vue-como-editor
- npm.io page: https://npm.io/package/vue-como-editor

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-10-21
- 1.0.0 — 2020-10-17

## README

# vue-como-editor

- 基于wangeditor封装的专用编辑器，丰富了[wangeditor](http://www.wangeditor.com/doc/)的功能


## 安装
```
npm install vue-como-wangeditor

```

## 使用

__一、全局引入__

- 在main.js中引入

```js
import vueComoEditor from 'vue-como-editor';
Vue.use(vueComoEditor)

```


## 编译
```
npm run vue-como-editor
```

## events


|  事件名 |  说明 | 参数  |
| ------------ | ------------ | ------------ |
| edit-change | 编辑器内容改变事件 | function(html) |
| upload-image | 编辑器文件上传事件 | 包括单复制图片在编辑里面和手动触发图片上传事件 function(files,insertHnadel) |
| edit-blur | 编辑器失去焦点事件 |  function(html) |
| edit-focus | 编辑器获取焦点事件 |  function(html) |



## methods

| 方法名 | 说明 | 备注信息 |
| ------------ | ------------ | ------------ |
| getEditor | 获取当前编辑器实例 | `this.$refs.name.getEditor()` |

## props

| 方法名 | 说明 | 备注信息 |
| ------------ | ------------ | ------------ |
| config | 编辑器配置 | 示例`{height:500}` 具体可以查看 [wangeditor](http://www.wangeditor.com/doc/) 的配置项 |
| parseTextHandle | 编辑器粘贴内容处理 | function(html) 注意需返回处理后的html 也可以不处理,可不传 |
| value | 增加value值的处理 | string 可以使用v-model绑定值的设置值,非常灵活，跟普通的input框一样使用 |




## 示例

```html
<template>
    <div class="content">
        <div class="buttons">
            <button @click="handleGetEditorInstance" style="background-color: #c00;border:none;padding: 5px 10px;line-height: 30px;color: #fff;margin-bottom: 10px;"> 获取编辑器实例 </button>
        </div>
        <vue-como-editor :config="{height:600}" @edit-change="handleEditChange" @upload-image="handleUploadImage" ref="comoEditor" :vlaue="content"></vue-como-editor>
    </div>
</template>
<script>
import imageHandle  from 'vue-como-image';
export default {
    name:'home',
    data() {
        let that = this;
        return {
            content:''
        }
    },
    components:{},
    methods:{
        /**
         * [handleEditChange 内容改变事件,可以不再处理此事件]
         * @author    szjcomo
         * @date           2020-10-17
         * @return {[type]}     [description]
         */
        handleEditChange:function(html) {
            let that = this;
            console.log(that.content)
        },
        /**
         * [handleUploadImage 文件上传处理]
         * @author    szjcomo
         * @date           2020-10-17
         * @param  {[type]}     files     [所有上传的文件]
         * @param  {[type]}     addHandle [插入函数]
         * @return {[type]}               [description]
         */
        handleUploadImage:function(files,addHandle) {
            let that = this;
            files.forEach(async (file)=>{
                let result = await imageHandle.compress(file);
                addHandle(result.content);
            })
        },
        /**
         * [handleGetEditorInstance 获取编辑器实例]
         * @author    szjcomo
         * @date           2020-10-17
         * @return {[type]}     [description]
         */
        handleGetEditorInstance:function() {
            let that = this;
            let instance = that.$refs.comoEditor.getEditor();
            console.log(instance)
        }
    }
}
</script>
```



### 更新日志

__2020年10月15日__

- 完成编辑器封装，完善编辑器使用文档

__2020年10月21日__

- 增加v-model绑定数据和设置数据

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