上周项目用了许久的百度编辑器Ueditor应为太久不维护要更换编辑器了。 预研后选择stackedit作为新的编辑器（虽然也好久没维护了），但耐不住功能比Ueditor多啊，后面还能进行二次开发。
现在总结下自己遇到的坑：
1、编辑器自己有开后端去运行，要把他改造成纯前端编辑器。
怎么办呢，只能从头 git 代码下来修修改改了。找到后端运行代码，把里面逻辑修改成发送给后端或者改成 localstorage 本地存储。
2、vue-cli版本太低。
打开项目，发现vue-cli版本是2.6以下的，我的项目是2.6以上的，难受。只能去掉 build 文件，后面自己重新在 vue.config.js 文件进行配置。我大概看了下，都是关于编辑器里面的信息优化，提升页面交互和数据传输速度，正好可以学习学习。
3、编译运行时出问题
- 在 yml 文件里无法识别 '#' 符号 在编辑器里面是通过 yml 文件来存储 常量和配置数据的，优点是结构清晰，易于阅读。而我的项目是通过 utils 文件夹下的 const.js 来存储常量的，两者相较虽然 yml 文件存储常量配置好，但需要依赖，却需要再学 yml 的语法。 查了下 '#' 是 yml 文件的注释符，按理来说应该是没问题，但报错了。在 '#' 注释后面再加 '#' 或者把注释全删了还是有问题，于是觉得是少了什么依赖。找到 webpack 配置文件，果然，少了 raw-loader 这个依赖。 在本地vue.config.js 文件新增
rules: [
{
test: /\.(md|yml|html)$/,
loader: 'raw-loader'
}
]
- 无法识别 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文件删掉，问题解决。
