Adelitusn.ru

ПК и Техника
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Настройка CKEdit или как убрать лишние значки на панели

Настройка CKEdit или как убрать лишние значки на панели

В предыдущей статье я поделился с Вами отличным WISIWIG -редактором, который замечательно подходит для использования его на большинстве сайтов. Этот инструмент несомненно облегчает набор и редактирование текста, несведущим в html людям.

В той же статье я обещал поделиться секретами настройки CKE dit (если это можно назвать секретом), которые я использую при разработке клиентских сайтов.

Лично для меня было достаточно сложно на просторах русского интернета найти какую-нибудь информацию по настройке этого WISIWIG -редактора, поэтому пришлось читать документацию на английском. Кстати, этот факт и сподвиг меня на написание этой заметки.

Секрет всего фокуса заключается в том, что практически все настройки сосредоточены в файле /ckeditor/config.js. Неожиданно правда. Если Вы, как и я, используете в качестве CMS Textpattern, то путь к файлу будет немного другой — /textpattern/ckeditor/config.js.
По-умолчанию (без какой-либо настройки) файл выглядит так:

Для того, чтобы настроить вывод значков на панели, нужно добавить параметр config.toolbar_Full. Для того, чтобы вывести все возможные значки, которые предлагает эта система, на панель, добавляем код:

Для того, чтобы убрать ненужные значки, необходимо вручную удалить его обозначение („Maximize“, „ShowBlocks“ и т.д.) в этом коде. Соответственно сохранив правильный синтаксис. Сложного здесь, думаю, ничего нет.

Как делаю я?

Обычно для клиентского сайта я использую вот такой вид:

Я намерено убираю инструменты для форматирования текста, которые меняют вид отображения текста на сайте, такие как цвет шрифта, его гарнитура и размер, так как считаю, что этим должен заниматься web-разработчик, а не человек, который наполняет сайт. К тому же большинство людей, которые впоследствии будут работать с этим сайтом, чаще всего имеют «странный вкус», который может испортить общий вид сайта.

Для примера, такой вид интерфейса, можно настроить вот таким кодом:

Еще раз повторюсь, если скажу, что на сегодняшний день CKE dit – это лучшая система, которую я только видел.

Комментарии

Мне пришлось провести следующую манипуляцию:
config.toolbar=‘MyConf’;
config.toolbar_MyConf = [
…//…
];

А как добавить на одну страницу две версии ckeditor (basic и full).

а как добавить диалоговое окно для вставки/загрузки картинки?

сам нашел: http://ckeditor.com/addon/uploadimage

Как сделать так, чтобы все внешние ссылки открывались в новой вкладке?

Как сделать так, чтобы все внешние ссылки открывались в новой вкладке?

Как проверить ссылки на закрытость в nofollow без плагина?

Как проверить ссылки на закрытость в nofollow без плагина?

Как установить Slimbox у себя на сайте?

Изменяем CSS-параметры посредством JS

Проверка на ввод цифр с помощью JS

Проверка на ввод цифр с помощью JS

Как сделать спойлер в html с помощью JS?

Как сделать спойлер в html с помощью JS?

Как установить Sublime Text 2 в Ubuntu быстро и просто?

Как быстро переконвертировать видео OGV в AVI

Как конвертировать видео формата OGV в AVI или MP4?

Если Вы используете материал моего блога, то будьте добры поставьте ссылку.

Yii Framework

MihailDev/yii2-ckeditor — как установить плагин?

  • Версия для печати

MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Кто-нибудь пробовал установить плагин для CKeditor от MihailDev?
Допустим, плагин для вставки видео — http://ckeditor.com/addon/videodetector

Делаю всё по инструкции, но не работает.

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Да. делал форк для подключения нужных плагинов

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Loveorigami писал(а): Да. делал форк для подключения нужных плагинов

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Отличается тем, что там уже прикручен elfinder.

И вопрос стоит о том, как добавить свой плагин?

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Решение:

В config.js прописываем:

И в assets подключаем config.js

А дальше все просто, скачиваем плагин и распаковываем в папку plugins и указываем название плагина в *

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Re: MihailDev/yii2-ckeditor — как установить плагин?

  • Цитата

Может кому-то пригодиться, сэкономит время и нервы следующая инструкция по подключению плагинов в CKeditor от MihailDev на Yii2.
Пример буду приводить с подключением плагина для подсчёта символов «wordcount».

1. Для начала открываем файл Assets.php по пути vendormihaildevyii2-ckeditor;
2 . подключаем в этом файле файл config.js, лежащий по пути vendormihaildevyii2-ckeditoreditor:

Читайте так же:
Скачать и установить Яндекс Бар для Mozilla Firefox

Но я предпочту, подключение плагина другим способом, о котором я напишу ниже.

Обратите внимание, что при подключении нескольких плагинов, нужно чтобы их наименования шли через запятую БЕЗ пробелов! Это важно!

4. скачиваем с официального сайта CKEditor нужный нам плагин;
5. закидываем папку с плагином по пути: vendormihaildevyii2-ckeditoreditorplugins
6. подключаем плагин к редактору, который активируем для текстового поля:

7. Обновляем страницу, где подключили редактор — редактор не загрузится, будет ошибка, которую смотрим в консоли, будет, что-то типа плагин такой-то в папке ваш сайт. assets/7sdf89sf/plugins . не найден. Находим эту папку, удаляем, обновляем страницу — всё работает.

Т.к. данные всех плагинов кешируются, то в папку типа assets/7sdf89sf/plugins будет перенесён наш плагин, который мы клали в директорию vendormihaildevyii2-ckeditoreditorplugins.

А когда возникала ошибка на то, что только что установленный плагин не найден, папка с плагинами использовалась та, которая была создана в предшествующих обращениях к странице, где мы подключили CKEditor.

Дополнительные модули для редактора CKEditor на Drupal 8

Пример панели инструмента редактора CKEditor в Drupal 8

Пример панели инструментов редактора CKEditor со многими подключёнными модулями
(но не со всеми из представленных в этом обзоре)

В Drupal 8 по сравнению с Drupal 7 произошли огромные изменения. В частности, самый популярный онлайн-редактор CKEditor перекочевал из разряда внешних модулей в ядро. Это имеет и свои плюсы, и свои минусы. Карты оказались перемешаны и информация по настройке CKEditor на 7-ой версии Друпала на 8-ую не переносится. В частности, если вы прочитали, что можно получить какие-то плюшки, дописав пару строк в файл ckeditor/config.js, то знайте, что это применимо только к седьмой версии. Плюс к этому, даже в рамках одной версии API Друпала претерпевает модификацию и поэтому ранее исправно работавшие модули могут начать создавать проблемы.

По умолчанию в CKEditor на свежеустановленном сайте содержит лишь базовый функционал. Ниже рассмотрены многие полезные дополнительные модули, стабильно работающие на сентябрь 2017 под Drupal 8.3.7. В том числе описаны некоторые тонктости их установки и настройки, до которых автор этих строк долго додумывалась. Выложенны два наших собственных небольших патча. В конце статьи приведены небольшие списки горячих клавиш CKEditor и ссылки на статьи по написании своих модулей. В скобках приведены номера последних версий модулей на момент обзора.

D8 Editor Advanced link

Окно модуля "D8 Editor Advanced link"

(v1.4)
Позволяет вкладывать в тег ссылки дополнительные атрибуты, такие как title, class, id, rel. Наиболее полезен атрибут target, позволяющий открывать ссылку в новом окне. Таким образом пользователь не уходит с вашего сайта до тех пор, пока сам сознательно этого не захочет.

Небольшой трюк для значительного облегчения жизни. Чтобы галочка открытия в новом окне по-умолчанию всегда стояла, необходимо отыскать файл moduleseditor_advanced_linkeditor_advanced_link.module и в строке ‘ #default_value’ => $get_default_value(‘target’, FALSE) ‘ заменить FALSE на TRUE .
(Примечание: модуль Linkit — Enriched linking experience предоставляет больше возможностей, но разобраться с его конфигурированием сложнее.)

D8 Editor File upload

Меню настройки модуля "D8 Editor File upload"

(v1.2)
Позволяет загружать файл на сервер прямо из редактора CKEditor и вставлять в набираемый текст ссылку на него. Если планируете выкладывать на страницах своего сайта архивы или документы, то без этого модуля замучаетесь. В настройках можно задать, куда именно будут помещаться документы, дозволенные расширения и максимальный размер файла.

модуль MIME в работе

(v1.6)
Значительно облегчает повторное использование на страницах уже загруженных на сайт изображений и файлов, создание для них отдельных директорий хранения и т.п.

CKEditor Youtube

Меню настройки модуля "CKEditor Youtube"

(v1.1) , требует library.
Для вставки на сайт видео с YouTube. Можно задать много параметров.

(Примечание: для вставки видео с Vimeo возьмите модуль Video Embed Field . Он обеспечивает более глубокую интеграцию и ещё бóльшие возможности. Другая сторона палки — бóльшая сложность и тяжеловесность.)

CKEditor Abbreviation

(v1.1)
Вставка в текст абревиатур, таких как PHP .
Окно модуля "CKEditor Abbreviation"

CKEditor CodeMirror

(v1.0) , требует library, зависит от модуля Libraries API (v3.x)
Цветовая подстветка кода. Его горячие клавиши приведены на w8tcha.github.io. У модуля много настроек, выводимых в окно конфигурации текстового формата. При установке библиотеки её папку codemirror следует переименовать в ckeditor.codemirror и разместить в корневой папке libraries (если такой нет, то создать) или в sitesalllibraries .

Читайте так же:
Как в Youtube делать таймкод

Пример представления кода в редакторе CKEditor

Пример представления кода

CKEditor Non-breaking space Plugin

(v1.2)
Вставка в текст неразрывные пробелы. К примеру, если хотите быть уверены, что в словосочетании Drupal 8 цифра ни при каких манипуляциях с шириной экрана на окажется оторванной. Выставляется щелчком на кнопке или по нажатию Ctrl+Space .

CKEditor Font Size and Family

(v1.0) , требует library
Добавляет в редактор возможность выбора шрифтов и их размера. По умолчанию не работает. Необходимо скачать патч и поместить содержащийся в нём файл по адресу modulesckeditor_fontsrcPluginCKEditorPlugin . Можно задать свой собственный набор шрифтов. Для оценки, какие туда можно добавлять, а какие не стоит, можете воспользоваться нашим тестированием.

Недостаток модуля: кнопки «Font» и «Size» на панели инструментов неадекватно широкие. Видно на скриншоте в начале статьи.

CKEditor Description List

(v1.0) , требует library
Библиотеку при размещении следует переименовать в descriptionlist . Модуль позволяет вставлять в документ списки определений. Точнее, размещает на панели инструментов кнопки, отвечающие за вставку тегов <dl>, <dt> и <dd>. Теги чередуются автоматически, так что для простых случаев достаточно однократного щелчка по первой из кнопок. Вторая и третья используются лишь при необходимости сгенерировать список с несколькими подряд идущими терминами или определениями.

CKEditor List Style

(v1.1) , требует library
Расширяет возможности стандартных ненумерованных и нумерованных списков, позволяя задать тип оформления и начальное значение. Данные выбираются посредством контекстного меню.

CKEditor Color Button

(v1.0) , имеет зависимость от модуля Panel Button (v1.0) . Их библиотеки library_Color и library_Panel.
Добавляет в CKEditor кнопки для задания цвета текста и фона. Библиотеки должны быть размещены в папке libraries в корне сайта. Размещение их в sitesalllibraries не срабатывает, в том числе не помогает и добавление в название папки «ckeditor.». Вы можете использовать палитру по умолчанию или задать свою. Для выбора цветов можете воспользоваться нашей таблицей.

Цветовая палитра по умолчанию:
​ ​ 1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,
16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,
E67E22,E74C3C,ECF0F1,95A5A6,DDDDDD,FFFFFF,
D35400,C0392B,BDC3C7,7F8C8D,999999,000000

Альтернативная цветовая палитра:
FFEFD5,F1C40F,F39C12,E67E22,D35400,E74C3C,
C0392B,FF0000,FF00FF,8E44AD,8A2BE2,4B0082,
00FFFF,2980B9,0000FF,00008B,00FF00,27AE60,
008000,808000,16A085,2F4F4F,A0522D,8B4513,
FFFFFF,DDDDDD,BDC3C7,999999,4E5F70,000000

Colorbox Inline

(v1.0-rc2) , имеет зависимость от Colorbox (v1.4) , которому, возможно, может потребоваться library.
Позволяет выводить изображения внутри статьи во всплывающем окне. Если кликните мышкой по уменьшенным изображениям в этой статье, то увидите модуль в работе.

Проблема с модулем в том, что он по умолчанию выводить изображения точно такого же размера, что и на странице, а не полноразмерные. Стандартными способами это не обойти: захватываются свойства как в HTML-атрибуте, так и в стиле. Единственное решение, которое получилось мне обнаружить, это вручную в коде окружить изображение тегом ссылки, внутри которой прописать class=»colorbox» href=»путь» . Если хотите добавить возможность перелистывания рисунков, то допишите атрибут data-colorbox-gallery color:#2980b9;»>название» . Эта технология описана на drupal.org/node/2779659. (для чего там упомянут класс cboxElement — непонятно, без него всё работает также) . Это неудобно, но более лёгкого способа обнаружить не получилось. Предположительно можно облегчить вставку выскакивающих рисунок с помощью модуля Insert (v1.0-beta1) , но мне не удалось заставить работать его надлежащим образом.

Рекомендую в настройках ColorBox пункт Transition Type переставить в None — поведение будет более простым, но и более ожидаемо-понятным. Opacity рекомендую уменьшить с 0.85 до 0.75 .

(Примечание: смеждный модуль Colorbox Load позволяет создавать галерею из пристыковываемых к статье изображений. Но это уже не относится к CKEditor.)

CKEditor Spoiler

(v1.0) , требует library.
Очень интересный и полезный модуль. Но упорно-глючный. Мне всё же удалось найти способ заставить его нормально работать. Рецепт выложила на drupal.org/node/2724139. Здесь опишу его по-русски. К сожалению, способ работает только в том случае, если этот модуль вы ещё на сайте не включали. Иначе он уже успел куда-то занести фрагменты своих глючных CSS и теперь CKEditor будет отображать заголовок спойлеров неадекватно . Не помогает даже полная перестановка всего ядра Друпала.

Загрузить модуль на сайт, но ни в коем случае не включать. Загрузить можно и через меню Extend>Install new module, и методом прямого копирования в папку сайта — без разницы. Повторю ещё раз: загрузить, но НЕ ВКЛЮЧАТЬ. Скачать библиотеку по вышеприведённый ссылке, взять из неё только папку ‘spoiler’ и скопировать её в libraries . Открыть файл modulesckeditor_spoilersrcPluginCKEditorPluginSpoilerCKEditorButton.php и изменить в нём две строчки согласно последнему патчу fix_warning-2724139-7.patch из обсуждения drupal.org/node/2724139.

Читайте так же:
Physx для Windows 10

Отредактировать отображение элемента в двух одинаковых файлах по адресам
modulesckeditor_spoilercssspoiler.css и
librariesspoilercssspoiler.css
Мой вариант: в классе ‘ div.spoiler div.spoiler-title div.spoiler-toggle ‘ убрать width , height и дописать ‘ padding-left: 15px; ‘.

Вот теперь плагин можно включать. И будет вам счастье.

Вы можете откорректировать упомянутые файлы самостоятельно или воспользоваться моим патчем.

Недостаток модуля: для ввода заголовка спойлера проще залезть в код, чем попасть мышкой по малюсенькому невидимому пробелу.

Окно вставки смайликов модуля CKEditor Smiley

(v1.0) , требует library
Модуль для вставки смайликов.

По умолчанию не работает. Мне удалось найти решение, выложила его на drupal.org/node/2716745.

Откройте файл modulesckeditor_smileysrcPluginCKEditorPluginSmileyCKEditorButton.php
В нём измените
1. В функции public function getButtons()
$path = ‘/libraries/smiley’;
на
$path = base_path() . ‘libraries/smiley’;

2. В функции public function getFile()
$path = ‘/libraries/smiley’;
return $path . ‘/plugin.js’;
на
return base_path() . ‘libraries/smiley/plugin.js’;

или воспользуйтесь моим патчем.

Краткно опишу ещё несколько модулей. В общем случае ставить не рекомендую, но могут быть полезны для решения отдельных частных задач. Они все рабочие (по состоянию на сентябрь 2017, Drupal 8.3.7).

Layouter — WYSIWYG layout templates (v1.0) — Задаёт схемы размещения материала на странице, предлагая выбрать один из предложенных вариантов.

Inline responsive images (v2.1) — Изображения, отзывающиеся на изменение ширины экрана. Отмечу, что в настройках CKEditor нельзя одновременно задействовать опции «Display image styles» и «Display responsive images».

CKEditor Templates (v1.0) , требующий library. — Вставка шаблонов кода, предоставляемых некоторыми темами (см. файл «templates/ckeditor_templates.js»). Их можно написать и самостоятельно.

CKEditor Markdown (v1.0) — позволяет создавать оформление с помощью markdown-разметки.

CKEditor CodeTag (v1.0) — окружает часть текста тегом <code>. Имеет полезность только для обозначения небольшого фрагмента кода внутри строки. Если обернуть им несколько строк, то их разбивка уничтожится.

Меню стрелок модуля Symbol

Symbol (v1.0) , library — добавляет в редактор возможность вставлять тысячи различных символов. Пара сотен символов, предоставляемых стандартной комплектацией CKEditor, на этом фоне меркнет. На скриншоте представлена лишь одна из многих десяток вкладок. Но это обилие одновременно является и минусом — в нём трудно разобраться.

Горячие клавиши CKEditor

Горячие клавиши редактора описаны на docs.ckeditor.com. Их не так много по сравнению с большинством офлайн-редакторов и почти все стандартны. Отдельно отмечу несколько:

^B , ^I , ^U — полужирный шрифт, курсив, подчёркнутый текст
^Home / ^End — перескок в начало / конец всего документа
^+3 — добавление текста в формате нового параграфа до проблемного элемента (такого как рисунок, таблица или <div>)
^+4 — после проблемного элемента
^+V — вставка содержимого буфера как простого текста
!0 (ноль) — всплывающее окно «Accessibility Instructions»
Ctrl+правый щелчок — открытие собственного контекстного меню браузера заместо контекстного меню CKEditor. Это нужно для включения-отключения проверки правописания.

Может быть такое, что одна из полезных комбинаций CKEditor будет конфликтовать с горячей клавишей встроенного в браузер плагина. В большинстве случаев горячую клавишу плагина можно удалить или модифицировать, если в адресной строке набрать about:config и далее в поиске название плагина.

Написание своих плагинов для CKEditor на Drupal 8.

Если у вас более серьёзные запросы, то используйте поиск по drupal.org или освойте написание собственных плагинов. Для старта можете воспользоваться следующими статьями:

На этой странице нашего сайта можно посмотреть, как реализуются и интерпретируются темой оформления основные функции CKEditor.

Подключаем CKEditor к Laravel 5.1 и интегрируем в него файловый менеджер elFinder

Доброго времени суток. Как мы знаем без WYSIWYG редактора нам не создать хороший блог, не построить интернет-магазин, да и просто писать и редактировать статьи на сайт с помощью редактора удобней. Поэтому в данной статье я остановлюсь на подключении CKEditor к Laravel. Затем мы в него интегрируем файловый менеджер elFinder, который нам понадобиться для удобной вставки картинок и для загрузки этих самых картинок.

Читайте так же:
Урок 192. Как добавить субтитры в видео на Youtube

Подготовка.

Я не буду останавливаться на установке Laravel. Материала по данному вопросу в интернете достаточно. Давай те создадим view с названием main.blade.php в папке resources/views следующего содержания:

Тут мы подключили bootstrap, чтобы не останавливаться на верстке. И добавили элемент <textarea>, в который и вставим редактор CKEditor.

Теперь создадим роут, отредактируйте файл route.php, который находится в app/Http.

Проверим, перейдем на наш сайт. Вот как получилось у меня:

01

Отлично, теперь приступим к подключени CKEditor.

Подключение CKEditor.

Для начала нам необходимо скачать сам редактор. Скачать CKEditor можно с официального сайта.

02

Выбираем необходимый пакет и жмем «Download CKEditor». Я выбрал FullPackage.

Распаковываем скачанный архив в папку ckeditor. И переносим ее в наш проект в папку public/js

Вот как у меня выглядит структура:

03

Теперь можно подключить CKEditor. Для этого переходим в наш файл представления main.blade.php и вставляем следующую строку в секцию head

Все подключили, теперь нужно сам редактор инициализировать. Для этого в конец нашего представления вставляем:

Ну вот и все, мы с Вами подключили CKEditor на место нашего textarea. Обратите внимание, при инициализации редактора мы указали «editor1», что означает CKEditor будет отображаться в элементе с >

04

Отлично, теперь интегрируем файловый менеджер elFinder.

Интеграция файлового менеджера elFinder

Для интеграции elFinder мы воспользуемся пакетом barryvdh/laravel-elfinder. Как установить пакет данный пакет Вы можете посмотреть на github.

А вот на настройках я остановлюсь. Если Вы все сделали как описано документации, то у Вас должен появиться файл elfinder.php в папке config.

Допустим мы хотим чтобы файлы загружались в папку public/upload.

Отредактируем файл конфигурации следующим образом:

Тут в принципе и объяснять нечего, кроме свойства option. В которое мы добавили массив root. Массив root содержит еще один массив, где driver — указывает в нашем случае, что используется локальная файловая система, path — путь к нашим файлам, url — адрес для наших файлов.

С настройкой закончили, теперь для CKEditor нужно указать файловый менеджер. Для этого открываем файл представления main.blade.php и редактируем код инициализации CKEditor следующим образом:

Открываем на сайт и в редакторе выбираем «Вставить картинку»

05

Откроется диалог вставки, жмем «Выбор на сервере»

06

Откроется окно файлового менеджера elFinder. Как видим картинок у нас еще нет. Поэтому давайте загрузим картинку:

07

После того, как картинка будет успешно загружена, два раза кликаем по ней и в окне диалога вставки изображения мы можем данную картинку отредактировать, после чего жмем «Ok»:

09

Все наша картинка появилась в редакторе:

10

Как видите ничего сложного нет.

Но есть один подводный камень, с которым я столкнулся. У меня связка nginx — Apache. И nginx настроен таким образом: всю статику он кэширует, а динамический контент обрабатывает apache, который возвращает результат в nginx. Вот в такой ситуации возникает следующая ошибка при вызове elFinder.

11

Как решить данную проблему я уже расскажу в следующей статье. Так, что не пропускайте выхода новых статей.

CKEditor5, как проверить доказательство концепции для простого плагина?

У меня есть идея для плагина для CKEditor5, но настройка всего этого кажется ошеломляющей и сложной. Так что почти не знаю, с чего начать. Есть ли какой-нибудь способ проверить, стоит ли моя идея плагина углубляться в этот проект? Некоторые пошаговые инструкции будут полезны.

1 ответ

  • Учить реагировать доказательство концепции

В настоящее время я пытаюсь научить себя реагировать, в данный момент я работаю в codepen, то, что я пытаюсь сделать, это создать простой Профиль пользователя из статического фрагмента JSON. То, что я хочу от кого-то, — это подтверждение того, что мое понимание правильно, прежде чем я.

Я пытаюсь сделать пользовательский плагин изображений для CKEditor, который интегрируется с моей пользовательской системой загрузки изображений. В основном я сталкиваюсь с проблемами при настройке этого плагина. Когда я загружаю Плагины out-of-the-box, все работает нормально (кроме того, когда я.

Читайте так же:
Зачем конвертировать VCF в CSV?

Есть по крайней мере 2 способа, которые я нашел. Вы можете написать несколько простых плагинов для проверки концепции в ручном тестировании для CKEditor5 или расширить одну из сборок CKEditor5.

Создание нового плагина в ручном тесте:

код CKEditor5 компилируется и обслуживается предварительно настроенным webpack, поэтому вы можете беспокоиться только о написании правильного кода плагина. Более того, вы можете использовать режим просмотра, который в режиме реального времени будет отражать изменения в вашем простом плагине. Webpack также перестройте страницу с тестом, который содержит ваш простой плагин.

Пошаговое руководство:

  1. Следуйте с руководством по настройке среды здесь
    • npm install -g yarn mgit2
    • git clone https://github.com/ckeditor/ckeditor5.git
    • cd ckeditor5
    • mgit sync
    • yarn install
  2. Откройте файл с тестом: ckeditor5/packages/ckeditor5-core/tests/manual/article.js . Вы можете написать плагин в этом файле
  3. Запустите тест в режиме просмотра, чтобы встроенный редактор был доступен в ваших браузерах: yarn run manual -sw —files=core/manual/article.js
  4. Откройте браузер на странице: http://localhost:8125

Напишите простые плагины в тесте «article». Вы можете добавить эти записи, чтобы увидеть, работает ли он:

Добавьте эту часть перед созданием редактора.

И измените список включенных плагинов в конфигурации с: plugins: [ ArticlePluginSet ], до: plugins: [ ArticlePluginSet, SimplePlugin ],

Обновите страницу с тестом, и вы увидите в консоли текст: Hello world . Теперь вы можете внести новые изменения в свой Simple Plugin и посмотреть результат на странице.

Создание нового плагина внутри сборки CKEditor5:

Альтернативным решением является использование одной из сборок CKEditor5 и расширение ее с помощью вашего собственного простого плагина.

Пошаговое руководство:

  1. Сборка клона, например: git clone https://github.com/ckeditor/ckeditor5-build-classic.git
  2. Установить зависимости: npm install

Вы можете добавить плагин в src/ckeditor.js таким же образом, как это было сделано в предыдущем руководстве.

Добавьте эту часть перед созданием редактора.

И измените список включенных плагинов в конфигурации. К массиву плагинов добавить SimplePlugin ,

Теперь создайте свой новый пакет с npm run build

  • плагин выравнивания текста ckeditor5 не работает

Я следовал инструкциям по установке плагина выравнивания текста, как указано в документах ckeditor5. Добавлен плагин выравнивания, как показано ниже импорт выравнивания из ‘@ckeditor/ckeditor5-alignment/src/alignment’; ClassicEditor . create (this.element.nativeElement, < plugins: [ Alignment ].

Я разрабатываю плагин с использованием ckeditor5. Я сделал схему, конвертеры, события, команды, чтобы вставить блок плагина (таблицу) в Редактор, и он работает правильно, но я теряюсь в реализации FocusCycler/FocusTracker, чтобы изменить фокус ячеек в определенном порядке, используя TAB или ENTER.

Похожие вопросы:

Мне нужно, чтобы обеспечить доказательство концепции, чтобы мой босс. Наше заявление написано на WPF, но я знаю Windows бланков задом наперед. Достижение POC в WPF занимает 3-4 раза больше времени.

Я должен реализовать доказательство концепции для работы с несколькими клиентами в JSF 2.0. Как можно обрабатывать несколько клиентов в jsf?

Я пытаюсь текстовое доказательство концепции речи на Android безрезультатно. Любое предложение по этому поводу, вот как я поступаю: Это происходит во фрагменте: public class PhotoDetailsFragment.

В настоящее время я пытаюсь научить себя реагировать, в данный момент я работаю в codepen, то, что я пытаюсь сделать, это создать простой Профиль пользователя из статического фрагмента JSON. То, что.

Я пытаюсь сделать пользовательский плагин изображений для CKEditor, который интегрируется с моей пользовательской системой загрузки изображений. В основном я сталкиваюсь с проблемами при настройке.

Я следовал инструкциям по установке плагина выравнивания текста, как указано в документах ckeditor5. Добавлен плагин выравнивания, как показано ниже импорт выравнивания из.

Я разрабатываю плагин с использованием ckeditor5. Я сделал схему, конвертеры, события, команды, чтобы вставить блок плагина (таблицу) в Редактор, и он работает правильно, но я теряюсь в реализации.

Я пытаюсь интегрировать CKEditor5 в свое приложение Aurelia, но безуспешно. Я перепробовал много гидов, но безуспешно. Я попробовал CKEditor официальных гидов тоже вроде как.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector