前端开发（一些常用的插件使用和网站）

1、富文本编辑器

1. wangEditor

官网链接： https://www.wangeditor.com/

2. tui.editor

（1）安装

npm install @toast-ui/editor -S

（2）初始化

import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css'
import '@toast-ui/editor/dist/i18n/zh-cn';
export default {
    mounted () {
      const editor = new Editor({
        el: this.$refs.editor,
        language: 'zh-CN',
        initialEditType: 'markdown',
        previewStyle: 'vertical',
      });
    }
  }

（3）官方插件

配置代码语法高亮。
安装

npm install @toast-ui/editor-plugin-code-syntax-highlight

使用

import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import Editor from '@toast-ui/editor';
// 支持所有语言语法高亮
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
const editor = new Editor({
  // ...
  plugins: [codeSyntaxHighlight]
});

（4）功能拓展

目前编辑器包含了语法高亮，如果需要添加目录索引，可以监听文档编辑的change事件，获取markdown文档内容，通过正则表达式解析即可。具体实现如下：

const editor = new Editor({
  // ...
  events: {
    change: this.handleContentChange.bind(this)
  },
});
methods: {
  handleContentChange () {
    const mdText = this.editor.mdEditor.getMarkdown()
    this.parseMdTitle(mdText)
  },
  parseMdTitle (mdText) { // 解析markdown title
    const pattern = /^(#+)\s+(.+)/mg
    let result = mdText.match(pattern)
    if (!result) return
    const catalogList = result.map((vv, index) => {
      const levelText = vv.match(/^(#+)/)
      return {
        level: levelText[0].length, // 目录级别
        index,
        cls: `heading-${levelText[0].length}`,
        content: vv.slice(levelText[0].length).trim(), // 内容
      }
    })
    this.catalogList = catalogList
  }
}

2、doc文档转化为 html

网站地址： http://www.docpe.com/word/word-to-html.aspx

3、借助ffmpeg.wasm纯前端实现多音频和视频的合成

参考地址： https://www.zhangxinxu.com/wordpress/2021/03/ffmpeg-wasm-audio-video-merge/

4、png 图片转化为 ico

地址：https://cdkm.com/cn/png-to-ico

5、在线检测麦克风和摄像头网站

地址： https://webcammictest.com/check-mic.html

6、音视频可视化 wavesurfer.js

地址： https://www.vue-js.com/topic/5f85138096b2cb0032c385a5

7、从零开始设计一个Web端多人协同编辑器

地址： https://zhuanlan.zhihu.com/p/131572523

8、video 标签的事件和属性

地址：https://www.cnblogs.com/IT-study/p/11169501.html

9、antV G6流程图在Vue中的使用

地址： https://www.jianshu.com/p/13579c3853bc

10、SpreadJS

地址： https://demo.grapecity.com.cn/spreadjs/help/api/modules/GC.Data

11、Alpine.js

近似 vue 和 react
地址： https://www.alpinejs.cn/#%E5%AE%89%E8%A3%85-install

12、前端面试

https://developers.pub/wiki/1065322/1065327