post.jpg

CKEditor, Code Snippet и проблема преобразования HTML-тегов

Как известно, CKEditor 4 - это мощный текстовый редактор HTML, предназначенный для упрощения создания и редактирования контента веб страниц. Этот WYSIWYG редактор позволяет выполнять гибкое форматирование текстов, включающее работу со стилями, списками, ссылками, графическими изображениями и т.д.

Суть проблемы.

При создании и редактировании статей с использованием CKEditor-а иногда приходится вставлять в текст статьи кусок какого-то программного кода, будь то теги HTML , JS-скрипты, PHP и т.д. Это особенно актуально для блогов программистов. Делается это заключением текста с программным кодом в HTML-теги '< pre >', '< code >' или оба вместе. Например при использовании в CKEditor-е плагина Code Snippet вставляемый код заключается как раз в оба этих тега.

Вставляем в сниппет код и нажиаем ОК:

В редакторе в режиме "Source" видим:

Заметьте, что CKEditor сделал то, что он и должен был сделать, - заменил знаки тегов '<' и '>' на их HTML-сущности и в таком же виде они окажутся в БД после сохранения:

Теперь при парсинге во view (если, конечно, к содержимому не применены PHP-функции типа htmlentities() или htmlspecialchars() , которые заменяют исполняемые HTML-теги на неисполняемые строки) мы увидим то, что и хотели увидеть:

т.е. пока все хорошо. Проблемы начинаются, если данный текст открыть в CKEditor-е повторно для редактирования:

уже заметно, что что-то не в порядке. Смотрим в режиме "Source":

CKEditor опять исправно выполнил свою работу в соответствии с опциями конфигурации, т.е. закрыл незакрытые теги '< pre >' и '< code >', а HTML-сущности знаков '<' и '>' с готовностью преобразовал в якобы удобочитаемые браузером теги. Плюс (конкретно в моем случае) еще образовался дополнительный тег '< code >' с классом hljs из-за работы на странице скрипта подсветки синтаксиса  highlight,js . В результате в браузере видим "поломанное" представление:

Стало понятно, что данные из БД нужно как-то обработать ДО загрузки их в CKEditor, т.е до его инициализации.

Решение.

Перегуглив достаточное количество материалов по данной проблеме, наконец-то нашел совершенно четко выраженное и ясно представленное ее решение . Оказывается, вместо конвертации всех встречающихся в программных кодах знаков '< > " & ' ' и т.д. для наших целей вполне достаточно преобразовать только знак амперсенда '&' в его HTML-сущность '& amp;' (конечно, без пробела).

Для "чистого" PHP это будет выглядеть так:


// before being fed to the textarea of CKEditor
$content = str_replace('&', '&amp;', $content);

В моем случае, при использовании фреймворка Laravel 5.5, в классе соответствующей модели нужно создать accessor для обработки взятого из БД текста:


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
...

    public function getBodyAttribute($text)
    {
        return str_replace('&', '&amp;', $text);
    }
...

}

а затем в представлении (view) раскодировать его обратно:


...
<div class="textbody">
   {!! htmlspecialchars_decode($post->body) !!}
</div>
...

Моя конфигурация CKEditor-а при этом (файл config.js):


/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {

config.extraPlugins = 'codemirror';
config.codemirror_theme = 'rubyblue';
config.codemirror = {
    lineNumbers: true,
    highlightActiveLine: true,
    enableSearchTools: true,
    showSearchButton: true,
    showFormatButton: true,
    showCommentButton: true,
    showUncommentButton: true,
    showAutoCompleteButton: true
};

config.allowedContent = true;
config.basicEntities = false;

};

 

Поделиться
CKEditor 4 - это мощный текстовый редактор HTML, предназначенный для упрощения создания и редактирования контента веб страниц. Этот WYSIWYG редактор позволяет выполнять гибкое форматирование текстов, включающее работу со стилями, списками, ссылками, графическими изображениями и т.д.

" data-limit="3" data-counter>

КОММЕНТАРИИ (1)

sudoer
Наконец-то нашел то, что нужно. Спасибо