# 绠€浠� Intro 

Vue-html5-editor鏄竴涓猇ue鐨勫瘜鏂囨湰缂栬緫鍣ㄦ彃浠讹紝绠€娲佺伒娲诲彲鎵╁睍锛岄€傜敤浜巚ue2.0浠ヤ笂鐗堟湰锛屾敮鎸両E11.

Vue-html5-editor is an html5 wysiwyg editor for vue,easy and flexible,compatible with Vue.js 2.0+,support IE11.

![screenshot](http://tai.coding.me/vue-html5-editor/editor.png?v=20160912)

[鐐瑰嚮鏌ョ湅婕旂ず鏁堟灉 Demo is here](http://tai.coding.me/vue-html5-editor)

# 瀹夎 Installation

### Npm


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

寮曞叆骞跺畨瑁呬綔涓哄叏灞€缁勪欢

import and install as global component

```js
import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);
```

鍚屾牱浣犱篃鍙互浣滀负灞€閮ㄧ粍浠朵娇鐢紝鏂逛究鍦ㄤ笉鍚岀殑鍦烘櫙閲屼娇鐢ㄤ笉鍚岀殑閰嶇疆.

```js
const editor1 = new VueHtml5Editor(options1)
const app1 = new Vue({
    components:{
        editor1
    }
})
const editor2 = new VueHtml5Editor(options2)
const app2 = new Vue({
    components:{
        editor2
    }
})
```


### 娴忚鍣ㄧ洿鎺ヤ娇鐢� browser

```html
<script src="serverpath/vue.js"></script>
<script src="serverpath/vue-html5-editor.js"></script>
```
閫氳繃鍏ㄥ眬鍙橀噺`VueHtml5Editor`鏉ュ畨瑁�.

Install using global variable `VueHtml5Editor`.
```js
Vue.use(VueHtml5Editor, options)
```


# 浣跨敤璇存槑 Usage

妯℃澘浠ｇ爜濡備笅锛�

template code as follows:

```html
<vue-html5-editor :content="content" :height="500"></vue-html5-editor>
```

# options

```js
Vue.use(VueHtml5Editor, {
    // 鍏ㄥ眬缁勪欢鍚嶇О锛屼娇鐢╪ew VueHtml5Editor(options)鏃惰閫夐」鏃犳晥 
    // global component name
    name: "vue-html5-editor",
    // 鏄惁鏄剧ず妯″潡鍚嶇О锛屽紑鍚殑璇濅細鍦ㄥ伐鍏锋爮鐨勫浘鏍囧悗鍙扮洿鎺ユ樉绀哄悕绉�
    // if set true,will append module name to toolbar after icon
    showModuleName: false,
    // 鑷畾涔夊悇涓浘鏍囩殑class锛岄粯璁や娇鐢ㄧ殑鏄痜ont-awesome鎻愪緵鐨勫浘鏍�
    // custom icon class of built-in modules,default using font-awesome
    icons: {
        text: "fa fa-pencil",
        color: "fa fa-paint-brush",
        font: "fa fa-font",
        align: "fa fa-align-justify",
        list: "fa fa-list",
        link: "fa fa-chain",
        unlink: "fa fa-chain-broken",
        tabulation: "fa fa-table",
        image: "fa fa-file-image-o",
        hr: "fa fa-minus",
        eraser: "fa fa-eraser",
        undo: "fa-undo fa",
        "full-screen": "fa fa-arrows-alt",
        info: "fa fa-info",
    },
    // 閰嶇疆鍥剧墖妯″潡
    // config image module
    image: {
        // 鏂囦欢鏈€澶т綋绉紝鍗曚綅瀛楄妭  max file size
        sizeLimit: 512 * 1024,
        // 涓婁紶鍙傛暟,榛樿鎶婂浘鐗囪浆涓篵ase64鑰屼笉涓婁紶
        // upload config,default null and convert image to base64
        upload: {
            url: null,
            headers: {},
            params: {},
            fieldName: {}
        },
        // 鍘嬬缉鍙傛暟,榛樿浣跨敤localResizeIMG杩涜鍘嬬缉,璁剧疆涓簄ull绂佹鍘嬬缉
        // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
        // set null to disable compression
        compress: {
            width: 1600,
            height: 1600,
            quality: 80
        },
        // 鍝嶅簲鏁版嵁澶勭悊,鏈€缁堣繑鍥炲浘鐗囬摼鎺�
        // handle response data锛宺eturn image url
        uploadHandler(responseText){
            //default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
            var json = JSON.parse(responseText)
            if (!json.ok) {
                alert(json.msg)
            } else {
                return json.data
            }
        }
    },
    // 璇█锛屽唴寤虹殑鏈夎嫳鏂囷紙en-us锛夊拰涓枃锛坺h-cn锛�
    //default en-us, en-us and zh-cn are built-in
    language: "zh-cn",
    // 鑷畾涔夎瑷€
    i18n: {
        //specify your language here
        "zh-cn": {
            "align": "瀵归綈鏂瑰紡",
            "image": "鍥剧墖",
            "list": "鍒楄〃",
            "link": "閾炬帴",
            "unlink": "鍘婚櫎閾炬帴",
            "table": "琛ㄦ牸",
            "font": "鏂囧瓧",
            "full screen": "鍏ㄥ睆",
            "text": "鎺掔増",
            "eraser": "鏍煎紡娓呴櫎",
            "info": "鍏充簬",
            "color": "棰滆壊",
            "please enter a url": "璇疯緭鍏ュ湴鍧€",
            "create link": "鍒涘缓閾炬帴",
            "bold": "鍔犵矖",
            "italic": "鍊炬枩",
            "underline": "涓嬪垝绾�",
            "strike through": "鍒犻櫎绾�",
            "subscript": "涓婃爣",
            "superscript": "涓嬫爣",
            "heading": "鏍囬",
            "font name": "瀛椾綋",
            "font size": "鏂囧瓧澶у皬",
            "left justify": "宸﹀榻�",
            "center justify": "灞呬腑",
            "right justify": "鍙冲榻�",
            "ordered list": "鏈夊簭鍒楄〃",
            "unordered list": "鏃犲簭鍒楄〃",
            "fore color": "鍓嶆櫙鑹�",
            "background color": "鑳屾櫙鑹�",
            "row count": "琛屾暟",
            "column count": "鍒楁暟",
            "save": "纭畾",
            "upload": "涓婁紶",
            "progress": "杩涘害",
            "unknown": "鏈煡",
            "please wait": "璇风◢绛�",
            "error": "閿欒",
            "abort": "涓柇",
            "reset": "閲嶇疆"
        }
    },
    // 闅愯棌涓嶆兂瑕佹樉绀哄嚭鏉ョ殑妯″潡
    // the modules you don't want
    hiddenModules: [],
    // 鑷畾涔夎鏄剧ず鐨勬ā鍧楋紝骞舵帶鍒堕『搴�
    // keep only the modules you want and customize the order.
    // can be used with hiddenModules together
    visibleModules: [
        "text",
        "color",
        "font",
        "align",
        "list",
        "link",
        "unlink",
        "tabulation",
        "image",
        "hr",
        "eraser",
        "undo",
        "full-screen",
        "info",
    ],
    // 鎵╁睍妯″潡锛屽叿浣撳彲浠ュ弬鑰僥xamples鎴栨煡鐪嬫簮鐮�
    // extended modules
    modules: {
        //omit,reference to source code of build-in modules
    }
})
```

# 缁勪欢灞炴€� attributes

```html
<editor :content="content" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></editor>
```

### content

缂栬緫鍐呭

The html content to edit

### height

缂栬緫鍣ㄩ珮搴︼紝濡傛灉璁剧疆浜哷auto-height`涓簍rue锛屽皢璁剧疆涓虹紪杈戝櫒鐨勬渶灏忛珮搴�.

The height or min-height ( if auto-height is true ) of editor.

### z-index

灞傜骇锛屽皢浼氳缃紪杈戝櫒瀹归噺鐨刞z-index`鏍峰紡灞炴€�,榛樿涓�1000.

Sets z-index style property of editor,default 1000.

### auto-height

鏄惁鑷姩鏍规嵁鍐呭鎺у埗缂栬緫鍣ㄩ珮搴�,榛樿涓簍rue.

Resize editor height automatically,default true.

### show-module-name

灞€閮ㄨ缃槸鍚︽樉绀烘ā鍧楀悕绉帮紝浼氳鐩栧叏灞€鐨勮瀹�.

Set `showModuleName` locally.

# 浜嬩欢
```html
<editor @change="updateData"></editor>
```

### change

姣忔鍐呭鏈夊彉鍔ㄦ椂瑙﹀彂,鍥炰紶鏀瑰彉鍚庣殑鍐呭.

Emited when the content changes,and pass the current content as event data.

# License
[Apache-2.0](http://opensource.org/licenses/Apache-2.0)