无法在 CKEditor 中本地添加 mathtype 插件

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。

我想在本地使用此包 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 to customize webpack without ejecting it. And then install copy-webpack-plugin 以在构建时复制文件，最后在 config-overrides.js 中添加此代码段以将 mathtype 复制到 mathtype-ckeditor4 文件夹中 public文件夹.,

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了。

无法在 CKEditor 中本地添加 mathtype 插件

Can't add mathtype plugin locally in CKEditor

ckeditor