Ckeditor - Библиотека Ckeditor
Ckeditor javascript фреймворк приложение
CKEditor - это текстовый WYSIWYG редактор с открытым кодом для использования на веб-страницах.
По умолчанию в CKEditor 4.x проверка правописания осуществляется через плагин SCAYT. Кроме того, проверку правописания можно подключить через плагин jquery-spellchecker, который предоставляет больше гибкости в конфигурации.
Говоря о визуальном редакторе, в сети Вы можете встретить такой термин, как WYSIWYG-редактор. На самом деле -- это аббревиатура, которая расшифровывается следующим образом -- "What You See Is What You Get". Перевести эту фразу можно буквально так -- "Что ты видишь, то ты и получишь".
Подобных редакторов довольно много. Есть как платные, так и бесплатные решения. Наиболее известны и широко используемы редакторы TinyMCE и CKeditor. Сегодня мы как раз будем использовать второй из них -- CKeditor.
Для работы с этими редакторами совсем необязательны знания HTML/CSS, и наполнять сайт может рядовой пользователь, достаточно лишь немного разобраться. Панель таких редакторов очень напоминает панель небезызвестного MS Word (который по сути своей также является WYSIWYG-редактором). Вот как выглядит стандартная панель редактора CKeditor:
Итак, для того, чтобы научиться устанавливать визуальный редактор на страницы своего сайта, нам потребуется простенький тестовый сайт из одной странички, точнее из двух -- вторая будет страницей административной части. Поскольку создание сайта с использованием БД не является целью нашего урока, то этого момента я лишь вскользь касаюсь в видеоверсии урока, объясняя принцип работы заранее написанного функционала.
Таким образом, страница для работы у нас имеется. Для установки WYSIWYG-редактора нам потребуется его дистрибутив. Его Вы найдете в дополнительных материалах либо можете скачать с офсайта -- ckeditor. com
Безусловным преимуществом редактора является простота его установки. Сразу следует отметить, что редактор используется только для текстовых областей (textarea), т. е. использовать его для полей ввода (input) нельзя. Первое, что нужно сделать для подключения редактора -- это подключить скрипт ckeditor. js... подключаем в области head:
<script type="text/javascript" src="/ckeditor/ckeditor. js"></script>
После этого текстовой области, к которой подключается редактор, необходимо присвоить идентификатор. Поскольку идентификатор уникализирует элемент документа, это значит, что мы можем подключать редактор к любому количеству текстовых областей документа. Присваиваем идентификатор текстовой области:
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>
Последним этапом будет небольшой участок кода JavaScript сразу после текстовой области. Этот код как раз и установит редактор для искомого поля формы:
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>
<script type="text/javascript">
Var ckeditor1 = CKEDITOR. replace( 'editor1' );
AjexFileManager. init({
ReturnTo: 'ckeditor',
Editor: ckeditor1
});
</script>
Дело сделано... Теперь можем сохранить результаты работы и протестировать. Если все сделано верно, то теперь к текстовой области подключается визуальный редактор и мы сможем форматировать текст непосредственно из него:
Казалось бы все отлично. Но на самом деле это только половина работы. Все дело в том, что в бесплатной версии не предусмотрен файловый менеджер. Это значит, что загрузить, к примеру, картинку для статьи посредством установленного редактора не получится. Именно поэтому следующей нашей задачей будет интеграция файлового менеджера в редактор.
Уже готовое решение можно найти на сайте demphest. ru, где автор предлагает некоммерческий файловый менеджер, который, к слову, подходит как для CKEditor, так и для TinyMCE. В дополнительных материалах Вы найдете дистрибутив данного плагина или можете взять его с офсайта.
Итак, для интеграции нам потребуется для начала подключить скрипт ajex. js:
<script type="text/javascript" src="/AjexFileManager/ajex. js"></script>
И немного изменить скрипт, инициализирующий визуальный редактор:
<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>
<script type="text/javascript">
Var ckeditor1 = CKEDITOR. replace( 'editor1' );
AjexFileManager. init({
ReturnTo: 'ckeditor',
Editor: ckeditor1
});
</script>
Готов наш визуальный редактор php. Опять-таки ничего сложного. После подключения мы можем запустить файл ajax. php с GET-параметром isWork. Этот скрипт создаст необходимые каталоги, куда и будут сохраняться файлы, загружаемые из редактора.
Вот теперь все. Наш визуальный редактор с файловым менеджером готовы -- осталось только наслаждаться теперь уже простой возможностью добавления/редактирования контента.
Похожие статьи
-
В качестве доступного инструментария были рассмотрены две открытые кроссплатформенные библиотеки для разработки C++ приложений WxWidgets и Boost ,...
-
Блок REQTEXTARRAY обеспечивает хранение 64 символов ASCII, которые доступны с помощью соответствующих строковых параметров конфигурации (STR[n]).Здесь...
-
Описание Блок TYPECONVERT входит в СЕЕ предоставляет возможность преобразования данных одного типа в другой для соединения параметров разных типов. Он...
-
Обозначенные условия определяют работу по внедрению многопоточных средств в модели параллельного программирования С общей памятью с использованием...
-
Позволяет настроить до десяти отдельных входов для расчета значения переменной (PV), которые можно масштабировать и смещать. Блок AUXSUMMER извлекает...
-
Блоки общего назначения - Библиотека функциональных модулей системы EXP PKS
Блоки общего значения являются базовыми функциональными блоками, т. е - это исполняемый программный объект, который выполняет конкретную задачу. Control...
-
В ходе эксплуатации возможны сбои и неисправности в работе компьютерной системы. Все неисправностей, которые по тем или иным причинам возникают в ПК или...
-
JQuery -- библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу...
-
Введение - Библиотека Ckeditor
Сегодня, как никогда прежде, JS-фреймворки играют большую роль в сайтостроении. Абсолютно все современные сайты построены посредством взаимодействия HTML...
-
Представляет память для сохранения знаний с плавающей точкой, которые доступны через параметр конфигурации PV. Вход / Выход Блок до 16 входов (SENDFLAG...
-
Блок TIMER обеспечивает возможность синхронизации событий процесса или создание заданных задержек. На рисунке он имеет следующий вид. Рис. 37.1...
-
Коммуникационная библиотека PVM - Администрирование параллельных процессов
PVM (Parallel Virtual Machine) является продуктом исследовательского проекта по сетевым вычислениям в гетерогенной сетевой среде. Общая цель этого...
-
Несмотря на то, что к IoT Hub можно подключиться напрямую, используя протоколы HTTP или AMQP), Microsoft также предоставляет разные SDK для разных языков...
-
Основные компоненты библиотеки - Повышение производительности работы библиотеки GridMD
Двумя главными компонентами библиотеки GridMD является менеджер сценариев и менеджер заданий (Рис. 4) [10]. Менеджер сценариев разбирает определенный...
-
Библиотека GridMD поддерживает три механизма определения действий, связываемых с узлами графа [8]. Узел графа может соответствовать исполнению стороннего...
-
Заключение, Список используемых источников - Повышение производительности работы библиотеки GridMD
В работе произведена успешная оптимизация выполнения локальных узлов графа исполнения приложений, основанных на библиотеки GridMD. В качестве метода для...
-
Создание очереди заданий - Повышение производительности работы библиотеки GridMD
Для организации работы потоков был выбран паттерн проектирования Пул потоков (Thread Pool) [16] . Пул потоков является объектом, которому возможна выдача...
-
Workflow-методология - Повышение производительности работы библиотеки GridMD
Суть workflow-методологии хорошо отражена в определении, данным Workflow Management Coalition [5] - это автоматизация бизнес процесса, при котором...
-
Блок FLAGARRAY, Вход/Выход, Блок TEXTARRAY - Библиотека функциональных модулей системы EXP PKS
Функциональный блок FLAGARRAY обеспечивает хранение 1000 значений с двумя состояниями. Доступ к значению можно осуществить как к простому булеву значению...
-
Блок накопителя импульсного входа (Pulse Input Totalizer Block) предоставляет функция накопления расхода, дополняющую блок канала импульсного входа...
-
При извлечении текста из Интернета, он не имеет никой разметки и представлен в виде сплошного набора предложений. Для дальнейшего использования...
-
SimpleXML. В PHP версии 5.0 и выше появилось расширение для работы с xml структурой. Библитека SimpleXML содержит большое количество методов для работы с...
-
Коммуникационная библиотека MPI MPI это интерфейс прикладного программирования к библиотеке пересылки сообщений, содержащий в себе спецификации к...
-
Заключение - Библиотека OpenGL
Система OpenGL является гибким процедурным интерфейсом, позволяющим программисту разрабатывать различные приложения с применением трехмерной графики. В...
-
OpenGL - это программный интерфейс к графической аппаратуре. Этот интерфейс состоит приблизительно из 250 отдельных команд (около 200 команд в самой...
-
DipTrace имеет интегрированные библиотеки, которые содержат графическую информацию о символах и типовых корпусах компонентов и текстовую упаковочную...
-
Блок SWITCH принимает до восьми инициализируемых входов и работает как однополюсный восьмипозиционный поворотный переключатель. Положение переключателя...
-
Блок модуля последовательного управления SCM (Sequential Control Module) представляет собой модуль-контейнер для последовательности блоков шагов STEP и...
-
Описание Блок STEP определяет определенные действия вывода: Указанное действие вывода обычно генерирует запрос на устройство управления, чтобы сделать...
-
Блок AUXCALC, Блок PID - Библиотека функциональных модулей системы EXP PKS
Блок AUXCALC (вспомогательных вычислений) позволяет записать до восьми выражений для вычисления значения PV. Каждое выражение может исполнять...
-
Для поддержания компьютерной системы 1С:Библиотека в исправном состоянии необходимо осуществлять мероприятия в соответствии с типовой системой...
-
Функционирование программы - Моделирование информационной системы библиотеки
Для корректного функционирования АС должны выполняться следующие функции: автоматизированный учет библиотека информация Режим ведения справочника по...
-
Постановка задачи - Моделирование информационной системы библиотеки
Библиотека - это учреждение культуры, организующее сбор, хранение и общественное пользование произведениями печати и другими документами. Библиотеки...
-
Техническое обслуживание (сервис) не зависимо от принятой системы ТО может организовываться с использованием известных методов ТО. Метод технического...
-
Что такое библиотеки JavaScript - Библиотека Ckeditor
Библиотека JavaScript - сборник классов и/или функций на языке JavaScript. Язык JavaScript, изначально разработанный Netscape (а затем развиваемый...
-
Виды технического обслуживания СВТ Вид технического обслуживания определяется периодичностью и комплексом технологических операций по поддержанию...
-
Числовой массив блок используется для чтения или записи массив до 64 целых или отдельных значений с плавающей точкой точности. Входы / Выходы Блоки...
-
Разработка динамических библиотек
Лекция №42. Разработка динамических библиотек Содержание: Создание собственной DLL Вызов функций из DLL Загрузка DLL с неявной компоновкой Загрузка DLL с...
-
XXI век - эра компьютерных технологий, время автоматизации процессов. Компьютеры стали неотъемлемой частью нашей жизни, они окружают нас повсеместно....
-
Библиотеки стaндapтных элементов, Создание сборок - Система твердотельного моделирования SolidWorks
SolidWorks пpедостaвляет возможности создaния библиотек стaндapтных твеpдотельных моделей. Пpи этом необходимо создaть упpaвляющую тaблицу с пapaметpaми...
Ckeditor - Библиотека Ckeditor