GrapesJS / ckeditor

This plugin replaces the default Rich Text Editor with the one from CKEditor
BSD 3-Clause "New" or "Revised" License
103 stars 101 forks source link

CKEditor and Built-in Text Editor not showing after instalation #45

Closed hellocaio closed 1 year ago

hellocaio commented 3 years ago

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,
        });
    }
}
hellocaio commented 3 years ago

This might be the issue:

CKEDITOR error screenshot

hellocaio commented 3 years ago

Anyone?

dalmatele commented 2 years ago

Agree. It does not work when I integrate in ReactJS but when I try in html file, it works.