MathType and ChemType

[grangelouis]

Whoa! Thank you so much for this fantastic work! I have a problem, I can't install MathType (CKEDITOR's plugin), I tried to add it under 'toolbar', but nothing...I think it's just missing the plugin. How can I fix this?

[ajbuchholz]

@grangelouis did you figure out how to install plugins?
If you did, do you think you could share, please.

[hvlads]

1. Clone django-ckeditor-5 to the project root directory.
2. cd django_ckeditor_5; npm install
3. npm install @plugin_name
4. open django_ckeditor_5/static/django_ckeditor_5/src/ckeditor.js
5. add import PlaginName from './file_path';
6. add PlaginName to ClassicEditor.builtinPlugins[ PlaginName, ...]
7. npm run prod
8. change settings.py

[ajbuchholz]

@hvlads can't do "npm run prod"
0 info it worked if it ends with ok 1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'prod' ] 2 info using npm@3.5.2 3 info using node@v8.10.0 4 verbose run-script [ 'preprod', 'prod', 'postprod' ] 5 info lifecycle django_ckeditor_5@1.0.0~preprod: django_ckeditor_5@1.0.0 6 silly lifecycle django_ckeditor_5@1.0.0~preprod: no script for preprod, continuing 7 info lifecycle django_ckeditor_5@1.0.0~prod: django_ckeditor_5@1.0.0 8 verbose lifecycle django_ckeditor_5@1.0.0~prod: unsafe-perm in lifecycle true 9 verbose lifecycle django_ckeditor_5@1.0.0~prod: PATH: /usr/share/npm/bin/node-gyp-bin:/home/hermes/ckeditor/django-ckeditor5/django_ckeditor_5/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin 10 verbose lifecycle django_ckeditor_5@1.0.0~prod: CWD: /home/hermes/ckeditor/django-ckeditor5/django_ckeditor_5 11 silly lifecycle django_ckeditor_5@1.0.0~prod: Args: [ '-c', 'webpack --mode production' ] 12 silly lifecycle django_ckeditor_5@1.0.0~prod: Returned: code: 1 signal: null 13 info lifecycle django_ckeditor_5@1.0.0~prod: Failed to exec prod script 14 verbose stack Error: django_ckeditor_5@1.0.0 prod: webpack --mode production14 verbose stack Exit status 1 14 verbose stack at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16) 14 verbose stack at emitTwo (events.js:126:13) 14 verbose stack at EventEmitter.emit (events.js:214:7) 14 verbose stack at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14) 14 verbose stack at emitTwo (events.js:126:13) 14 verbose stack at ChildProcess.emit (events.js:214:7) 14 verbose stack at maybeClose (internal/child_process.js:925:16) 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 15 verbose pkgid django_ckeditor_5@1.0.0 16 verbose cwd /home/hermes/ckeditor/django-ckeditor5/django_ckeditor_5 17 error Linux 4.4.0-18362-Microsoft 18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "prod" 19 error node v8.10.0 20 error npm v3.5.2 21 error code ELIFECYCLE 22 error django_ckeditor_5@1.0.0 prod:webpack --mode production22 error Exit status 1 23 error Failed at the django_ckeditor_5@1.0.0 prod script 'webpack --mode production'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the django_ckeditor_5 package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error webpack --mode production 23 error You can get information on how to open an issue for this project with: 23 error npm bugs django_ckeditor_5 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls django_ckeditor_5 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]

[ajbuchholz]

Never mind I figured it out

[Kirkmania]

Hi there, can I ask how you figured this out @HermesTheDev ?

[ajbuchholz]

@Kirkmania. I'm sorry if this isn't what you looking for but these are the steps I took. I'm not entirely familiar with NPM so a lot of it was messing around if that makes sense.

git clone https://github.com/hvlads/django-ckeditor-5
cd django-ckeditor-5/django_ckeditor_5
npm install
npm install @plugin_name
open django_ckeditor_5/static/django_ckeditor_5/src/ckeditor.js
add import PluginName from './file_path';
add PluginName to ClassicEditor.builtinPlugins[ PluginName, ...]
cd node_modules
npm run prod

So for instance if I wanted to install CodeBlock I would do the following:

1. npm install --save @ckeditor/ckeditor5-code-block
2. Add import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
3. Add 'CodeBlock' to ClassicEditor.builtinPlugins[ PluginName, ...]
4. Run npm run prod

I sometimes ran into issues with npm run prod and npm run build seemed to fix some of them.

I hope that this helps.

[Kirkmania]

@HermesTheDev wow! That reply was way quicker than I expected from a closed thread from may!
CodeBlock is in fact exactly what I'm trying to install. I'll try this out tomorrow. Thanks for the help!

[Kirkmania]

Okay, I think the npm module installation ran okay from the looks of its output. However, I'm unsure how you're supposed to actually use the app from git clone instead of pip install. I tried running python setup.py install from within django-ckeditor-5, and I've also tried simply coping the inner "django_ckeditor_5" directory back to root. Not really sure what I'm doing here :(

[ajbuchholz]

Alright so from my understanding this is what you need to do.

1. Make a fork or seperate repo with the contents of this repo
2. Download the CodeBlock plugin. Use the instructions above.
3. Commit and push it to that repo.
4. Now switch to your django project (this could be a blog or shop or whatever your working on)
5. Install the library like so pip3 install git+https://github.com/project/url.git
6. Then open your forms.py in whatever app you want to use ckeditor with.
7. Import from django_ckeditor_5.fields import CKEditor5Widget
8. Add this and change the fields accordingly
   widgets = {"content": CKEditor5Widget(config_name="editor")}
9. Content in this case is the name of the model field we created. Editor is the config_name which you will be declaring in your settings.py

Setting might look like this...

CKEDITOR_5_CONFIGS = {
    "editor": {
        "toolbar": [
            "fontFamily",
            "heading",
            "|",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "|",
            "alignment",
            "horizontalLine",
            "|",
            "bulletedList",
            "numberedList",
            "|",
            "insertTable",
            "imageUpload",
            "link",
            "blockQuote",
            "code",
            "|",
            "undo",
            "redo",
        ],
        "alignment": {"options": ["left", "center", "right"]},
        "image": {
            "toolbar": [
                "imageStyle:alignLeft",
                "imageStyle:full",
                "imageStyle:alignRight",
                "imageStyle:alignCenter",
                "imageStyle:side",
            ],
            "styles": ["full", "side", "alignLeft", "alignRight", "alignCenter",],
        },
        "table": {
            "contentToolbar": ["tableColumn", "tableRow", "mergeTableCells", "tableProperties", "tableCellProperties"]
        },
        "heading": {
            "options": [
                {"model": "paragraph", "title": "Paragraph", "class": "ck-heading_paragraph"},
                {"model": "heading1", "view": "h1", "title": "Heading 1", "class": "ck-heading_heading1"},
                {"model": "heading2", "view": "h2", "title": "Heading 2", "class": "ck-heading_heading2"},
                {"model": "heading3", "view": "h3", "title": "Heading 3", "class": "ck-heading_heading3"},
            ]
        },
        "basicEntities": False,
        "entities": False,
    },

11. Keep in mind you may need to tinker a little bit. You will also need to add the CKeditor to your installed apps.

[Kirkmania]

Hmm. I've been fiddling around with all of this and using npm run prod vs build, trying my darndest, but for some reason, where before on the original build my browser's console would only report "duplicated modules" once, on my build with codeBlock added it reports a "duplicated modules" error twice.

I think I'm going to give up trying to fiddle with this particular package and just make do with the regular code button. It seems a lot more hassle than it's worth.

Thanks for all of your help anyway @HermesTheDev! It certainly got me closer to figuring out how to do any of this, and I learnt a decent bit about npm and webpacks along the way.

[ajbuchholz]

Hmm. I've been fiddling around with all of this and using npm run prod vs build, trying my darndest, but for some reason, where before on the original build my browser's console would only report "duplicated modules" once, on my build with codeBlock added it reports a "duplicated modules" error twice.

I think I'm going to give up trying to fiddle with this particular package and just make do with the regular code button. It seems a lot more hassle than it's worth.

Thanks for all of your help anyway @HermesTheDev! It certainly got me closer to figuring out how to do any of this, and I learnt a decent bit about npm and webpacks along the way.

So I have a couple a suggestions if you want and maybe a solution to your current problem.

Problem: All I know is that you are trying to load multiple instances of ckeditor. I would remove everything from the HTML and python and add it to the forms.py like I suggested.

Solutions:

1. Use a regular text box and write markdown or RestructedText and then have some library render it. Not ideal but definitely a solution

2. Another idea would be to use quill-js it’s a js library that was a lot easier to implement back when I was trying to determine whether or not to use ckeditor this was one alternative.
   https://quilljs.com/

EDIT: Quick glance at your latest project that you updated recently it looks like you have ckeditor and django_ckeditor_5. This could be part of the issue. I would remove ckeditor from installed apps.

[moxgreen]

Dear all, I need MathType on django-ckeditor-5. I tried the suggestions in this tread but without success, maybe because i do not know sufficiently well node.js .
I need support for solve this issue and I happy to pay for the consultancy. Some of you (@ajbuchholz @hvlads ?) that already solved it can help me? Please contact me on ivan.molineris@unito.it