生活随笔
收集整理的這篇文章主要介紹了
vuejs集成simditor
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
