将summernote在vue项目中封装成组件

Posted 2020-11-25 fqh123

记得移入依赖

<!-- 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: ‘‘
        },
    },
    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},

 

<SummerNote v-model="aaa" />
        
 <SummerNote v-model="bbb" />

 

。