如何使用CKEditor作为与webpack或类似人构建的NPM模块
如何和webpack一起使用npm中的CKEditor？
理想情况下，我希望先使用npm install ckeditor --save，然后使用var CK = require('ckeditor');，而不需要任何全局名称空间污染。
回答 3
Stack Overflow用户
发布于 2016-01-30 12:23:24
Stack Overflow用户
发布于 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！
Stack Overflow用户
发布于 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 = environmenthttps://stackoverflow.com/questions/29703324
复制相似问题
腾讯云开发者
