在 Vue 项目中嵌入编辑器的坑与前端工程化解决方案
2023-09-11 10:40:37
上周项目中使用了许久的百度编辑器 Ueditor，但由于它已许久不维护，我们决定更换编辑器。经过预研，我们选择了 Stackedit 作为新的编辑器，虽然它也已经有一段时间没有维护了，但是它的功能比 Ueditor 更加丰富，并且在后面还可以进行二次开发。
在迁移过程中，我们遇到了一个问题：编辑器本身需要有一个后端来运行，而我们需要把它改造成一个纯前端编辑器。解决方法是，只能从头开始。
坑一：编辑器无法加载
在将 Stackedit 嵌入到 Vue 项目中时，我们遇到了第一个问题：编辑器无法加载。经过一番排查，我们发现问题出在 webpack 的配置上。我们使用了 webpack 的 externals 配置来排除一些库，而 Stackedit 使用的库恰好也在其中。
为了解决这个问题，我们需要将 Stackedit 使用的库从 externals 配置中排除。具体来说，需要在 webpack.config.js 文件中找到 externals 配置，并将其修改为：
externals: {
"jquery": "externals: {
"jquery": "$",
"vue": "Vue",
"stackedit": "Stackedit"
}
quot;,
"vue": "Vue",
"stackedit": "Stackedit"
}
坑二：编辑器样式无法加载
在解决完第一个问题之后，我们又遇到了第二个问题：编辑器样式无法加载。经过一番排查，我们发现问题出在 css-loader 的配置上。我们使用了 css-loader 的 localIdentName 配置来为 CSS 类名添加前缀，而 Stackedit 的样式表中使用了没有前缀的 CSS 类名。
为了解决这个问题，我们需要将 css-loader 的 localIdentName 配置修改为：
localIdentName: "[local]_[hash:base64:5]"
这样一来，就可以为 CSS 类名添加前缀，而不会影响 Stackedit 的样式表。
坑三：编辑器功能无法使用
在解决完前面两个问题之后，我们又遇到了第三个问题：编辑器功能无法使用。经过一番排查，我们发现问题出在 Vue 的生命周期钩子上。我们使用了 Vue 的 mounted 钩子来初始化编辑器，而 Stackedit 的初始化函数需要在 DOMContentLoaded 事件之后执行。
为了解决这个问题，我们需要将 Vue 的 mounted 钩子修改为 updated 钩子。具体来说，需要在 Vue 组件的 mounted 方法中添加以下代码：
this.$nextTick(() => {
// 初始化编辑器
})
这样一来，就可以在 DOMContentLoaded 事件之后初始化编辑器，从而解决功能无法使用的问题。
前端工程化实践
在迁移 Stackedit 的过程中，我们也积累了一些前端工程化的经验。
首先，我们使用了 webpack 来构建项目。webpack 是一个现代化的 JavaScript 打包工具，它可以将多个 JavaScript 模块打包成一个文件，从而提高页面的加载速度。
其次，我们使用了 css-loader 来处理 CSS 文件。css-loader 可以将 CSS 文件解析成 JavaScript 模块，从而可以将其导入到 Vue 组件中。
最后，我们使用了 Vue 的生命周期钩子来管理编辑器的初始化和销毁。Vue 的生命周期钩子可以让我们在组件的不同阶段执行不同的操作，从而可以更好地控制组件的行为。
通过使用这些前端工程化实践，我们可以提高项目的开发效率和质量。
总结
在本文中，我们分享了在 Vue 项目中嵌入编辑器的经验，并介绍了前端工程化实践的重要性。我们希望这些经验能够对其他 Vue 开发者和前端工程师有所帮助。
在未来的工作中，我们还计划对 Stackedit 进行二次开发，以满足我们项目的需要。我们也会继续探索新的前端工程化实践，以提高项目的开发效率和质量。
