Vue项目中---文本框中加入simditor编辑器

官网地址:

https://simditor.tower.im

效果图

使用步骤

1.安装环境(建议按此版本安装，其他版本可能不兼容)

//安装simditor
npm install simditor@2.3.6
//卸载simditor
npm uninstall simditor

//安装jquery
npm uninstall jquery
//卸载jquery
npm install jquery@3.4.1

2.代码

封装的组件代码

<template>
  <div class="simditor">
    <textarea :id="id"></textarea>
  </div>
</template>
<script>
import $ from "jquery";
import Simditor from "simditor";
import "simditor/styles/simditor.css";
export default {
  name: "simditor",
  data() {
    return {
      editor: "",
    };
  },
  props: {
    id: "", //这里传入动态id，一个页面能使用多个编辑器
    options: {
      //配置参数
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    let vm = this;
    this.editor = new Simditor(
      Object.assign(
        {},
        {
          textarea: $(`#${vm.id}`),
        },
        this.options
      )
    );
    this.editor.on("valuechanged", (e, src) => {
      this.valueChange(e, src);
    });
  },
  methods: {
    valueChange(e, val) {
      this.$emit("change", this.editor.getValue());
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

组件使用

<template>
  <div class="index">
    <simditor :options="options" id="1" @change="change" style="width: 400px">
    </simditor>
  </div>
</template>
<script>
import Simditor from "../components/Simditor";
export default {
  name: "index",
  data() {
    return {
      content: "",
      //工具栏配置项
      options: {
        placeHolder: "this is placeHolder",
        toolbarFloat: false,
        toolbar: [
          "bold",
          "italic",
          "title",
          "link",
          "image",
          "ol",
          "ul",
          "indent",
          "outdent",
          "alignment",
          // "underline",
          // "strikethrough",
          // "fontScale",
          "color",
          // "|",
          // "blockquote",
          // "code",
          // "table",
          // "|",
          // "hr",
          // "|",
        ],
        pasteImage: true, //占位符(图片)
        upload: {
          url: `http://...`, //文件上传的接口地址
          params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
          fileKey: "file", //服务器端获取文件数据的参数名
          connectionCount: 3, //同时上传多少张图片
          leaveConfirm: "正在上传文件",
        },
      },
    };
  },
  components: {
    Simditor,
  },
  methods: {
    change(val) {
      console.log(val); //以html格式获取simditor的正文内容
    },
  },
};
</script>


<style >
.simditor .simditor-body {
  min-height: 150px !important;
}
.simditor {
  border: 1px solid #eeeeee !important;
}
</style>