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

问题描述

  import从'react'进行React从'ckeditor4-react'导入CKEditor4导出默认功能App(){返回 (< CKEditor4数据='< h1> hello</h1>'config = {{extraPlugins:['ckeditor_wiris']，allowedContent:true，高度:300，startupFocus:结束"，皮肤:"moono"}}onBeforeLoad = {(CKEDITOR)=>{CKEDITOR.plugins.addExternal('ckeditor_wiris'，'https://www.wiris.net/demo/plugins/ckeditor/'，'plugin.js')}}/>)} 

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

我想使用此软件包中的数学类型，

解决方案

由于我们无法直接访问CRA App中 node_modules 文件夹中的文件，因此由于webpack的配置，我们应该复制在构建时将@ wiris/mathtype-ckeditor4/文件夹添加到 public 文件夹.

为此，请先集成 react-app-rewired 进行自定义webpack而不弹出它.然后安装 copy-webpack-plugin 在构建时复制文件，最后在 config-overrides.js 中添加此代码段，将数学类型复制到公用文件夹内的 mathtype-ckeditor4 文件夹中.

  const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports =函数覆盖(配置，环境){config.plugins.push(新的CopyWebpackPlugin({模式:[{从:'node_modules/@ wiris/mathtype-ckeditor4'到:'mathtype-ckeditor4'}]}))返回配置} 

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

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

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

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'
        )
      }}
    />
  )
}

I created a react app using CRA, this code will render CKEditor with Mathtype plugin.

I want to use mathtype from this package, https://www.npmjs.com/package/@wiris/mathtype-ckeditor4, locally instead of the path https://www.wiris.net/demo/plugins/ckeditor/.

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

But I'm getting an error when I change the mathtype path,

解决方案

Since we can't directly access files from node_modules folder from CRA App, due to webpack configuration, we should copy @wiris/mathtype-ckeditor4/ folder to public folder at the build time.

To do that, first integrate react-app-rewired to customize webpack without ejecting it. And then install copy-webpack-plugin to copy files at a build time, finally inside config-overrides.js add this snippet to copy mathtype to mathtype-ckeditor4 folder inside public folder.,

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
}

Lastly change the code inside onBeforeLoad to this,

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

This way we can install and use mathtype locally in CKEditor.

这篇关于无法在CKEditor中本地添加mathtype插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！