如何和webpack一起使用npm中的CKEditor?
理想情况下,我希望先使用npm install ckeditor --save
,然后使用var CK = require('ckeditor');
,而不需要任何全局名称空间污染。
发布于 2016-01-30 12:23:24
发布于 2017-11-22 00:12:54
安装
npm install ckeditor --save
加载
require('ckeditor');
加载后,chkeditor将作为全局变量CKEDITOR
可用
替换
CKEDITOR.replace('elementId');
问题
编辑器加载它自己需要的CSS/JS资产,很可能找不到这些资产。您可以参考这些资源的CDN版本,也可以将CKeditor目录复制到公共可访问文件夹中。使用CKEDITOR_BASEPATH
定义公共可访问资源的URL。
window.CKEDITOR_BASEPATH = '//cdn.ckeditor.com/4.6.2/full-all/';
注意:在您的导入语句之前定义window.CKEDITOR_BASEPATH
!
发布于 2018-02-21 21:38:15
CK编辑器5可以很容易地与webpack一起使用:https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html
尽管需要注意的是,截至2018年2月,它仍在alpha2:https://github.com/ckeditor/ckeditor5#packages中
通过使用以下代码,我能够开始使用Rails和webpacker:
yarn add \
css-loader \
node-sass \
raw-loader \
sass-loader \
style-loader
yarn add \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-basic-styles
在我直接从快速入门指南复制的代码中:
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'
const element = document.getElementById('editor')
ClassicEditor.create(element, {
plugins: [Essentials, Paragraph, Bold, Italic],
toolbar: ['bold', 'italic']
})
.then(editor => {
console.log('Editor was initialized', editor)
})
.catch(error => {
console.error(error.stack)
})
最后,根据快速入门指南,我必须为ckeditor svg图标添加一个加载器。我在这里为该https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader使用了webpacker参考
// config/webpacker/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.insert('svg', {
test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
use: 'raw-loader'
}, { after: 'file' })
const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.(svg)$/i
module.exports = environment
https://stackoverflow.com/questions/29703324
复制相似问题