编辑器

## HiEditor 编辑器
富文本编辑器
### 应用背景
### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_092754_453382.png)

------------
富文本编辑器

------------
代码示例如下
```html
<template>
    <div style="height:500px;">
        <hi-data-progress ref="progress1"></hi-data-progress>

<hi-editor  :height="400" v-model="msg" :disabled="disabled" @onClick="onClick" ref="editor" @input="getValue"></hi-editor>

<button @click="clear">清空内容</button>
         
        
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: "Welcome to Use Tinymce Editor",
                hitextarea:null,
                disabled: false
            }
        },
        methods: {
            getValue(value)
            {
                console.log(value);
            },
            //鼠标单击的事件
            onClick(e, editor) {
                console.log("Element clicked")
                console.log(e)
                console.log(editor)
            },
            //清空内容
            clear() {
                //console.log(this.msg)
                debugger
                //this.$refs["progress1"].push("/eap5csxm/KongJianCeShi/ShuJuZuJian/HouDuanShuJuJiaZaiJinDu/func/HouDuanShuJuJiaZaiJinDuLuoJiLiu.func");
               // this.msg = "ddddfasdfadsf";
                this.$refs.editor.insertCode("for(var i=0;i<10;i++){}")
            }
        }
    };
</script>
```

</div>

### Attributes

| 参数       | 说明     | 类型      | 可选值    | 默认值   |
|----------|--------|---------|--------|-------|
| value    | 编辑器值   | String  | —      |       |
| disabled | 是否可用   | Boolean | —      | false |
| height   | 用于控制高度 | string  | Number | 360   |
| plugins  | 控件插件   | Array   | String | —     |
| toolbar  | 控件工具条  | Array   | String | —     |

### Events

| 事件名称 | 说明 | 回调参数 |
|------|----|------|

</style>