Issue #2962Opened August 19, 2020by SintoDema1 reactions

BUG:

Question

Hi @artf,

Version: grapesjs - 0.16.18 ckeditor - standard - 4.14.1

Are you able to reproduce the bug from the demo? Yes

What is the expected behavior? While applying the inline formatting options from inline CKeditor options, it should reflect in the selected text.

Describe the bug detailed I have integrated the CKeditor in the grapesJS editor for inline editing purposes. Currently, when I select text to format it, the inline CKeditor options are displaying along with another few options in a black toolbar. I'm confused about that. And the main issue is that even I use any of the inline formatting options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..

What is the current behavior? The main issue is that even I use any of the inline options, the formatting is not reflecting in the selected text. Can't do anything from the CKeditor inline option like text formatting, list, image uploads, link, etc..

Plugins used grapesjs-lory-slider, grapesjs-tabs, grapesjs-custom-code, grapesjs-touch, grapesjs-parser-postcss, grapesjs-tooltip, grapesjs-tui-image-editor, grapesjs-typed, grapesjs-style-bg, gjs-preset-webpage, grapesjs-plugin-forms, gjs-component-countdown, gjs-plugin-ckeditor.

Are you able to attach screenshots, screencasts or a live demo? Yes, here is a demo link and screenshot from demo, another from my work

Answers (3)

SintoDema• August 28, 20201 reactions

Hi @mcottret,

That was a very helpful reply. It fixed the whole issues related to the inline formatting.

Thank you.

mcottret• August 27, 20200 reactions

Hi @SintoDema !

The GrapesJS CKEditor plugin already registers CKEditor as a custom RTE, so calling editor.setCustomRte is actually setting it up twice, which I believe causes those problems.

Remove the editor.setCustomRte block & it should work as expected. If you want to provide CKEditor options, this should be done at the pluginsOpts level as shown here.

Cheers !

SintoDema• August 28, 20200 reactions

Hi @mcottret,

I have already tried that earlier & as your suggestion again I have removed that section from my application. Now, there is no formatting options tab. I do not have given any restrictions(pluginsOpts) in CKEditor option, just loaded the CDN files & its plugin name in GrapesJS plugin in section. Also, after removing editor.setCustomRte block, I'm getting another error as:

ckeditor.js:270 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "sharedspace" was not found at "https://cdn.ckeditor.com/4.14.1/standard/plugins/sharedspace/plugin.js?t=K5H9".
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:270)
    at e (ckeditor.js:265)
    at Array.x (ckeditor.js:265)
    at w (ckeditor.js:265)
    at HTMLScriptElement.CKEDITOR.env.ie.e.$.onerror (ckeditor.js:266)

Are you able to reproduce the bug from the demo(after removing editor.setCustomRte block, you can try that)? Yes

Here is a screenshot from the demo

After trying different code I have able to get basic formatting options can you check the demo & help me. I need more formatting options like list(ordered & unordered list - this one is required), image uploads, link, etc..

In the fiddle, you can see that I'm just loaded the CDN files. I have not used the CKEditor in the plugins section of GrapesJS while using that I'm getting an error as above mentioned. And, toolbar options are also provided there which is not working. Screenshot with few options

I have checked the Grapedrop application, there is more option like what I need. Screenshot from that application which GrapesJS is implemented

Can you be able to help me by creating a working fiddle with more formatting options?

Thank you.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

BUG:

Question

Answers (3)

Related Questions and Answers

BUG: Text element not able to be selected twice after extended with events

BUG (v0.16.41): the duplicate icon from the icon toolbar is modifying the original element too

BUG: Helvetica font trait should be sans-serif

BUG: Change one copied element affects other copied elements

Paid Plugins That Match This Issue

Browse Plugin Categories