生活随笔
收集整理的这篇文章主要介绍了
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的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
