记录从0开发一个vue的富文本插件过程以及遇到的坑

先说一下想要开发的背景

由于公司的项目中都是移动端的应用，会有很多内容编辑的功能，最开始想使用通用的富文本编辑器但是并不满足需求最后在网上找到了这个大神开发的富文本

链接在这:https://github.com/Fixels/Eleditor

觉得很好用就一直在使用，但是这位大神18年之后就不维护了，可能是家庭原因和个人时间真的忙不过来。

然后公司项目用这个会有一些自定义的需求但是现有的功能是完全满足不了的所以就萌生了一个在大神思想的基础上自己写一个类似的基于vue的富文本编辑器，所以就有了这篇记录帖子

webpack稳定版本的配置

{
  "name": "jmeditor",
  "version": "0.0.1",
  "description": "移动端富文本编辑器",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --config webpack.config.js",
    "build": "webpack"
  },
  "author": "bossver",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "babel-loader": "^8.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.7.2"
  }
}

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    entry:resolve(__dirname,'src/main.js'),
    output:{
        path:resolve(__dirname,"dist"),
        filename:'jmeditor.min.js',
        library: "tools",
        libraryExport: "default", // 不添加的话引用的时候需要 tools.default
        libraryTarget: "umd", // var this window ...
    },
    devtool:"source-map",
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:resolve(__dirname,'node_modules')
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:resolve(__dirname,'index.html')
        })
    ],
    devServer:{
        open:true,
        port:8080
    }
}