CKEditor error - Githubissues

NorthstarTech commented 6 years ago

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

error

artf commented 6 years ago

This plugin doesn't include CKEditor itself so you have to do it manually

NorthstarTech commented 6 years ago

For clarification, when you say manually, what do you mean exactly? Where can I add in CKeditor?

artf commented 6 years ago

I mean you have to include the CKEditor library

<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>

unicorn0690 commented 6 years ago

@artf Need help here.

imported CKEDITOR from node_modules as shown in below approach 1, but with this approach, I am not able to fetch config.js and editor.css resources.

Approach 1


import React, { Component, Fragment } from 'react'
import grapesjs from 'grapesjs'
import CKEDITOR from 'ckeditor/ckeditor'
import 'grapesjs-preset-newsletter'
import 'grapesjs-plugin-ckeditor'

class TemplateBuilder extends Component {

    state = {
        editor: {}
    }

    render () {
        return (
            <div id='#gjs'></div>
        )
    }

    componentDidMount () {
        let editor = grapesjs.init({
            height: '100%',
            container: '#gjs',
            fromElement: true,
            storageManager: { type: null },
            plugins: ['gjs-preset-newsletter', 'gjs-plugin-ckeditor'],
            pluginsOpts: {
                'gjs-plugin-ckeditor': {
                    position: 'center',
                    options: {
                        startupFocus: true,
                        // Allows any class and any inline style
                        extraAllowedContent: '*(*);*{*}',
                        // Disable auto-formatting, class removing, etc.
                        allowedContent: true,
                        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' ] }
                        ]
                    }
                }
            }
        })
    }
}
export default TemplateBuilder```

In **approach 2**, I directly included ckeditor package in my root and called the script as shown below, in this I was able to fetch config.js and editor.css resources, but i am unable to see the ckeditor getting initialised on double clicking any editable content.

**Approach 2**
```<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dashboard</title>
        <script src="/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>```

Amir2828 commented 5 years ago

Hey, Did you manage to solve this issue? I am facing the same one

cartifon commented 4 years ago

@artf did you see this approach 1? I'm facing the same thing....

GrapesJS / ckeditor

CKEditor error #9