search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.58k stars 3.7k forks source link

Can't run project when I use Font from '@ckeditor/ckeditor5-font/src/font'; #17084

Closed thienhuynh1314 closed 2 months ago

thienhuynh1314 commented 2 months ago

I imported CKEditor in main for global as 

import CKEditor from "@ckeditor/ckeditor5-vue2";

Vue.use(CKEditor)

In a local file

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
// import Font from '@ckeditor/ckeditor5-font/src/font';

@Component({
    template: require("./template.html"),
    components: {
        "person-search": () => import("../../components/person-search/PersonSearchComponent.vue"),
        "property-search": () => import("../../components/property-search/PropertySearchComponent.vue"),
        "demand-search": () => import("../../components/demand-search/DemandSearchComponent.vue"),
        "cc-bcc-person-search": () => import("../../components/cc-bcc-person-search/CCPersonSearchComponent.vue"),
        "html-ck-editor": () => import("../../../../../components/html-editor/HtmlCKEditor.vue"),
    }
})
export default class MassMailingComponent extends BaseMailling { 
  editor = ClassicEditor;
    editorData = "";
    editorConfig = {
        // plugins: [ Font, /* other plugins */ ],
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
                '|', 'alignment',
                'link', 'uploadImage', 'blockQuote', 'codeBlock',
                '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
                '|', 'fullScreen'
            ],
            shouldNotGroupWhenFull: true
        },
    };
}

I can't run project when I uncomment Font:

 ERROR  Failed to compile with 2 errors                                                                                                                                  1:23:14 PM

This dependency was not found:

* -!../../../../../../../css-loader/index.js??ref--11-1!./@ckeditor/ckeditor5-ui/theme/mixins/_dir.css in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-ui/theme/components/colorselector/colorselector.css, ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/ckeditor5/node_modules/@ckeditor/ckeditor5-ui/theme/components/search/search.css

To install it, you can run: npm install --save -!../../../../../../../css-loader/index.js??ref--11-1!./@ckeditor/ckeditor5-ui/theme/mixins/_dir.css

package.json

"dependencies": {
    "@aspnet/signalr": "^1.0.3",
    "@ckeditor/ckeditor5-build-classic": "31.1.0",
    "@ckeditor/ckeditor5-vue2": "1.0.5",
    "@google/markerwithlabel": "^1.2.2",
    "@mailupinc/bee-plugin": "1.3.6",
    "@shopify/draggable": "^1.0.0-beta.8",
    "babel-plugin-jsx-event-modifiers": "2.0.5",
    "babel-plugin-jsx-v-model": "2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "bootstrap": "^4.0.0-alpha.4",
    "bootstrap-datepicker": "1.7.1",
    "chart.js": "^2.9.3",
    "ckeditor5": "^43.1.0",
    "cldr": "^4.8.0",
    "cropperjs": "^1.5.6",
    "element-ui": "2.4.11",
    "fast-json-patch": "^2.0.6",
    "fullcalendar": "3.6.1",
    "fullcalendar-scheduler": "1.8.0",
    "hammerjs": "2.0.8",
    "html-to-image": "^1.6.2",
    "html2canvas": "^1.0.0-alpha.12",
    "interactjs": "^1.3.4",
    "invert-color": "^1.2.2",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jsonfile": "^4.0.0",
    "jssor-slider": "^27.5.0",
    "localforage": "^1.7.3",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.32",
    "node-sass": "^5.0.0",
    "nprogress": "^0.2.0",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.12.9",
    "quill-image-drop-module": "^1.0.3",
    "smartlook-client": "^8.3.0",
    "sortablejs": "1.9.0",
    "tippy.js": "^3.2.0",
    "tslib": "^1.9.3",
    "vee-validate": "2.0.6",
    "vue": "^2.6.10",
    "vue-class-component": "^7.2.6",
    "vue-emoji-picker": "^1.0.1",
    "vue-i18n": "^7.3.4",
    "vue-inputmask": "^0.2.1",
    "vue-lottie": "^0.2.1",
    "vue-property-decorator": "^9.1.2",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vue-scrollto": "2.11.0",
    "vue-select-image": "^1.7.0",
    "vue-template-compiler": "^2.6.10",
    "vue2-editor": "^2.6.6",
    "vue2-google-maps": "^0.9.7",
    "vue2-scrollspy": "2.2.2",
    "vuedraggable": "2.16.0",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.0"
  },

I'm using vue2 class component and typescript v5

Witoso commented 2 months ago

You're using a "@ckeditor/ckeditor5-build-classic"; which was put on deprecation path from v42. This build cannot be extended with other features like Font. If you need to extend the editor with plugins, consider migration.

You have mixed, and very old dependencies with new ones

    "@ckeditor/ckeditor5-build-classic": "31.1.0",
    "ckeditor5": "^43.1.0",

The import should happen from the main package

// import Font from '@ckeditor/ckeditor5-font/src/font';
// To

import { Font } from 'ckeditor5';
thienhuynh1314 commented 2 months ago

@Witoso Thanks for your support But I get the new error after updating code like your suggestion I update ckeditor/ckeditor5-build-classic to ^43.1.0 and in the local file I update as:

import { ClassicEditor, Font } from 'ckeditor5';
  editor = ClassicEditor;
    editorData = "";
    editorConfig = {
        plugins: [ Font, /* other plugins */ ],
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                '|', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'code',
                '|', 'alignment',
                'link', 'uploadImage', 'blockQuote', 'codeBlock',
                '|', 'bulletedList', 'numberedList', 'todoList', 'outdent', 'indent',
                '|', 'fullScreen'
            ],
            shouldNotGroupWhenFull: true
        },
    };

Error:

Screen Shot 2024-09-12 at 13 51 25

I'm wanting to add font size, font color, ... to the toolbar of editor.

NOTE: I can run with import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; before

Witoso commented 2 months ago

I'm wanting to add font size, font color, ... to the toolbar of editor.

Then read the migration guide I linked above, and don't use @ckeditor/ckeditor5-build-classic, as this built cannot be extended.

This error suggests the webpack can't build the source files, investigate the webpack version and build configuration. Since version 42.0.0 we ship ES2022 code.