支持sql语法提示的前端编辑器

magic-editor编辑器

magic-editor官网 ： https://microsoft.github.io/monaco-editor/

默认支持ts，js ，css ，html语法提示

支持sql提示 插件 monaco-sqlpad

sql语法提示插件monaco-sqlpad，gitbhu地址：https://github.com/laiweiwei/monaco-sqlpad

 

 

 

monaco-sqlpad会报错：

 报错：Uncaught (in promise) ChunkLoadError: Loading chunk 55 failed. 

   解决方案1：https://www.jianshu.com/p/1723eb6fbaeb

　解决方案2：https://www.jianshu.com/p/033713c39ef9

 

以上解决方案均测试无效

跟据以上方案反推得出问题所在：

　　原因时文件请求路径问题，有的文件请求路径可能需要加上 js/ ，或 fonts/ 

亲测解决方案：1.找出没找到的源文件的路径地址，然后使用 copy-webpack-plugin 插件进行文件的转移，使其请求文件的路径符合文件所在位置

　　　　　　　　

const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  lintOnSave:false,
  configureWebpack: {  
    plugins: [new CopyWebpackPlugin(
      {
        patterns: [
          // {
          //   context: 'node_modules/monaco-sqlpad/dist/',
          //   from: 'monaco-sqlpad.umd.min.55.js',
          //   to: 'js/',
          //   toType: 'dir'
          // },
          {
            context: 'node_modules/monaco-sqlpad/dist/',
            from: 'monaco-sqlpad.umd.min.55.js',
            to: 'monaco-sqlpad.umd.min.55.js',
            toType: 'file'
          },
          {
            from: 'node_modules/monaco-sqlpad/dist/editor.worker.js',
            to: 'editor.worker.js',
            toType: 'file'
          },
          {
            context: 'node_modules/monaco-sqlpad/dist/',
            from: 'fonts',
            to: 'fonts',
            toType: 'dir'
          }
        ]
      }
    )]
  }
}

 

完美解决！

  关于基于 magic-editor 封装的 monaco-sqlpad插件拓展

将monaco-sqlpad，gitbhu地址：https://github.com/laiweiwei/monaco-sqlpad 克隆下来

在此基础上进行修改

再次发布至自己的npm，然后安装自己发布的npm包就行了