文档地址：https://simditor.tower.im/docs/doc-usage.html
父组件：
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: config.baseUrl + `sys/policy/uploadPics`, // 文件上传的接口地址(这个工具后端给的接口填写)
params: { token: getToken('access_token') }, // （这是额外的参数）键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
fileKey: 'files', // 服务器端获取文件数据的参数名
connectionCount: ,
leaveConfirm: '正在上传文件'
}
}富文本编辑器组件：
<template>
<div class="simditor">
<textarea :id="id"></textarea>
</div>
</template>
<script>
import Simditor from 'simditor'
import $ from 'jquery'
import 'simditor/styles/simditor.css'
import config from '@/config/index' export default {
name: 'lin-ueditor',
props: {
options: { // 配置参数
type: Object,
default() {
return {}
}
},
policyContent: {
type: String,
default: ''
}
},
data () {
return {
id: new Date().getTime(), // 这是为了在同一个组件里放多个富文本编辑器，而加的标记
editor: ''
}
},
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)
})
// 修改上传后图片的路径
this.editor.uploader.on('uploadsuccess', function(e, file, result) {
var $img, $mask, msg
if (!file.inline) {
return
}
$img = file.img
$img.removeData('file')
$img.removeClass('uploading')
$mask = $img.data('mask')
if ($mask) {
$mask.remove()
}
$img.removeData('mask')
if (result.success === false) {
msg = result.msg || '上传被拒绝了'
this.$message.error(msg)
$img.attr('src', this.defaultImage)
} else {
// 修改图片路径和样式
$img.attr({
src: config.baseUrl + result.file_path, // 路径
width: ,
height:
}) // 这里就是成功后的替换，将这个改成了我们所使用的字段名file
}
}
)
this.setContentValue(this.policyContent)
},
methods: {
// 获取富文本编辑器的值
valueChange(e, val) {
this.$emit('editorContentValue', this.editor.getValue())
},
// 给富文本编辑期赋值
setContentValue (val) {
this.editor.setValue(val)
}
}
}
</script> <style scoped> </style>