Document

--- theme: cyanosis --- 实现一个简易版的网页编辑器，没有智能提示，也不会自动高亮标签（需要手动高亮）用的是 vue+ [Highlight.js](https://github.com/highlightjs/highlight.js) + [js-beautify](https://github.com/beautify-web/js-beautify) 效果如下图 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27c0bcb96d6a4906aea51ab725cd2fa0~tplv-k3u1fbpfcp-zoom-1.image) ## js 实现代码格式化首先我们会用到 `

`和 `` 标签，包裹我们要展示的 html 代码，因为只有这样他们才能保持换行/缩进等格式化代码用到的是 [js-beautify](https://github.com/beautify-web/js-beautify) js-beautify 是分别为 js,css,html 提供了 3 个 JS，不必一次性引入那么多不需要的内容，比如我要实现的效果只需要引入 html 的即可 - cdn 方式： ```html ``` - npm 方式 ```shell npm install js-beautify@next ``` ```js import { js_beautify, css_beautify, html_beautify } from 'js-beautify' ``` ### 调用 api ```html

``` 配置项的参数有很多，具体可以参照 GitHub 提供的参数配出相应的格式 **注意** pre 标签后，`不要`有空格和回车，不然也会渲染出来，也一定要有 `pre` 标签，不然代码缩进的空格也渲染不出来 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f368e10e43024b38b81feb0e951a7a3d~tplv-k3u1fbpfcp-zoom-1.image) 小小吐槽一下 `html_beautify`，感觉这个 api 有点鸡肋，还不如 innerHtml 来得快，比如 ```html

``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13ddb22e342a45cdb81cec863f9b3f32~tplv-k3u1fbpfcp-zoom-1.image) 也能达到一样的效果，并且还少引入了一个库~ ## 实现代码高亮用到的就是 [highlight.js](https://github.com/highlightjs/highlight.js) [highlight.js 中文网](https://www.fenxianglu.cn/highlight.html)、[highlight.js 官网](https://highlightjs.org/) ### 引入 - cdn 模式 ```html ``` - npm 模式 ```js npm install highlight.js // highlight.js 代码高亮指令 import Hljs from "highlight.js"; import "highlight.js/styles/stackoverflow-light.css"; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件 ``` ### 用法在对应的 `code/pre` 标签上，标注上对应的语言，比如： ```html

``` 在页面渲染好了之后，执行下面的方法，就可以高亮代码了 ```js hljs.highlightAll() ``` 如果节点是往后渲染，或者你只想更新某个代码块，可以用下面的方法 ```js hljs.highlightBlock(document.querySelector('#html_code')) ``` 更多的还有 `hljs.config` 等 api，可以翻一下文档 ## highlight.js 高亮代码不换行如下图，刚才用 js-beautify 还搞的好好的，高亮后换行都没了 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd80f9b4e9524a18b88a7e0e81cb3719~tplv-k3u1fbpfcp-zoom-1.image) 有文章说是 pre 的 css 问题，其实研究一下高亮后的 html，其实和 pre 没多大关系，如果你没写`pre`标签那就真的有关系看下正确示范： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a18dc185e23c4ec59294928a8c768bdc~tplv-k3u1fbpfcp-zoom-1.image) 怎么做到的？把 `innerText`，改为 `innerHTML`。下面仔细说说 ### innerText 和 innerHTML 有什么区别 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c51c794e3c14092b8f2d0a2c9fbbdc0~tplv-k3u1fbpfcp-zoom-1.image) 渲染后界面看上去确实是一样的，改换行的换行，改空格的空格，不过内部的 html 就很不一一样。 - **innerText** 方法显然把代码块有换行的地方帮我们替换了`
`标签 - **innerHtml** 方法则是把 html 代码给渲染了出来 `highlight.js` 执行高亮的时候是针对 dom 节点，然后改变 dom 节点插入标签进行高亮的，显然把代码中的 `
` 标签给过滤了（因为看到文档有一个是否使用`
`标签的配置，所以自身的 br 标签就和他冲突了，纯属个人猜测） ### 解决 innerHTML 渲染为真实节点的问题 ```js html = html.replace(//g, '>') html = html.replace(//g, '>') ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bf75c9e096a40059dbf0c3ad373fe55~tplv-k3u1fbpfcp-zoom-1.image) 也是 innerHTML 和 innerText 的区别，innerHTML 时会进行编码重新转换，把 `<>` 重新渲染为字符，innerText 则是字符原样输出别看第一段代码块没换行，其实中间的空格符隐藏了 `\n`。所以这也是为啥强调要用 `pre` 和 `code` 标签的原因，普通的`div`或者其他标签都会把`\n`和连续的空格给过滤掉。 --- ### 上色后都是 span 标签，是怎么做到换行的？明白了上面的内容后，再来看一边上色效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47db66546c4742509237ae9f41a719c7~tplv-k3u1fbpfcp-zoom-1.image) 代码块如下： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4d77a7acc0f4c40b1793410256e066a~tplv-k3u1fbpfcp-zoom-1.image) 再怎么看，这都是 `span` 标签，那 span 标签是怎么控制什么时候换行，什么时候不换行，纯 css 是做不到的，答案还是 `\n` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07067887721d4619a9e5a04ff93db77b~tplv-k3u1fbpfcp-zoom-1.image) 所以明白为什么 br 无效 \n 有效，为啥要用 innerHTML 了把 ## vue 中使用 highlight.js 使用方式有很多种，可以用上面的 `hljs` 的 api 进行。也可以用 vue 的特性（自定义指令）来完成这一系列的东西 ```js import Hljs from 'highlight.js' let Highlight = {} // 自定义插件 Highlight.install = function(Vue) { // 自定义指令 v-highlight Vue.directive('highlight', { // 被绑定元素插入父节点时调用 inserted: function(el) { Hljs.highlightBlock(el) }, // 指令所在组件的 VNode 及其子 VNode 全部更新后调用 componentUpdated: function(el) { Hljs.highlightBlock(el) } }) } export default Highlight ``` 指令写好后记得要用 Vue 注册一下： ```js import Vue from 'Vue' import Highlight from '上面那段代码的对应目录' Vue.use(Highlight) // 使用的时候 这里写代码 ``` ## 用指令使用 js_beautify 结合上面的指令，直接封装一个，先格式化代码，在高亮代码的指令! 贪图方便我就不用项目了，直接建了个 html，用 cdn 引入对应的库实现了一个 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1699a2004e04a71bb9876f988706834~tplv-k3u1fbpfcp-zoom-1.image) 核心的要点上面也都说过了，当然代码还有更好的实现方式和更多的拓展性，剩下的就多看文档了~ ```html Document


      html格式化
第二行


      body{background:red;width:100%;}


      var test = 'a';function(){console.log('test',test)}

``` ## 关于文章开头的编辑器在上诉的步骤都完成了之后，并不能在编辑器这么使用，因为编辑器和 vue 并没有什么特定的 dom 节点的关系（在编辑器加载后，vue 上的数据并不会影响编辑器的内容，只能通过编辑器的 onchange 来给 vue 同步数据）所以先用指令，生成一段 html 代码，拿到 v-code 渲染后的 innerHtml，在插入到编辑器中，注意编辑器中也要用 `pre` 包裹着要插入的 html 代码，由于各个富文本编辑器都不太一样，也就不好展开~ ### 获取的代码再次格式化格式乱了如果你也有编辑器的这种需求，在进行一系列改动后执行保存操作(getContent)。拿到改动后的 html 代码，提交给接口，刷新列表，把新的数据重新赋值到编辑器的时候发现 `js-beautify` 不生效了？！这是因为进过我们格式化和代码高亮过后的代码，已经存在了很多空格和换行符，其实这些空格（或者称为缩进）是我们不想保存的，保存了这部分缩进后下次进行代码格式化的时候`js-beautify`会认为这是故意留下的回车/空格符，导致一系列的问题所以在我们再次获取到 html 代码的时候执行一个操作: ```js html = html.replace(/[\r\n]/g, '').replace(/>\s*?<') ``` 把换行符和 2 个尖括号中间的内容的非字符，都替换掉，就可以了

标签格式化