Simditor已经好久没更新了，issue也关闭，那为什么还要用呢，因为喜欢！

下面总结一下使用方法

安装（两种安装方式）

1.通过bower和npm安装（不能使用最新版本

#注意 版本号只能小于等于2.3.221️⃣
npm install simditor@2.3.22

2.普通方式引入(可以使用最新版本2.3.28

    <link rel="stylesheet" type="text/css" href="static/simditor/simditor.css" />
    <link rel="stylesheet" type="text/css" href="static/simditor/html/simditor-html.css" />

    <script type="text/javascript" src="static/simditor/jquery.min.js"></script>
    <script type="text/javascript" src="static/simditor/module.js"></script>
    <script type="text/javascript" src="static/simditor/hotkeys.js"></script>
    <script type="text/javascript" src="static/simditor/uploader.js"></script>
    <script type="text/javascript" src="static/simditor/simditor.js"></script>

    <script type="text/javascript" src="static/simditor/html/beautify-html.js"></script>
    <script type="text/javascript" src="static/simditor/html/simditor-html.js"></script>

使用

下面以vue为例2️⃣，封装simditor.vue组件

<template>
  <div class="simditor">
    <textarea :id="id"></textarea>
  </div>
</template>
<script>
import $ from 'jquery'
import 'simple-module';
import 'simple-hotkeys';
import 'simple-uploader';
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 scoped>
</style>

使用

<template>
  <div id="app">
    <simditor
        id="test1"
        :options="options"
        @change="change">
    </simditor>
  </div>
</template>

<script>
import Simditor from './components/simditor'
export default {
  name: 'app',
  data(){
    return {
      content:'',
      options: {
        placeHolder: 'this is placeHolder',
        toolbarFloat: false,
        toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],//, 'html'
        pasteImage:true,
        tabIndent: true,
        upload:{
          url : 'http://...', //文件上传的接口地址
          params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
          fileKey: 'file', //服务器端获取文件数据的参数名
          connectionCount: 3,
          leaveConfirm: '正在上传文件'
        }
      }
    }
  },
  components: {
    Simditor
  },
  methods:{
    change(val){
      this.content=val;
      console.log(val)  //以html格式获取simditor的正文内容
    },
  },
}
</script>

设置默认值

<simditor id="e1" ref="e1" :options="simditorOptions" @change="simditorChange"></simditor>

this.$refs.e1.editor.setValue(123)

参考

1️⃣ https://github.com/mycolorway/simditor/pull/540

2️⃣ https://blog.csdn.net/liuzhumin123/article/details/79828224