Simditor學習--vuejs集成simditor

嘮叨

　　由於項目須要我本身研究了和集成在vue方便之後再使用，詳情官方文檔在這裏。但願你們有好的建議提出讓我繼續改進。

simditor介紹

Simditor 是團隊協做工具 Tower 使用的富文本編輯器，基於jQuery開發。

相比傳統的編輯器它的特色是：

1. 功能精簡，加載快速
2. 輸出格式化的標準 HTML
3. 每個功能都有很是優秀的使用體驗
4. 兼容的瀏覽器：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,//是否容許粘貼上傳圖片，依賴  選項，僅支持 Firefox 和 Chrome 瀏覽器。
                    tabIndent: true,//是否在編輯器中使用  鍵來縮進
                });
                this.editor.on("valuechanged", function(e, src) {
                    _this.value = _this.editor.getValue()
                })//valuechanged是simditor自帶獲取值得方法
            }
        }
    }uploadtab

圖片粘貼上傳的地址默認爲

 

 須要修改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組件就封裝好了，本人新手純手打若是有什麼很差，請各位多多指導。