將summernote在vue項目中封裝成組件

記得移入依賴

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

然后開始封裝我們的組件

 

 

<template>
<div class="summernoteBox" v-if="true">
    <div :id="id"></div>
</div>
</template>
<script>
import tools from '@/js/tools.js';
export default {
    props:{
        value: {
            type: String,
            default: ''
        },
        id:{
            type:String,
            default:'summerNOte'+ new Date().getTime(),
        }
    },
    watch: {
       id:{
           handler(newval){
            //    console.log(newval)
           },
           immediate:true
       } 
    },
    data(){
        return{
            // id:'summerNOte'+ new Date().getTime(),
        }
    },
    created(){
    },
    mounted() {
        var self=this;
        self.summernoteInit().then(()=>{
            // summernote發生改變
            $('#'+ self.id).on('summernote.change', function(we, contents, $editable) {
                self.summerNoteChange();
            });
            //初始賦值
            $('#'+ self.id).summernote('code', self.value);
        })
    },
    methods: {
        summernoteInit(){//編輯器初始化
            var self=this;
            return new Promise(resolve=>{
                //初始化摘要內容富文本編輯器
                $('#'+ self.id).summernote({
                    lang: 'zh-CN',//語言
                    placeholder: '請輸入內容',//提示語
                    height: 200,//高度
                    width: 'auto',//寬度  也可以指定寬度
                    htmlMode: true,
                    toolbar: [//工具欄配置
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        
                        ['font',['strikethrough','superscript','subscript']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['fontsize',['fontsize']],
                        ['fontname',  tools.isPC()?['fontname']:[]],
                        ['insert', []],
                        // ['view', ['fullscreen']]
                    ],
                    fontSizes: ['12', '14', '18','20', '24', '36'],//字體大小配置
                    fontSizeUnits: ['px'],
                    fontNames: [//字體類型配置
                        '宋體','微軟雅黑','楷體','黑體','隸書'
                    ],
                    callbacks: {//回調函數
                        onSubmit: function() {
                            // vm.richContent = $('#summernote').summernote('code')
                        },
                        onKeyup:function(){
                            //
                        }
                    }
                });
                resolve();
            });
            
        },
        summerNoteChange(){//富文本編輯器發生改變
            var self=this;
            self.$emit('input',$('#'+ self.id).summernote('code'));
        }
    },
}
</script>
<style scoped>
.summernoteBox /deep/ .note-editable ul{
    padding:0 20px;
}
.summernoteBox /deep/ .note-editable ul li{
    list-style:disc;
}
.summernoteBox /deep/ .note-editable ol li{
    list-style:decimal;
}
.summernoteBox /deep/ .note-editable ol{
    padding:0 20px;
}
</style>

 

在頁面中使用

import SummerNote from '@/components/summerNote.vue';

components:{SummerNote},

 

要傳id，放置自動生成的id一樣，會只顯示一個summernote編輯器

<SummerNote :id="'summerNote' + new Date().getTime()" v-model="text" />
<SummerNote :id="'summerNote' + new Date().getTime()" v-model="text1" />

 

 

。