xi-editor

## 安装 ``` npm install xi-editor --save ``` ## 使用示例 ```vue <template> <div id="app"> <xiEditor v-model="richText" menubar @imagesUpload="handleImgUpload"></xiEditor> {{ richText }} </div> </template>

Usage no npm install needed!

<script type="module">
  import xiEditor from 'https://cdn.skypack.dev/xi-editor';
</script>

README

xi-editor

安装

npm install xi-editor --save

使用示例

<template>
  <div id="app">
    <xiEditor v-model="richText" menubar @imagesUpload="handleImgUpload"></xiEditor>
    {{ richText }}
  </div>
</template>

<script>
import axios from "axios";
import {xiEditor} from "xi-editor";
import 'xi-editor/dist/main.css'
export default {
  name: "App",
  data() {
    return {
      richText: "abc",
    };
  },
  components: {
    xiEditor
  },
  methods: {
    handleImgUpload({ blobInfo, success }) {
      const data = new FormData();
      data.append("file", blobInfo.blob(), blobInfo.filename());
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      /* axios.post("http://xxx/uploadFile", data, config).then((resp) => {
          success(resp.data.data);
        }); */
    },
  },
};
</script>

API

属性 类型 说明 默认值
value（v-model） string 富文本值 ""
menubar boolean 是否显示菜单栏 false
width string/number 宽度 '100%'
height string/number 高度 '200px'
max_width string/number 最大宽度 无
max_height string/number 最大高度 无
min_width string/number 最小宽度 无
min_height string/number 最小高度 无
language string 语言（可选zh_CN，en_us） 'zh_CN'
disabled boolean 是否禁用 false
事件名称 说明 回调参数
imagesUpload 自定义图片上传函数 function(blobInfo, success, failure)

blobInfo 图片二进制数据

success 图片上传成功后需要调用success(url)把地址返回编辑器