您现在的位置是：网站首页>软件开发>前端技术栈>vuevue

vue2.X版本使用summernote的坑

风口下的猪2022-08-10【vue】

简介

网上一大堆summmernote在vue中的使用，大部分建议

（1）使用npm安装jQuery、bootstrap、font-awesome、codemirror、summernote的包及依赖。

（2）同时vue.config.js中配置jquery

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
  }
},

（3）main.js中引入这些js/css

（4）封装summernote.vue组件使用

最后问题一大堆

（1）jQuery not defined

解决方法是修改node_modules/summernote/summernote.js中的JQuery为jquery

（2）提示rouuter.js等常规js找不到

解决方法是将上述vue.config.js中resolve的alias->'@'相关配置去掉

（3）Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)

解决方法是封装的summernote组件中，不要在import后写$('#summernote')，而要在mounted()周期函数中使用$('#summernote')

（4）编辑器样式冲突且混乱

解决方法是果断放弃npm相关包并引用相关包的js/css，改为在根组件index.html中通过cdn的方式进行



上完整解决方案

（1）vue.config.js配置jquery

module.exports = {
  assetsDir:'static',
  publicPath: './',
  configureWebpack: {
    resolve: {
      alias: {
        // '@': resolve('src'),
        'jquery': path.resolve(__dirname, './node_modules/jquery/src/jquery'),
      },
    },


（2）根组件public/index.html中cdn方式引入相关资源

    <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>


（3）封装summernote.vue

<template>
<div class="summernoteBox">
    <div id="summernote"></div>
</div>
</template>
<script>
import domain from "@/lib/config/domain.js";
export default {
    props:{
        value: {
            type: String,
            default: ''
        },
    },
    data(){
        return{
           
        }
    },
    created(){
    },
    mounted() {
        var self=this;
        self.summernoteInit().then(()=>{
            // summernote发生改变
            $('#summernote').on('summernote.change',(we, contents, $editable)=>{
                self.summerNoteChange();
            });
            //初始赋值
            $('#summernote').summernote('code', self.value);
        })
    },
    methods: {
        summernoteInit(){//编辑器初始化
            var self=this;
            return new Promise(resolve=>{
                //初始化摘要内容富文本编辑器
                $('#summernote').summernote({
                    lang: 'zh-CN',//语言
                    placeholder: '请输入内容',//提示语
                    height: 500,//高度
                    width: 'auto',//宽度  也可以指定宽度
                    htmlMode: true,
                    fontSizes: ['12', '14', '18','20', '24', '36'],//字体大小配置
                    fontSizeUnits: ['px'],
                    fontNames: [
                        '宋体','微软雅黑','楷体','黑体','隶书'
                    ],
                    callbacks: {//回调函数
                        onSubmit: function() {
                            // vm.richContent = $('#summernote').summernote('code')
                        },
                        onKeyup:function(){
                            //
                        },
                        onImageUpload: function (files) {
                            var syformData = new FormData();
                            syformData.append('file', files[0]);
                            $.ajax({
                                url: domain.domain_api+ "/admin/upload/upload",//上传图片文件处理地址,
                                type: "POST",
                                data: syformData,
                                dataType: 'JSON',
                                processData: false,
                                contentType: false,
                                success: function (res) {
                                    console.log(res.data[0])
                                    if(res.code!=1000){
                                        alert(res.msg);
                                    }else{
                                        $('#summernote').summernote('editor.insertImage',domain.domain_source+''+res.data[0]);
                                    }
                                },
                                error: function (error) {
                                    alert('图片上传出错，文件过大或者其他情况');
                                }
                            });
                        }
                    }
                });
                resolve();
            });
           
        },
        summerNoteChange(){//富文本编辑器发生改变
            this.$emit('input',$('#summernote').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>






很赞哦！ (0)

上一篇：vue项目中通过CDN方式引入外包js/css

下一篇：vue中使用html2canvas的坑（1）网络图片空白

  • 软件开发
  • 素质要求
  • 计算机基础
  • 架构
  • 安全
  • 性能
  • 运维
  • 尾页
  • 数据库
  • 开发终端
  • 语言基础
  • 项目管理
  • 产品设计
  • 系统
  • 工作规范
  • 计算机网络
  • 前端技术栈
  • 数据结构
  • 计算机组成原理
  • 后端技术栈
  • 性能优化
  • 安全设计
  • 常见模块
  • 计算机操作系统
  • 服务器
  • python
  • MySQL
  • thinkphp
  • PHP
  • Java
  • JavaScript
  • Windows
  • Linux
  • 特效
  • indexedDB
  • vue
  • 淘宝联盟
  • Ionic
  • Angular
  • 微信小程序
  • 支付宝小程序
  • uni-app
  • css/sass/less
  • 支付
  • socket
  • 爬虫
  • web性能优化
  • 消息推送
  • CVM
  • sqlite
  • Redis
  • 前端基础
  • 基础
  • element
  • Nginx
  • yii2
    • /ponder/index.php/index/catelist/catelist/cateid/10.html

    相关阅读 (同一栏目)

    << 第 /页

    栏目目录

    软件开发(47)MySQL(25)
    thinkphp(89)PHP(33)
    JavaScript(39)项目管理(3)
    产品设计(5)Linux(15)
    计算机网络(6)计算机组成原理(1)
    微信小程序(7)安全设计(4)
    uni-app(70)淘宝联盟(4)
    支付(7)socket(18)
    计算机操作系统(4)爬虫(5)
    web性能优化(5)消息推送(9)
    CVM(2)Redis(27)
    indexedDB(5)vue(57)
    特效(2)css/sass/less(5)
    基础(1)element(1)
    Nginx(6)yii2(19)

    标签云

    站点信息

    • 文章统计：528篇
    • 移动端访问：扫码进入SQ3R

    申请链接友情链接