无法在CKEditor中本地添加数学类型插件

Question

import React from 'react'
import CKEditor4 from 'ckeditor4-react'

export default function App () {
  return (
    <CKEditor4
      data='<h1>hello</h1>'
      config={{
        extraPlugins: ['ckeditor_wiris'],
        allowedContent: true,
        height: 300,
        startupFocus: 'end',
        skin: 'moono'
      }}
      onBeforeLoad={(CKEDITOR) => {
        CKEDITOR.plugins.addExternal(
          'ckeditor_wiris',
          'https://www.wiris.net/demo/plugins/ckeditor/',
          'plugin.js'
        )
      }}
    />
  )
}

我使用CRA创建了一个react应用程序，此代码将使用Mathtype插件呈现CKEditor。

我想在本地使用这个包中的mathtype，https://www.npmjs.com/package/@wiris/mathtype-ckeditor4，而不是路径https://www.wiris.net/demo/plugins/ckeditor/。

CKEDITOR.plugins.addExternal(
  'ckeditor_wiris',
  '../node_modules/@wiris/mathtype-ckeditor4/',
  'plugin.js'
)

但是当我更改数学类型路径时，我得到了一个错误，

​

​

Answer 1

由于我们不能直接从CRA App访问node_modules文件夹中的文件，由于webpack的配置，我们应该在构建时将@wiris/mathtype-ckeditor4/文件夹复制到public文件夹。

要做到这一点，首先集成react-app-rewired以在不弹出的情况下自定义webpack。然后安装copy-webpack-plugin以在构建时复制文件，最后在config-overrides.js中添加此代码片段以将mathtype复制到公共文件夹内的mathtype-ckeditor4文件夹。

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

module.exports = function override (config, env) {
  config.plugins.push(
    new CopyWebpackPlugin({
      patterns: [
        { from: 'node_modules/@wiris/mathtype-ckeditor4', to: 'mathtype-ckeditor4' }
      ]
    })
  )

  return config
}

最后，将onBeforeLoad中的代码更改为

CKEDITOR.plugins.addExternal('ckeditor_wiris', '/mathtype-ckeditor4/', 'plugin.js')

这样我们就可以在CKEditor中本地安装和使用mathtype。