<commit_before># vue-html5-editor

一个vue的html5富文本编辑器插件，简洁易用

![编辑器图片](http://tai.coding.me/vue-html5-editor/editor.png)

[查看在线演示](http://tai.coding.me/vue-html5-editor/server-upload.html)

## 安装并使用

#### nodejs

```bash
npm install vue-html5-editor --save-dev
```

```js
var editor = require("vue-html5-editor")
Vue.use(editor,options);
```

### 浏览器

```html
<script src="serverpath/vue-html5-editor.js"></script>
```
引入了js后，会有一个全局变量`VueHtml5Editor`

```js
Vue.use(VueHtml5Editor, { name : "editor"})
```
模板示例代码

```html
<editor :content="content" :height="500"></editor>
```
### 全局安装选项

```js
Vue.use(VueHtml5Editor, {
    //全局组件的名称
    name: "editor",
    //图片相关配置
    image: {
        //服务器上传地址
	    //服务器需要返回json数据类似 {ok:false,msg:"错误信息"} 或者 {ok:true,data:"图片地址"}
        server: null,
        //图片上传请求参数名称
        fieldName: "image",
        //大小限制,默认512k
        sizeLimit: 512 * 1024,
        //是否压缩,如果设置为false,后面3个参数无用
        compress: true,
        //压缩后的最大宽度
        width: 1600,
        //压缩后的最大高度
        height: 1600,
        //jpeg质量
        quality: 80
    }
})
```

### 编辑器组件属性

```html
<editor :content.sync="content" :height="500"></editor>
```

#### content

编辑内容，需要双向同步，字符串类型

#### height

编辑器高度，单位像素，数值型<commit_msg>更新readme<commit_after># vue-html5-editor

一个vue的html5富文本编辑器插件，简洁易用

![编辑器图片](http://tai.coding.me/vue-html5-editor/editor.png)

[查看在线演示](http://tai.coding.me/vue-html5-editor/server-upload.html)

## 安装并使用

#### nodejs

```bash
npm install vue-html5-editor --save-dev
```

```js
var editor = require("vue-html5-editor")
Vue.use(editor,options);
```

### 浏览器

```html
<script src="serverpath/vue-html5-editor.js"></script>
```
引入了js后，会有一个全局变量`VueHtml5Editor`

```js
Vue.use(VueHtml5Editor, { name : "editor"})
```
模板示例代码

```html
<editor :content="content" :height="500"></editor>
```
### 全局安装选项

```js
Vue.use(VueHtml5Editor, {
    //全局组件的名称
    name: "editor",
    //图片相关配置
    image: {
        //服务器上传地址
	    //服务器需要返回json数据类似 {ok:false,msg:"错误信息"} 或者 {ok:true,data:"图片地址"}
        server: null,
        //图片上传请求参数名称
        fieldName: "image",
        //大小限制,默认512k
        sizeLimit: 512 * 1024,
        //是否压缩,如果设置为false,后面3个参数无用
        compress: true,
        //压缩后的最大宽度
        width: 1600,
        //压缩后的最大高度
        height: 1600,
        //jpeg质量
        quality: 80
    }
})
```

### 编辑器组件属性

```html
<editor :content.sync="content" :height="500" :z-index="1000" :disable-full-screen="false"></editor>
```

#### content

编辑内容，需要双向同步，字符串类型

#### height

编辑器高度，单位像素，数值型

### z-index

编辑器的显示层级

### disable-full-screen

是否禁用全屏功能

{'fraction_non_alphanumeric': 0.194325689856199, 'fraction_numerical': 0.030314807617567042, 'mean_word_length': 3.0344827586206895, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3121105', 'n_tokens_mistral': 1308, 'n_tokens_neox': 1323, 'n_words': 153}