grapesjs/ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor

GrapesJS

GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates. To better understand this concept check the image below

Generally any 'template system', that you'd find in various applications like CMS, is composed by the structure (HTML), style (CSS) and variables, which are then replaced with other templates and contents on server-side and rendered on client.

This demos show examples of what is possible to achieve:
Webpage Demo - http://grapesjs.com/demo.html
Newsletter Demo - http://grapesjs.com/demo-newsletter-editor.html

Table of contents

• Features
• Download
• Usage
• Development
• Documentation
• API
• Testing
• Plugins
• Support
• Changelog
• Contributing
• License

Features

Blocks	Style Manager	Layer Manager

Code Viewer	Asset Manager

• Local and remote storage

• Default built-in commands (basically for creating and managing different components)

Download

• CDNs
  • UNPKG (resolves to the latest version)
    • https://unpkg.com/grapesjs
    • https://unpkg.com/grapesjs/dist/css/grapes.min.css
  • CDNJS (replace X.X.X with the current version)
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css
• NPM
  • npm i grapesjs
• GIT
  • git clone https://github.com/GrapesJS/grapesjs.git

For the development purpose you should follow instructions below.

Usage

<link rel="stylesheet" href="path/to/grapes.min.css">
<script src="path/to/grapes.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      components: '<div class="txt-red">Hello world!</div>',
      style: '.txt-red{color: red}',
  });
</script>

For a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html

Development

Clone the repository and install all the necessary dependencies (yarn is highly recommended)

$ git clone https://github.com/GrapesJS/grapesjs.git
$ cd grapesjs
$ yarn

Start the dev server

$ yarn start

Once the development server is started you should be able to reach the demo page (eg. http://localhost:8080)

Documentation

Check the getting started guide here: Documentation

API

API References could be found here: API-Reference

Testing

$ yarn test

Plugins

Official Plugins | Community Plugins

Wrappers

• @grapesjs/react - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.

Extensions

• grapesjs-plugin-export - Export GrapesJS templates in a zip archive
• grapesjs-plugin-filestack - Add Filestack uploader in Asset Manager
• grapesjs-plugin-ckeditor - Replaces the built-in RTE with CKEditor
• grapesjs-tui-image-editor - GrapesJS TOAST UI Image Editor
• grapesjs-blocks-basic - Basic set of blocks
• grapesjs-plugin-forms - Set of form components and blocks
• grapesjs-navbar - Simple navbar component
• grapesjs-component-countdown - Simple countdown component
• grapesjs-style-gradient - Add gradient type input to the Style Manager
• grapesjs-style-filter - Add filter type input to the Style Manager
• grapesjs-style-bg - Full-stack background style property type, with the possibility to add images, colors, and gradients
• grapesjs-blocks-flexbox - Add the flexbox block
• grapesjs-lory-slider - Slider component by using lory
• grapesjs-tabs - Simple tabs component
• grapesjs-tooltip - Simple, CSS only, tooltip component for GrapesJS
• grapesjs-custom-code - Embed custom code
• grapesjs-touch - Enable touch support
• grapesjs-indexeddb - Storage wrapper for IndexedDB
• grapesjs-firestore - Storage wrapper for Cloud Firestore
• grapesjs-parser-postcss - Custom CSS parser for GrapesJS by using PostCSS
• grapesjs-typed - Typed component made by wrapping Typed.js library
• grapesjs-ui-suggest-classes - Enable auto-complete of classes in the SelectorManager UI
• grapesjs-fonts - Custom Fonts plugin, adds a UI to manage fonts in websites
• grapesjs-symbols - Symbols plugin to reuse elements in a website and accross pages
• grapesjs-click - Grab and drop blocks and components with click (no more drag-and-drop)
• grapesjs-float - Anchor a floating element next to another element (selected component, ...)

Presets

• grapesjs-preset-webpage - Webpage Builder
• grapesjs-preset-newsletter - Newsletter Builder
• grapesjs-mjml - Newsletter Builder with MJML components

Find out more about plugins here: Creating plugins

Support

If you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via Open Collective

Thanks to BrowserStack for providing us browser testing services

License

BSD 3-clause

ckeditor's Issues

ckeditor5

i want use ckeditor 5 version, but he not contain plugin "sharedspace".
What can do about it?

overlay menu tool ckeditor if change height edited block

Add text box and start typing text in 3 strings

Sync problems when focus is called

Hi!

i am adapting the plugin, it's working great so far. The only issue i'm having is that when the ckeditor is invoked by any component that requires it, the cursor is not inserted inside the element that is going to be edited.

My suspicion is that the focus action of the rte object is being fired before the instance is completely ready but i'm not 100% sure. The workaround for this issue was delaying the call of the focus action of the ckeditor object.

focus(el, rte) {
      // Do nothing if already focused
      if (rte && rte.focusManager.hasFocus) {
        return;
      }
      el.contentEditable = true;
      if(rte) {
	setTimeout(function() {
	rte.focus();
	}, 500);
      }
    }

This is a hackish solution but i'm not sure how to deal with this situation, maybe there's a hook or listener where i can verify if the instance is ready to fire the focus action. I would gladly propose a pull request if there's something within the plugin range to fix this. It could be that this goes more into the Ckeditor territory.

Cheers!

How to use this plugin in React?

I'm trying to use this plugin with GrapeJS in React but can't get it to work. When I select a piece of text I get an error:

Uncaught SyntaxError: Unexpected token <
Uncaught TypeError: Cannot set property 'dir' of undefined
     at Object.f (ckeditor.js:5782)
     at e (ckeditor.js:5816)
     at Array.n (ckeditor.js:5822)
     at q (ckeditor.js:5829)
     at ckeditor.js:5848

This is how I am loading it:

import "ckeditor";
import pluginCKEditor from "grapesjs-plugin-ckeditor";

then:

const editor = grapesjs.init({
    {...}
    plugins: [pluginCKEditor],
    {...}
})

What am I doing wrong?

CK Editor toolbar does not move when text block height is changed

I added Ck Editor as the RTE, but when the height of a block grows the toolbar does not move with it. This only happens when the toolbar is bellow the block, as shown in the image above.

We have found a workaround for this using editor.trigger('canvasScroll'); but had some issues to run it when a key is pressed as I explain in GrapesJS/grapesjs#3731 on the main repo.

I also found an old issue that says this used to happen to the main RTE also. But it was fixed with him. How can I fix this with CK Editor? Is there a way that isn't a workaround?

CKEditor Dialogs Issue on fullscreen

When we double click on link icon in fullscreen mode, then press ESC button, you see that whole editor is disabled. Please provide the solution for it. Thanks

Issue also appearing on demo.

Span element not supported - still having problems with nested elements

Hello,

Working with version 0.14.6 still having problems with nested elements.

I got sometimes the error:
The specified element mode is not supported on element: "span".

I discovered further another reaon that causes these error. When the parent contains none text but only an nested child element it went wrong.

It works fine (if parent element contains an nested element + another data too):
<span class="Red">this text in parent element is necessary to keep it work<span class="Uppercase">Hello world</span></span>

Went wrong (none text in parent element):
<span class="Red"><span class="Uppercase">Hello world</span></span>

Further I do have another question:
How do I have to apply the settings (and on wich place) below into GrapesJS/CKEDITOR?
CKEDITOR.dtd.$editable.span = 1; CKEDITOR.dtd.$editable.a = 1; CKEDITOR.dtd.$editable.strong = 1; CKEDITOR.disableAutoInline = true;

span elements are not editable

I want to apply a tags having a class to content.

So I add the styles to styles.js

ckeditor\styles.js:
{ name: 'Big', element: 'span', attributes: { 'class': 'Big' } },
{ name: 'Medium', element: 'span', attributes: { 'class': 'Medium' } },
{ name: 'Small', element: 'span', attributes: { 'class': 'Small' } },

This works fine, but when I saved the content and reload the page, it went wrong when I click again on the text with the class. I got the next error:

grapes.min.js:2 Error: The specified element mode is not supported on element: "span".
at new a (ckeditor.js:260)
at Object.CKEDITOR.inline (ckeditor.js:344)
at Object.enable (grapesjs-plugin-ckeditor.min.js:2)
at Object.enable (grapes.min.js:11)
at i.enableEditing (grapes.min.js:2)

enableEditing: function() {
var t = this.rte;
if (!this.rteEnabled && this.model.get("editable")) {
if (t)
try {
this.activeRte = t.enable(this, this.activeRte)
} catch (t) {
console.error(t)
}
this.rteEnabled = 1,
this.toggleEvents(1)
}
},

How can we fix this?

Can't figure out how to enable Bullet and Numbered list buttons in CKEditor

I'm running this exact project directly out of the box, and simply can't figure out why the UL and OL buttons are hidden when I initiate editing.

I've tried both clearing and explicitly setting the toolbar/toolbarGroups config and neither works.

Any ideas ?

Widgets plugin placeholder HTML not removed

Hello,

Firstly thank you for all of the work you've done on GrapesJS and its affiliated projects.

I'm having an issue with a plugin for CKEditor called Token Insertion (https://ckeditor.com/cke4/addon/token). This plugin is dependent on (among other things) the widget plugin. From what I gather, the widget plugin adds a bunch of tags that contain images for a drag handle to the HTML while working in the WYSIWYG. However, when you get the source of the editor, CKEditor seems smart enough to strip those span tags out. But when I get the HTML from GrapesJS, it still has these tags in there with the drag handle images. I'm getting the HTML from the storage manager's store function

store: function(data, success, error){ storeGrapesJsTemplate(data["gjs-components"], data["gjs-css"], data["gjs-html"], data["gjs-styles"], success, error) }

where storeGrapesJsTemplate stores off the pertinent information in the database.

Am I missing something? Is this a bug with the GrapesJS CKEditor plugin? It seems like maybe it's conflicting between the plugin needing to store these extra tags/markup in case the editor gets opened again, but also needing this markup not to show in the final product?

If I was using CKEditor alone I could obtain the desired markup just from

CKEDITOR.instances.myInstance.getData();

Again, thank you for your time and for all the work put into this project!

`Plugin gjs-plugin-ckeditor not found` although following the readme

I'm trying to work the bare minimum of this plugin as per the instructions found in the Readme.md.
My current code structure is:
index.html:

  . . .
  <script src="node_modules/grapesjs/dist/grapes.min.js"></script>
  <script src="node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
  <script src="node_modules/grapesjs-plugin-ckeditor/src/index.js"></script>

  </head>

<body>
  <div id="gjs"></div>
</body>
<script>
  const editor = grapesjs.init({
    container: '#gjs',
    components: '<div class="txt-red">Hello world!</div>',
    style: '.txt-red{color: red}',
    plugins: ['gjs-plugin-ckeditor'],
    pluginsOpts: {
        'gjs-plugin-ckeditor': {/* ...options */}
    }
  });
</script>

but I'm getting this warning:
Plugin gjs-plugin-ckeditor not found
can you please link or refer an updated way to run this? also I have no problem creating a pr for the readme as soon as I figure this out

After ckeditor dialog poped up and close, the content cannot edit again

Hi @artf ,

When the dialog triggered by ckeditor, then close the dialog, the content cannot able to edit.

Many clicks to make text area editable

Hi Art!

I'm implementing the ckeditor plugin with grapesjs, but I've perceived that it is necessary so many clicks over the text area to becames editable this place. I think some persons will have some difficulties to deal with it and it could be a block barrier to user experience.

For example, trying to edit a text inside button is little bit hard, because the ckeditor does not allow to edit the text content directly

How can we set the editor to for example, if I click one time over the text, it enable the ckeditor bar and turn the place editable?

Thanks!

Link edit misbehaviour

Hello,
I've found a malfunction while editing links inside of text blocks.
The first time you toggle the CKEditor with double click on a text block, everything works fine, but for the second and following blocks you make a double click to open up the CKEditor the links aren't recognized correctly. You can edit those links. The Editor can't handle them correctly.
I've searched for an error log but found nothing.

This issue also appears in this demo.
I'll hope for some solution
Kind regards
Maxi

How to customize toolbar?

Any example of how to customize the toolbar?

This is my current code, but it is not working.

    pluginsOpts: {
        'gjs-plugin-ckeditor' : {
            language: 'en',
            toolbar: [
                { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
            ],
        }
    }

CKEditor and Built-in Text Editor not showing after instalation

I've been trying to get this plugin to work forever, I had given up but decided to try again because it is so valuable. After following the steps, neither text editor/formatter (built-in or CKEDITOR) is showing up when clicking to edit the text. I've tried with ckeditor and ckeditor4. I've followed pretty much all the steps as I did for other plugins and I can't get this one to work.

Can anybody help me?

Here is my code:

// Editor dependecies
import "grapesjs/dist/css/grapes.min.css";
import grapesjs from "grapesjs";
import "grapick/dist/grapick.min.css";
import "grapick/dist/grapick.min.js";
import "ckeditor4/ckeditor.js";
// import "grapesjs-plugin-ckeditor/dist/grapesjs-plugin-ckeditor.min.js";
import CorePlugin from "./plugins/coreplugin";
import GrapesJSBackgroundPlugin from "grapesjs-style-bg";
import GrapesJSStyleFilter from "grapesjs-style-filter";
import GrapesJSGradient from "grapesjs-style-gradient";
import GrapesJSCKEditor from "grapesjs-plugin-ckeditor";

class Editor extends Component {
    componentDidMount() {

        [...]


        let activePlugins = [
            GrapesJSBackgroundPlugin,
            GrapesJSStyleFilter,
            GrapesJSGradient,
            GrapesJSCKEditor,
            CorePlugin,
            // "gjs-plugin-ckeditor",
        ];

        let optionsPlugins = {
            [CorePlugin]: {
                firebase,
                clientId,
                user,
                store,
            },
            [GrapesJSCKEditor]: {
                language: "en",
                position: "center",
            },
        };

        const editor = grapesjs.init({
            container: "#canvas",
            canvas: {
                scripts: scripts,
                styles: styles,
            },
            fromElement: true,
            height: "100%",
            width: "100%",
            panels: { defaults: [] },
            storageManager: {
                id: "", // Prefix identifier that will be used on parameters
                type: "clientstorage",
                autosave: false,
                autoload: true,
                stepsBeforeSave: 1,
            },
            plugins: activePlugins,
            pluginsOpts: optionsPlugins,
        });
    }
}

Adding a ckeditor plugin within grapesjs

How can I add a plugin for ckeditor, which is initialized from within grapesjs script, and the config is inside grapesjs config.

conflicting with grapesjs-tui-image-editor

It seems like I can run either grapesjs-tui-image-editor, or grapesjs-plugin-ckeditor, but if I try to use both the CKeditor never loads with the following error:

Error: [CKEDITOR.resourceManager.load] Resource name "dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,notification,button,toolbar,clipboard,panel,floatpanel,colordialog,templates,menu,contextmenu,copyformatting,div,resize,elementspath,enterkey,entities,popup,filetools,filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,indentblock,indentlist,smiley,menubutton,language,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastetools,pastefromgdocs,pastefromword,preview,print,removeformat,save,selectall,showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,tabletools,tableselection,undo,lineutils,widgetselection,widget,notificationaggregator,uploadwidget,uploadimage,wsc,justify,colorbutton,panelbutton,font,placeholder,sharedspace" was not found at <URL>/ckeditor/plugins/dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,notification,button,toolbar,clipboard,panel,floatpanel,colordialog,templates,menu,contextmenu,copyformatting,div,resize,elementspath,enterkey,entities,popup,filetools,filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,indentblock,indentlist,smiley,menubutton,language,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastetools,pastefromgdocs,pastefromword,preview,print,removeformat,save,selectall,showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,tabletools,tableselection,undo,lineutils,widgetselection,widget,notificationaggregator,uploadwidget,uploadimage,wsc,justify,colorbutton,panelbutton,font,placeholder,sharedspace/plugin.js?t=K5H9

If I turn off the tui-image-editor plugin the CKEditor loads fine, but with the image editor plugin on based on the error it's failing to load any of the plugins (and giving this strange comma separated error)

Fonts

I'm using the CKEditor plugin with newsletter editor, when choosing the font type, the listing does not overlap in the div.
Tks.

It does not allow html insertion

when I try to add a table with ckeditor it will interrempe and show an error in console.

The given range isn't in document.
Is it then possible to generate the html in the text component?

CKeditor4 issue with Enter new line + press enter

Hi, if someone looking for solve for issue with new line.

I have solution:

CKEDITOR.on('instanceCreated', function(e) {
  e.editor.on('change', function (event) {
    const selectedText = editor.getSelected();
    editor.trigger(`component:update component:input`, selectedText);
  });
}); 

It's for update block after each changes.

Initialization ckeditor

@artf , Hi... I set an html to initialize with the editor, but it is accusing an error when trying to format the text with the ckeditor.

Template html:
.....

<table class="footer" style="font-size:14px">
              <tr>
                <td>
                      <span>Oferta válida até o dia 24/05/2017, às 23h59 (horário de Brasília), para as compras efetuadas pela 
                      Internet, ou enquanto durarem nossos estoques (o que ocorrer primeiro).
                      </span>
                      <br><br>
                      <span>&nbsp;*MONTAGEM GRÁTIS.&nbsp;</span>
                      <a href="http://www.koerich.com.br/institucional/montagem" target="_blank">Consulte o regulamento</a>
                      <br><br>
                      <span>Caso tenha alguma dúvida, consulte o link &quot;</span>
                      <a href="http://www.koerich.com.br/institucional/atendimento" target="_blank">Atendimento</a>
                      <span>&quot; de nosso site.</span>
                </td>
              </tr>
            </table>

...

On paste event

Is it possible to use the paste event of ckeditor ?

Same as https://ckeditor.com/docs/ckeditor4/latest/guide/dev_clipboard.html

Repeating content when editing and rollback

Hi Art!

I'm having an issue with grapesjs and ckeditor when I try to edit exclude a component and roll back that. I'm attaching a screencast to show what is happening

Bind CKEDITOR on one div having an named class (instead of all P tags)

The CKEDITOR is bind on each P element. Is it possible to bind CKEDITOR on an div having an class?

Mine situation:

<div class="Content"><p>Hello <span class="bold">world</span></p><p>Working with <span class="bold">CKEDITOR</span></p></div>

Table button doesn't show up

Hi!

I'm trying to add this plugin, I don't know why, but the table button doesn't show up at the 'insert' group, anyone knows why?

ReferenceError: CKEDITOR is not defined

Hi,

I'm trying to add this plugin to my GrapesJS and I'm getting this error:

 ReferenceError: CKEDITOR is not defined

from:

60 | if (!CKEDITOR) throw new Error("CKEDITOR instance not found");

Where is this global variable instantiated?

span couldn't edit with CKEditor

HI @artf I'm having an issue for allowing element to edit with CKEDITOR.
Currently I could allow a span to be read and now it get an error like

my code is below.
`

        var editor = grapesjs.init({
            container: '#gjs',
            fromElement: true,
            plugins: ['gjs-preset-newsletter','gjs-plugin-export','gjs-plugin-ckeditor'],
            pluginsOpts: {
                'gjs-plugin-ckeditor': {
                    position: 'center',
                    option: {
                        enterMode: CKEDITOR.ENTER_BR,
                        toolbar: [
	                        { name: 'styles', items: ['Font', 'FontSize'] },
	                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat'] },
	                        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
	                        { name: 'links', items: ['Link', 'Unlink'] },
	                        { name: 'colors', items: ['TextColor', 'BGColor'] }
                        ]
                    }
                }
            }
        });
        var domC = this.editor.DomComponents;
        var textType = domC.getType('text');
        domC.addType('span', {
            model: textType.model.extend(
                {},
                {
                    isComponent(el) {
                        if (el.tagName == 'SPAN') {
                            return {
                                type: 'Span',
                                src: el.src,
                                tagName: el.tagName.toLowerCase(),
                                editable:true
                            };
                        }
                    }
                }
            ),
            view: textType.view
        });


        editor.runCommand('gjs-get-inlined-html');/*make the template respond to changes immediately*/
        
        
     `

Pressing enter jumps the user down the page

While editing the content within a text component, whenever a user presses the enter key, the user gets jumped further down the page. I'm unable to reproduce this in the demo, which makes me think perhaps there's an issue that's causing the newest CKEditor version and Grapes to not play well together?

My configuration:

	pluginsOpts: {
		'gjs-plugin-ckeditor': {
			position: 'center',
			options: {
				customConfig: '',
				language: 'en',
				
				startupFocus: true,
				extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
				allowedContent: true, // Disable auto-formatting, class removing, etc.
				enterMode: CKEDITOR.ENTER_BR,
				extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
				toolbar: [
					{ name: 'styles', items: ['Font', 'FontSize' ] },
					['Bold', 'Italic', 'Underline', 'Strike'],
					{name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
					{name: 'links', items: ['Link', 'Unlink']},
					{name: 'colors', items: [ 'TextColor', 'BGColor' ]},
				],
			},
		},
	},```

Integrating with Reactjs

Can anyone help regarding connecting the plugin to grapesjs through react?

been trying to connect through:

import CKEDITOR from 'ckeditor'
import grapesCK from 'grapesjs-plugin-ckeditor'

this.editor = grapesjs.init({
plugins: [grapesCK],...

Everytime I try to double click on a text I get:
"TypeError: Cannot set property 'dir' of undefined"

Any help/thoughts will be appreciated

Some CKEditor features only usable if div element is edited

Many CKEditor functions are only available, if the inline code is surrounded by an HTML div tag (see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#property-blockless and https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dtd.html).

This means that common CKEditor plugins (e.g. justify, list) can currently often not be used.
Example:
If I want to center a headline, then I do not get this option for an h-element. I tried wrapping it with a div, but this does not help.

What is the solution for e.g. centering an h-element?

CKEditor tool bar is not displaying for Text blocks.

For the text-blocks it is allowing to display the CKEditor toolbar for the first time but once i save that template, then CKEditor toolbar is not displaying for Edited Text-blocks.

i am getting error as Error: The specified element mode is not supported on element: "u".

and i need to know where & How to configure
CKEDITOR.dtd.$editable.span = 1; CKEDITOR.dtd.$editable.a = 1; CKEDITOR.dtd.$editable.strong = 1; CKEDITOR.disableAutoInline = true;

Wrong position when open ckEditor.

I think the error is here.:
https://github.com/artf/grapesjs-plugin-ckeditor/blob/master/src/index.js#L89

This event didn't exist anymore, according to this PR: GrapesJS/grapesjs#3953

position of link button ckeditor grapesjs

ckeditor in grapesjs is not maintaining its position when we click on the ok button link dialog box. it always go to the starting position. Urgently help needed and fixing.
Thanks.

Not able to use colors(TextColor,BGColor) and styles(Font,FontSize) in toolbar

Hi artf,

I am adding colors an styles section in toolbar. I am able to see other sections but not colors and styles in editor.

"gjs-plugin-ckeditor": { position: "center", options: { toolbar: [ { name: 'styles', items: ['Font', 'FontSize'] }, { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat'] }, { name: 'links', items: ['Link', 'Unlink'] }, { name: 'colors', items: ['TextColor', 'BGColor'] } ] } },

Am I doing anything wrong in the above code. Can you help me out with this? @artf

Thanks in advance.

CKEditor Dock at bottom of IFrame/Viewing Area

We are trying to dock/pin the CKEditor to the bottom of the IFrame/Viewing area of grapesjs, the problem is we don't have id's for grapesJS at the time we are going through and initializing the editor and configuring toolbar via the plug-in options as the Ids of the text box included seem to be auto generated.

Here are pictures of our typescript component implementation and some pictures of the divs of each editor, so I cannot figure out how to get sharedSpaces: { top: 'id', bottom: 'id' }, toolbarLocation: 'bottom'

Let me know if you have any suggestions or need anything else to help.

how to change gjs-ckeditor-format component

hi guys,
we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components.
I wanna know , could we change this option?
I want to make my own custom component with for example [data-gjs-type]="anyDiv" and have the same functionality like in
[data-gjs-type]="text". maybe someone knows how to change that?
maybe i can change that in ckeditor config? when we initialize ckeditor for example:
options: {
!!!!!for example:
format: 'text' , want to add ('anyDiv'),
language: 'en',
startupFocus: true,
extraAllowedContent: '();{}', // Allows any class and any inline style
allowedContent: true, // Disable auto-formatting, class removing, etc.
enterMode: ckeditor.ENTER_BR,
uiColor: '#0000001a', // Inline editor color
extraPlugins: 'justify,colorbutton,panelbutton,font,sourcedialog,showblocks',
height: 5,
toolbar:[
[ "Format", 'Font', 'FontSize',"-", "Bold", "Italic", "Strike", "Underline", "Subscript", "Superscript", "RemoveFormat", "-", "-", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock", "-", "TextColor", "BGColor", "-", "-", "-"]
]
},
position: 'left',

How to customize the Ckeditor

Hi @artf,

Hope you are doing fine.
Can you please let us know to customize the provided ckEditor plugin as we want to add more option on link popup of ckEditor.

Please let us do this.
Thanks in Advance.Doing great job with GrapesJS.

CKEditor error on try editing text

Hello Artf!

Well, when i select a text and try to edit it with ckeditor, it lost the focus and the ckeditor disappear.

Is it related to "sharedspace" plugin?
I commented this part of the code because it doesn't work to me:

      // var plgName = 'sharedspace';

      // if (opt.extraPlugins) {
      //   if (typeof opt.extraPlugins === 'string')
      //     opt.extraPlugins += ',' + plgName;
      //   else
      //     opt.extraPlugins.push(plgName);
      // } else {
      //   opt.extraPlugins = plgName;
      // }

Thank you

CKEditor Skins

Does anyone knows how can I add new skins to CKEditor if I'm importing it via CDN ?

CKEditor FontColor Toolbar

Hi artf,

I have a problem with CKEditor Toolbar, how to show FontColor, FontSize at CKEditor toolbar?

ckeditor justify property doesn't appear for <p>,<a>,<h1> and other relatable tag. Works only for the <div> tag

I have modified the toolbars of my ckeditor. My code is below :
'gjs-plugin-ckeditor': {
position: 'left',
options: {
customConfig: '',
language: 'en',
startupFocus: true,
extraAllowedContent: '();{}', // Allows any class and any inline style
allowedContent: true, // Disable auto-formatting, class removing, etc.
enterMode: CKEDITOR.ENTER_BR,
extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
toolbar: [['Styles', 'Format', 'Font', 'FontSize'],
['Bold', 'Italic', 'Underline', 'Strike'],
{ name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
{ name: 'links', items: ['Link', 'Unlink'] },
{ name: 'colors', items: ['TextColor', 'BGColor'] },
{ name: 'justify', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }
]
}
}

The problem is that the justification tool option appears only for the div tag and not for the other tags.
The below screenshot represents the behaviour with tags other than div tag

The below screenshot represents the behaviour for the div tag

The behaviour should be the same for both the tags. Can't figure out the reason.
Any ideas ?

Editor not working : Cannot read property 'on' of null

Hi, i found some bug here :

the error is from :

,o=CKEDITOR.inline(t,n.options),o.on("contentDom",function(){var e=o.editable();e.attachListener(

I think it is because the CKEDITOR not getting element from inside an iframe that generated by grapesjs ..

can anybody help me with this issue ?? :)

CKEditor does allow editing on all text content

Hi Art!

I've got a new bug about ckeditor plugin. Now, if we have a text inside tag as bellow:

<tr style="box-sizing: border-box;">
      <td id="c2662" width="520" align="left" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; text-align: left;">Foi concedida a você a 
habilitação oficial para jogar  <strong id="c8659" style="box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;">com 50% de desconto</strong> no próximo sorteio de Mega Sena, com a 
oportunidade de ganhar milhões.
       </td>
</tr>

CKeditor does not allow do edit the content. I've made a screencast to show to you what is happening:

Problems to move a content or drop from canvas if inline editor is enabled

Hi Art!

I'm having issue with ckeditor, where I cannot move o remove the text component, because ckeditor is over the icons that allow to do this operation, I'm attaching a screencast showing what is happening.

My suggestions is when the editor is over, the icons could be move for bottom of element select. It will helps a lot.

Thanks

[BUG] CKEditor isn't removed from the DOM

CKEditor isn't removed from the DOM after component deselected. It could cause weird bugs like double CKEditor:

Text Element Drag Issue.

@artf I have used ckeditor plugins and it seems fine some level. There is small issue when we drag element in the canvas (Move element up or down level) then it recreate editor for same text element. So user can not know which editor they have use also it not looking good to show multiple editor for same element. So it will good that if user drag any elemmet then either new ckeditor should not create or delete previous one and add new.
I have checked it on you new project also and same issue happend on you site also.

Uncaught TypeError: Cannot set properties of undefined (setting 'dir')

grapesjs-plugin-ckeditor.min.js:2

   Uncaught TypeError: Cannot set properties of undefined (setting 'dir')
at Object.t (grapesjs-plugin-ckeditor.min.js:2)
at d (grapesjs-plugin-ckeditor.min.js:2)
at Array.u (grapesjs-plugin-ckeditor.min.js:2)
at h (grapesjs-plugin-ckeditor.min.js:2)

CKEditor error

when I importing the plugin of ckeditor, it gives me the following error. How will I fix this issue?

Copy-Paste duplication // CKEDITOR

Hi all,

I've integrated CKEDITOR as RTE on grapesjs.

But now, when i made a copy and paste the content shows duplicated.

Anyone had this bug before?

Thanks