Simditor 是團隊協作工具 Tower 使用的富文本編輯器，基于jQuery開發。

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

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

安裝simditor和jquery

$ npm install simditor -S

$ npm install jquery -S

封裝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>

使用<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替換為正確的參數名就行

5.輸出html到頁面

將數據庫中html代碼輸出到頁面上時，雙大括號會將數據解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，需要使用?v-html?指令：

版權聲明：本文為博主原創文章，未經博主允許不得轉載。https://blog.csdn.net/liuzhumin123/article/details/79828224

總結

以上是生活随笔為你收集整理的vuejs集成simditor的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。