Xi-editor NPM | npm.io

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