Simditor学习--vuejs集成simditor

唠叨

　　因为项目需要我自己研究了和集成在vue方便以后再使用，详情官方文档在这里。希望大家有好的建议提出让我继续改进。

simditor介绍

Simditor 是团队协作工具 Tower 使用的富文本编辑器，基于jQuery开发。

相比传统的编辑器它的特点是：

功能精简，加载快速
输出格式化的标准 HTML
每一个功能都有非常优秀的使用体验
兼容的浏览器：IE10+、Chrome、Firefox、Safari。

Vue集成

　　下载：

　点击这里下载的压缩文件。你也可以通过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]);

　　父页面引用：

　　如果需要设置富文本框值就使用以下代码

　　this.$refs.simditor.editor.setValue(data.describe)

大概simditor组件就封装好了，本人新手纯手打如果有什么不好，请各位多多指导。

巴特西

Simditor学习--vuejs集成simditor

唠叨

simditor介绍

Vue集成

下载：

初始化：

父页面引用：

最新文章

热门文章