Vue项目嵌入编辑器的坑和前端工程化解决方案

上周项目用了许久的百度编辑器Ueditor应为太久不维护要更换编辑器了。 预研后选择stackedit作为新的编辑器(虽然也好久没维护了),但耐不住功能比Ueditor多啊,后面还能进行二次开发。

现在总结下自己遇到的坑:

1、编辑器自己有开后端去运行,要把他改造成纯前端编辑器。

怎么办呢,只能从头 git 代码下来修修改改了。找到后端运行代码,把里面逻辑修改成发送给后端或者改成 localstorage 本地存储。

2、vue-cli版本太低。

打开项目,发现vue-cli版本是2.6以下的,我的项目是2.6以上的,难受。只能去掉 build 文件,后面自己重新在 vue.config.js 文件进行配置。我大概看了下,都是关于编辑器里面的信息优化,提升页面交互和数据传输速度,正好可以学习学习。

3、编译运行时出问题
  1. 在 yml 文件里无法识别 '#' 符号 在编辑器里面是通过 yml 文件来存储 常量和配置数据的,优点是结构清晰,易于阅读。而我的项目是通过 utils 文件夹下的 const.js 来存储常量的,两者相较虽然 yml 文件存储常量配置好,但需要依赖,却需要再学 yml 的语法。 查了下 '#' 是 yml 文件的注释符,按理来说应该是没问题,但报错了。在 '#' 注释后面再加 '#' 或者把注释全删了还是有问题,于是觉得是少了什么依赖。找到 webpack 配置文件,果然,少了 raw-loader 这个依赖。 在本地vue.config.js 文件新增
rules: [
    {
        test: /\.(md|yml|html)$/,
        loader: 'raw-loader'
    }
]
  1. 无法识别 scss 文件里面的变量 老问题了,在全局引入,并在vue.config.js文件写入:
css: {
    laoderOptions: {
        sass: {
            prependData: `
                @import "...";
            `
        }
    }
}

注意sass-loader依赖版本不同,可能 options属性名也不一样,久的是data,新的改为prependData了。 还有引入的后面要加上 ' ; ' ,不然会报错。

4、编译成功,打开页面,发现原有项目样式被污染了。

打开style文件夹,哦豁,有个app.scss文件。要嵌入的项目是没有 scoped 的,嵌入的编辑器也是,还有个app.scss全局样式。怎么办呢,有两个解决办法。

第一种比较直接暴力但费时间了。把编辑器 css 文件全删了,自己在vue文件里面写

第二种就优雅了,思路和更换主题颜色思路差不多,通过 style-loader 依赖的useable属性来实现(vue项目有的用vue-style-loader去解析,但vue-style-loader好久前简化了依赖,就把useable的API也删了) 思路是通过webpack来实现按需加载需要的css文件。 在vue.config.js 文件添加:

rules: [
    {
        test: /\.useable.css$/,
        use: [
            { loader: 'style-loader/useable' },
            'css-loader',
        ]
    }
]

之后在路由文件识别到加载编辑器再

import style from '@/...'
let use = null
router.beforeEach(to, from, next) => {
    if (to.name === '...' && !use) {
        style.use()
        use = style
    } else {
        style.unuse()
        use = null
    }
}

当路由跳转到编辑器页面是加载编辑器的css文件,跳出再把相关css文件删掉,问题解决。

原文链接:juejin.im

上一篇:eventBus实现对象之间通信
下一篇:Express中间件原理解析与实现

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    23 天前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    1 个月前
  • 🚩Vue源码——如何监听数据变化

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue 是用数据来驱动来生成视图...

    6 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    6 个月前
  • 🏆 掘金技术征文|双节特别篇 vue3——composition API

    vue3刚出测试版的时候尝过一次,后来学了react,才尝出点味道来,现在再尝一遍,先从重要的compositon api入手! composition api 主要是把之前vue的核心api暴露出来...

    13 天前
  • 🎉🎉🎉 一个基于vue3+vite+ts的完整项目

    VUE VBEN ADMIN2.0 介绍 vue-vben-admin-2.0 是一个全新的开源系统,基于ant-design-vue2.x,typescript4,vue3,vite实现的 ...

    10 天前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    3 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    1 个月前
  • (记录)vue、element表格首行跑到最后一行去了

    问题 项目中,我们一般会对 Element 进行二次封装,因为这样更好的全局管理组件,一处改动即可全局改动。比如你有十个表格,因为表格需要新增一个小功能(比如:右上角新增一个控制列显示的按钮),这时...

    25 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    6 个月前

官方社区

扫码加入 JavaScript 社区