Simditor學習--vuejs整合simditor

標籤：官網   val   bower   團隊   載入   官方文檔   bow   time   介紹   

嘮叨

　　因為項目需要我自己研究了和整合在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,//是否允許粘貼上傳圖片，依賴 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組件就封裝好了，本人新手純手打如果有什麼不好，請各位多多指導。

 

Simditor學習--vuejs整合simditor