Giter Site home page Giter Site logo

grapesjs-plugin-ckeditor5's People

Contributors

goodphp avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

censonalvin kenjctech chrisijoyah leetuanincepit rolfvandekrol

grapesjs-plugin-ckeditor5's Issues

Cannot make it work

I am following README.md and I have the following index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ckeditor5</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="assets/grapes.min.css" rel="stylesheet">
  <script src="assets/grapes.min.js"></script>
  <script src="assets/grapesjs-preset-webpage.min.js"></script>
  <link href="assets/grapesjs-preset-webpage.min.css" rel="stylesheet">
  <script src="assets/ckeditor5.js"></script>
  <script src="assets/grapesjs-plugin-ckeditor5.min.js"></script>
</head>
<body>
  <div id="gjs">
  </div>

  <script type="text/javascript">
    var editor = grapesjs.init({
        container : '#gjs',
        plugins: ['gjs-plugin-ckeditor5'],
        pluginsOpts: {
          'gjs-plugin-ckeditor5': {
              position: 'left',
              options: {
                trackChanges: {},
                toolbar: {
                  items: [
                    'heading',
                    '|',
                    'fontColor',
                    'fontSize',
                    'fontFamily',
                    'fontBackgroundColor',
                    'alignment',
                    'bold',
                    'italic',
                    'underline',
                    'strikethrough',
                    'link',
                    'bulletedList',
                    'numberedList',
                    'horizontalLine',
                    '|',
                    'outdent',
                    'indent',
                    '|',
                    'blockQuote',
                    'insertTable',
                    '|',
                    'undo',
                    'redo'
                  ]
                },
                language: 'en',
                table: {
                  contentToolbar: [
                    'tableColumn',
                    'tableRow',
                    'mergeTableCells',
                    'tableCellProperties',
                    'tableProperties'
                  ]
                },
                licenseKey: ''
              }
            }
        }
    });
  </script>
  <app-root></app-root>
</body>
</html>

But when I load it, I get console error:

Uncaught ReferenceError: ClassicEditor is not defined
    at grapesjs-plugin-ckeditor5.min.js:2:8361
    at grapes.min.js:2:676285
    at Array.forEach (<anonymous>)
    at Object.init (grapes.min.js:2:676122)
    at (index):21:27

The versions that I have installed and put in the assets folder (to load them from index.html following the README.md):

    "grapesjs": "0.18.2",
    "grapesjs-plugin-ckeditor5": "0.0.33",
    "grapesjs-preset-webpage": "^0.1.11",

This plugin is also missing guidance on how to use it when installed as package from npm (with import 'grapesjs-plugin-ckeditor5'`).

Integrate CkEditor with Angular

When I use this lib for Angular (14) I still have the default text editor.
angular.json

            "styles": [
              "src/styles.scss",
              "./node_modules/grapesjs/dist/css/grapes.min.css",
            ],
            "scripts": [
              "./node_modules/grapesjs/dist/grapes.min.js",
              "./node_modules/grapesjs-preset-newsletter/dist/index.js",
              "./node_modules/grapesjs-plugin-ckeditor5/ckeditor5/build/ckeditor.js",
              "./node_modules/grapesjs-plugin-ckeditor5/dist/grapesjs-plugin-ckeditor5.min.js"
            ]

web-builder.component.ts
(I cannot perform import pluginCkEditor from 'grapesjs-plugin-ckeditor5';)

import { Component, OnInit } from '@angular/core';
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-preset-newsletter';

@Component({
  selector: 'app-web-builder',
  templateUrl: './web-builder.component.html',
  styleUrls: ['./web-builder.component.scss']
})
export class WebBuilderComponent implements OnInit {
  public editor:any = null

  constructor() { }

  ngOnInit(): void {
    this.editor = grapesjs.init({
      container: '#gjs',
      fromElement: true,
      height: '700px',
      width: 'auto',
      storageManager: false,
      panels: { defaults: [] },
      plugins: [plugin, 'gjs-plugin-ckeditor5'],
      pluginsOpts: {
        'gjs-plugin-ckeditor5': {
          position: 'left',
          options: {
            trackChanges: {},
            toolbar: {
              items: [
                'heading',
                '|',
                'fontColor',
                'fontSize',
                'fontFamily',
                'fontBackgroundColor',
                'alignment',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'link',
                'bulletedList',
                'numberedList',
                'horizontalLine',
                '|',
                'outdent',
                'indent',
                '|',
                'blockQuote',
                'insertTable',
                '|',
                'undo',
                'redo'
              ]
            },
            language: 'en',
            table: {
              contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableCellProperties',
                'tableProperties'
              ]
            },
            licenseKey: ''
          }
        }
      }
    });

  }

}

CKEditor5 popup inside grapesjs iframe

We have a problem with using this ckeditor5 grapesjs plugin. We are providing an external css that is loaded inside the grapesjs iframe to style the grapesjs content the user creates. But when the user double-clicks a text in grapesjs editor to open ckeditor5 popup, the content inside the ckeditor does not use the css loaded inside grapesjs - this makes the content inside the ckeditor5 popup different compared to what the user sees in grapesjs. Our question is can the plugin somehow open the ckeditor5 editor inside the grapesjs iframe so the same css is applied to the ckeditor5 editor content ?

Error when trying to close the CKEditor modal

This plugin (this one in dist folder) relies on the presence of variable named editor in the global window object. This has to be removed fixed - editor.Modal.close().

The sample code in the repository does not provide correct information - the blocks list is empty and the user cannot actually test the plug in. I needed to install and use gjs-preset-webpage grapesjs plug in to actually make the sample workable.

How to reproduce:

  • Use the sample code provided in this repository (but also add gjs-preset-webpage - see how to in the official grapesjs page grapesjs.com )
  • Modify the index.html page renaming var editor = grapesjs.init(... to var abc = grapesjs.init(... (because we don't use hard coded names in our code)
  • Drag and drop text block and double click it to show the modal editor
  • Click on "Save" (or "Close") button

What happens:

The modal editor is not closed. Error is shown in the browser console:

(index):1 Uncaught ReferenceError: editor is not defined
    at HTMLInputElement.onclick

The error is because the plugin code in the dist folder relies on the presence of variable named editor in the window object.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.