标签：官网 val bower 团队 加载 官方文档 bow time 介绍
因为项目需要我自己研究了和集成在vue方便以后再使用，详情官方文档在这里。希望大家有好的建议提出让我继续改进。
Simditor 是团队协作工具 Tower 使用的富文本编辑器，基于jQuery开发。
相比传统的编辑器它的特点是：
点击这里下载的压缩文件。你也可以通过bower或者npm安装simditor：
$ npm install simditor$ bower install simditor这里主要讲的集成到vuejs，其他引入方式自行翻阅官网。
html模版如下：
<textarea :id="textnames" > <p>{{value}}</p> </textarea>
我们只需要他接收父组件的值和传值回父组件，所以不需要太复杂。
js模版如下：
import Simditor from ‘simditor‘ export default { props: [‘value‘], data() { return { textnames: new Date().getTime(),//这里防止多个富文本发生冲突 editor:‘‘,//保存simditor对象 toolbar: [‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘, ‘color‘, ‘|‘, ‘ol‘, ‘ul‘, ‘blockquote‘, ‘code‘, ‘|‘, ‘link‘, ‘image‘, ‘|‘, ‘indent‘, ‘outdent‘ ]//自定义工具栏 } }, ready() { this.createEditor() }, methods: { createEditor() { var _this = this this.editor = new Simditor({ textarea: $(‘#‘ + _this.namess), toolbar: _this.toolbar, upload: { url: apic + ‘/api/CommAnnex/UploadFiles‘, //文件上传的接口地址 // params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交 fileKey: ‘fileDataFileName‘, //服务器端获取文件数据的参数名 connectionCount: 3,//同时上传个数 leaveConfirm: ‘正在上传文件‘ }, pasteImage: true,//是否允许粘贴上传图片，依赖upload选项，仅支持 Firefox 和 Chrome 浏览器。 tabIndent: true,//是否在编辑器中使用tab键来缩进 }); this.editor.on("valuechanged", function(e, src) { _this.value = _this.editor.getValue() })//valuechanged是simditor自带获取值得方法 } } }
需要修改upload.js文件，找到下面代码
_this.trigger(‘uploadprogress‘, [file, file.size, file.size]);
_this.trigger(‘uploadsuccess‘, [file, newresult]); return $(document).trigger(‘uploadsuccess‘, [file, result, _this]);
修改为以下代码即可
var newresult = JSON.parse("{\"file_path\":\""+ result.Data[0].FileUrl +"\"}"); //获取正确地址_this.trigger(‘uploadprogress‘, [file, file.size, file.size]);
_this.trigger(‘uploadsuccess‘, [file, newresult]); return $(document).trigger(‘uploadsuccess‘, [file, newresult, _this]);
<simditor :value.sync=‘value‘ v-ref:simditor></simditor>
如果需要设置富文本框值就使用以下代码
this.$refs.simditor.editor.setValue(data.describe)
大概simditor组件就封装好了，本人新手纯手打如果有什么不好，请各位多多指导。
标签：官网 val bower 团队 加载 官方文档 bow time 介绍
原文地址：http://www.cnblogs.com/ychl/p/6016043.html
