本文介绍了无法在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插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-09 13:43