-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Webpack support #139
Comments
EDIT: There's been a major overhaul in how CKEditor 5 needs to be built since I wrote this message. Jump to #139 (comment) if you're interested in more up to date information :) tl;dr: There's full support for Webpack. Hey, As for CKEditor 4 I don't know if there's any way to bundle it. I think there should be but I can't say for sure because CKEditor 4 does some magic under the hood to load assets and maybe you can't disable some of this magic. Dunno. And as for CKEditor 5, things are much different here. Most importantly we decided that magic is no good. In CKEditor 4 it was aimed at simplifying adding CKEditor to your page but nowadays it's not necessary. It's the opposite – magic makes it harder to integrate with other tools. So, releasing CKEditor 5 will be done in couple of steps:
I hope that this answers your question and is fine with you. Any feedback is welcomed here, as it was really hard for us to figure out what are the scenarios and, more importantly, how to deal with them, taken the complexity of the project. You can read more details in:
Thanks! |
Thanks for the feedback. I managed to figure out how to implement ck4 in webpack using scriptjs. Install scriptjs: Example call:
Note that this will only work with the minified version of the editor. I will do a bit of research regarding the topic and write an update here if I find a better solution. Good luck with the project. I know how much work goes into updating a project of this magnitude. |
Quick update on the last comment. The method described looks like it works on my framework now. I think the reason I had errors was due to the fact that requirejs was still being used in my project. The second I removed it, my problems seems to have vanished. |
Note that Webpack is not a simple Rollup replacement. It is a Grunt/Gulp replacement in many cases. With a vast number of Webpack plugins you can configure it to handle whole building process, including cleanup , find and replace and upload on a server. Now, expecting that CKEditor 5 transpiling will be done outside Webpack is strange for users who handle building with Webpack. Also, in the environment where even the bundle is not stored on the hard drive (using webpack dev server), the fact that you need to generate and save your CKEditor 5 compilation in strange. This is why I think there should be a
Then you can call in your code:
|
Thanks for the feedback, @pjasiun. I didn't mean of course that Webpack integration will work in the same way as Rollup's. We need something which feels familiar to developers using Webpack and the solution with a specialized loader sounds great. BTW, it may turn out that if we switch to Karma, we'll start using the Webpack integration for everything and that it will replace the current builder. That will be a bit sad, cause we've spent a lot of time writing the builder and perhaps some pieces will be hard to port, but maintaining a separate builder which duplicates Webpack's options if we're not using Bender anymore may be pointless. |
As software progresses, the need to let go of old software becomes more necessary, regardless of how much time was spend into creating it. For example. Angular 2 scrapped everything from Angular 1 and started fresh. I suggest the same, because modern front end developers use webpack or similar tools, and build our own scripts. All this legacy js software are so hard to integrate into modern modular apps. |
We've done the same as Angular did. CKEditor 5 was rewritten from scratch and we're open to every tool. Recently, we decided to finally switch to Karma+Webpack for development. However, CKEditor source code is split into multiple repositories and requires a compilation step which gathers all the files. After compilation, you can then bundle the code or do whatever you want – e.g. build it into your source code like you'd normally do in more modern architecture. There are two things, though, which makes us unsure which direction to take.
Anyway, we'll definitely have Webpack integration. We're just unsure yet how big part of CKEditor building process will be based on Webpack and how much on our custom tools. |
I reported a ticket which is a bit related to this one, because it also concerns Webpack support: #345. We're trying to figure out how to use Webpack for testing environment and enable loading external resources, while preserving the current custom compiler. |
(Corrected ticket number in my previous comment.) |
Opinionated I believe the future of web development will be in an reactive component driven way of building web applications. Thus I would really appreciate a strong webpack integration and also providing builded version making it easy to integrate the editor into modern web application frameworks like angular 2 or react. |
Thanks for the feedback. I totally agree and I think we all do. Webpack is our main point of interest, also because it will allow us to solve many issues at once. Still, we don't want to totally base CKEditor compilation on it, cause it will narrow down the integration scenarios. Hence, the intermediate form (produced by CKEditor's compilator) which is just a bunch of source files in the format of your choice (ES6, AMD, CJS).
By builded version do you mean a single file like I haven't researched this yet, but I guess that if you, in your project, use Webpack, then basically you don't care how CKEditor is released. You simply base on the integration (guess – loader) and Webpack's ability to produce small, optimal bundles. But as I wrote above – we don't want to satisfy the Webpack case only, so... yeah, it requires from us analysing every possible and reasonable integration scenario. Tricky :D. As for Angular 2 and React – I've seen you reported #347. I'll reply about the whole "component" thing there. |
Related topic: #362. I started thinking on whether we need the compilation step, but according to my (unresearched) thought experiment, we still do. If we have time, it'd be good to have this a bit better researched. |
Since this ticket appears first in Google search results for "ckeditor5 webpack", and there's no official docs yet, I will share my findings. This doesn't add up much to the discussion above (and the ticket itself), it's just to save time for people who are starting to adopt the project. To add ckeditor5 beta to your existing webpack (2.x) project
npm i -D @ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-enter \
@ckeditor/ckeditor5-image \
@ckeditor/ckeditor5-paragraph \
@ckeditor/ckeditor5-typing \
@ckeditor/ckeditor5-undo
npm i -D babel-core babel-loader babel-preset-es2015-webpack2 regenerator-runtime \
style-loader css-loader sass-loader node-sass
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "assets"), // your scripts
path.resolve(__dirname, "node_modules/@ckeditor")
],
use: [{
loader: 'babel-loader',
options: {
presets: ['es2015-webpack2'],
cacheDirectory: true
}
}]
},
{test: /\.css$/, loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader'})},
{test: /\.s[ac]ss$/, loader: ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader'})},
{test: /\/ckeditor5-.*\.svg$/, loader: 'raw-loader'}
// NOTE: if you have other *.svg rule(s), add {exclude: /\/ckeditor5-/} option to them
]
}
import 'regenerator-runtime/runtime'; // for CKEditor Alternatively, include the runtime right in module.exports = {
...
entry: {
main: ['regenerator-runtime/runtime', './assets/main']
}
// assets/js/myckeditor.js
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classic';
import Enter from '@ckeditor/ckeditor5-enter/src/enter';
import Typing from '@ckeditor/ckeditor5-typing/src/typing';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Image from '@ckeditor/ckeditor5-image/src/image';
ClassicEditor.create(document.getElementById("editor"), {
plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Image ],
toolbar: [ 'bold', 'italic', 'undo', 'redo' ]
}); |
That's awesome! :) Thanks for writing this down. I was actually working yesterday on our own setup for Webpack here: https://github.com/CKEditor5/ckeditor5.github.io/tree/master (it's for https://ckeditor5.github.io where we've been using Rollup previously). Our setups are pretty much identical with that difference that I didn't split CSSs out of the bundle. We've made several big changes to the project infrastructure during the last 2 months and they result in a very different way of building editor than before. Before, we hoped to be able to encapsulate CKEditor specific work in a pre-bundling step called "compilation". It's all gone now, you can read more in ckeditor/ckeditor5-design#171. So, currently, support for Webpack (and Rollup, once this issue is fixed: rollup/rollup-plugin-node-resolve#67 (comment)) are native and the CKEditor specific things will be handled by plugins for these tools. Our plans for Webpack:
|
Hi, thanks a lot for this configuration. I tried it on a bare new project and it works well (actually I used this one: https://github.com/CKEditor5/ckeditor5.github.io/blob/master/webpack.config.js but it's quite the same). However, I'm trying to include ckeditor in my angular4 project so I replicates this configuration in my webpack.config.js but unfortunately, I get the following error:
As this configuration works on a new project, I guess that mixing up angular with ckeditor creates some conflicts. I don't really know if you care about that so soon in the development of ckeditor but anyway, worse case scenario, you just lost 30" of your time :-) Here is the webpack.config.js that I'm using:
And here is the beginning of the callstack:
Thanks for your attention. |
Hi, thanks for the report. This seems to be a problem of integration with Angular itself. As you mentioned, the bare build works fine. Please report a separate question for this issue. However, to be able to do something, we'll need to see more code or we may even need to be able to reproduce the issue. Let's start with the code though. My guess is that you don't pass the element to the editor's You can also check these places: |
Hi, I just create a new bare project for Angular2 then tried to include ckeditor and I've been able to reproduce this issue. I'll open a new question with this. Thanks |
Thanks! That's it: #413. |
Exactly. Thanks |
I have gone through the very helpful suggestions above and I feel like I am close, but am left with the following error still:
This sounds similar to what ssougnez was experiencing, but I am not using Angular or any sort of large framework. Could I ask if the error rings any bells for anyone? |
@deanvaessen |
Yes, it's fresh. That was my thought too. Both packages ( And the editor-classic package requires the ui package in the right version: https://github.com/ckeditor/ckeditor5-editor-classic/blob/master/package.json#L10. If you install from npm and If you use the dev versions through mgit you'll need to do |
Thank you both. I didn't install the UI package as I didn't see it in the post's:
I didn't think to add it myself, many thanks for the help! :) Quick additional comment that I had to change this: to this:
If I added the ckeditor5- prefix, I ran into trouble with:
|
Hi, I ran into the same issues and I fixed it like this:
This only handles
Regards |
You made my day @ssougnez :) |
I think there's nothing we can add in this ticket. CKEditor 5 is built with webpack so we support it natively. We also offer guides how to integrate CKEditor 5 with your webpack setup: |
@ssougnez where to add these codes, I am facing the same issue in my angular project. |
Sorry but... It was seven years ago... I didn't even remember this thread ^^ |
A great deal of javascript developers are going the direction of webpack, myself included.
There seems to be no way of properly implementing any version of ckeditor I have tried into webpack as far as I can tell.
I can't even find any discussions on the matter.
Will ckeditor5 have support for webpack?
Is there a way to integrate the current ckeditor 4 into webpack that I am not aware of?
If not, I would suggest making this a priority or a lot of people will be forced to find an editor that is compatible.
If there are any discussions surrounding this topic please point me in the right direction.
Thanks.
The text was updated successfully, but these errors were encountered: