Боль CKeditor5 и подключение на React сайт

Question

Всем привет! Пытаюсь поставить на сайт CKeditor5. Сайт на React. Решила создать чистый проект и попытаться поставить кастомный билд с сайта, делала все по инструкции.

import React, {Component} from 'react'
import FirstSection from './Components/FirstSection.js'
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom/src/ckeditor';

function App() {
    const editorConfiguration = {
        toolbar: [ 'bold', 'italic' ]
    };
  return (
    
    <section id="section">
       <CKEditor
                    editor={ Editor }
                    config={ editorConfiguration }
                    data="<p>Hello from CKEditor 5!</p>"
                  
                />
               
    </section>
  );
}

export default App;

Гуглю 3 день, не могу найти решение проблемы. Мб я что-то очевидного не понимаю? P.S. Typescript не использую. Если нужны будут еще какие-то скрины с радостью предоставлю.

Answer 1

Короче смотри, если еще актуально, все делаешь по мануалу: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#integrating-a-build-from-the-online-builder

Обрати внимание, что папка из билда кустомного должна быть на том же уровне, что и src и node_modules, но просто так ее заимпортить ты не можешь, реакт заругает. По этому нужно добавить твой билд модулем через packege.json

npm add file:./ckeditor5

в packege.json появится строчка

"ckeditor5-custom-build": "file:./ckeditor5"

и потом в теории ты сможешь заимпортить это в компоненте

import Editor from 'ckeditor5-custom-build/src/ckeditor';

Но у меня так не завелось :), возможно из-за ts, по этому я добавил в packege.json полный путь

"ckeditor5-custom-build": "file:./ckeditor5/build/ckeditor",

и подключил в компоненте просто

import Editor from 'ckeditor5-custom-build';

И все завелось. Потратил тоже дохулиард времени, на то, что компонент тупо не работал, и не срал в консоль вообще ничего. Нужно было просто перезапуститься :)

ЗЫ, ну и если кто ts юзает то просто можно вписюлить в свои типы или еще куда

declare module 'ckeditor5-custom-build';

БЛОГ НА HUSL

Боль CKeditor5 и подключение на React сайт

Ответы (1 шт):