0

Всем привет! Пытаюсь поставить на сайт 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;

CKEDITOR5

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

4
  • По какой именно инструкции вы делаете? Вот пример из офф доки. Там все выглядит несколько иначе: ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/…
    – Andrew F
    25 окт 2021 в 9:41
  • @AndrewF, пробовала и официальную документацию и гайды индусов разницы мало) 25 окт 2021 в 11:32
  • по моей ссылке выше все работает, я проверил. Но не понятно о каком кастомном билде выговорите.
    – Andrew F
    25 окт 2021 в 11:35
  • @AndrewF, попробуйте добавить любой плагин для CKeditor) проблемы начинаются с того момента, когда вы работаете не с начальной сборкой. 25 окт 2021 в 11:54

1 ответ 1

2

Короче смотри, если еще актуально, все делаешь по мануалу: 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';

2
  • спасибо большое, но я уже использовала suneditor - все с ним стало гораздо понятнее) 14 ноя 2021 в 13:29
  • Спасибо большое, очень помогли!
    – Evgenii
    10 апр 2022 в 20:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.