vuejs集成simditor

时间：2024-05-31 07:43:51

Simditor 是团队协作工具 Tower 使用的富文本编辑器，基于jQuery开发。

下面讲的是集成simditor到vuejs中：

simditor官方文档：http://simditor.tower.im/docs/doc-config.html

  1. 安装simditor和jquery

    $ npm install simditor -S

    $ npm install jquery -S

  2. 封装simditor.vue组件
    <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 scoped>
</style>
  3. 使用
    <template>
  <div class="index">
    simditor编辑器
    <br>
    <simditor
      :options="options"
      @change="change">
    </simditor>
  </div>
</template>
<script>
  import Simditor from '../components/Simditor'
  export default {
    name: 'index',
    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',
          ],
          pasteImage:true,
          upload:{
            url : `http://...`, //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'file', //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
          }

        }
      }
    },
    components: {
      Simditor
    },
    methods: {
      change(val){
        console.log(val)  //以html格式获取simditor的正文内容
      }
    }
  }
</script>

4.上传图片说明

上传图片成功后图片是被转化成base64的，但是我们希望图片是以http的形式展现的。

在安装的simditor.js中可以看到下面这部分代码，所以我们只要和后端约定好返回图片url的参数名为file_path即可。

当然如果不是npm安装的simditor我们可以手动修改simditor.js替换为正确的参数名就行

vuejs集成simditor

5.输出html到页面

将数据库中html代码输出到页面上时，双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令：

vuejs集成simditor


版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.****.net/liuzhumin123/article/details/79828224

相关文章