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>

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

sudoer
Наконец-то нашел то, что нужно. Спасибо
1975andrei
Спасибо ваши мысли очень помогли :) Реализовал подсветку Laravel 5 с помощью ckeditor4 & prismjs a)на своем проекте просто подключил ckeditor4 & prismjs и все заработало... b) на чужом проекте пришлось постараться... все работало при первом сохранении(и в админке и в фронденде). Но после открытия для редактирования, слетало(резались все коды в ckeditor). Jставились как у вас на картинке

некий текст

и создавался дополнительный класс Решил так: только в виде просто декодировал с помощью функции: full_text = htmlspecialchars($lesson->full_text); //dd($lesson->full_text ); ?> сейчас ckeditor в админке все расставляет по местам и выводит код заменяя сущности на скобки: код ниже получен в виде для теста c dd($lesson->full_text ); <pre> <code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;!DOCTYPE&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Разум — это — это сущность разума, и что разум подобен бесконечности.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> а в ckeditor код стал как нужен-- для плагина prismjs:


<!DOCTYPE html>
<html>
 <head>
   <title>!DOCTYPE</title>
   <meta charset="utf-8">
 </head>
 <body>
  <p>Разум — это  — это сущность разума, 
  и что разум подобен бесконечности.</p>
 </body> 
</html>