Редактор CKEditor удаляет теги <br /> что делать?

Автор Sorokin Vladimir, 05-09-2018, 11:44:08

« назад - далее »

Sorokin VladimirTopic starter

Доброго времени суток!
Никак не могу решить такую задачку  -  редактор CKEditor  удаляет теги <br />. Причем как то избирательно, иногда вместо них, втыкает «&nbsp;», а другой раз  «<p>&nbsp;</p>».
Прогуглил все, что смог найти, в основном все дают советы по правке файла «config.js».
Манипуляции со строками
config.enterMode = CKEDITOR.ENTER_P;
config.shiftEnterMode = CKEDITOR.ENTER_BR;

ничего не дают, тем более я никогда не пользуюсь клавишами «enter» или «shift».
Если кто сталкивался с подобным и нашел решение, поделитесь, плизззз.
Спасибо!
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  


Clever

А точно это редактор ?
Часто в паре с редактором используется еще фильтр другого уровня, на уровне движка, например HTML Purifier.

Нужно проверить сначала, если это редактор, то он будет резать до сохранения, налету. Вставляете в редактор то что нужно, и переключаетесь в режим кода. Если вырезано - то это редактор, и нужно смотреть конфиг.

Какая версия редактора, 4 или новая (5) ?


Sorokin VladimirTopic starter

Редактор - это точно, проверял на разных движках.
Версия 4.
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

Clever

#3
Для себя использую такой конфиг:


CKEDITOR.editorConfig = function (config)
{
      config.toolbar = 'Full';
      config.extraPlugins = 'more,oembed,syntaxhighlight,codemirror';
      config.contentsCss = '/themes/mytheme/css/plu/ckeditor.custom.css';

      config.disableNativeSpellChecker = false;
      config.fillEmptyBlocks = false;
      config.forcePasteAsPlainText = true;
      config.disallowedContent = 'script';

      config.allowedContent = true; // disable ACF

      CKEDITOR.on('instanceReady', function (ev) {
            ev.editor.on('paste', function (evt) {
                  evt.data.dataValue = evt.data.dataValue.replace(/&nbsp;/g, ' ');
                  evt.data.dataValue = evt.data.dataValue.replace(/<p><\/p>/g, ' ');
                  console.log(evt.data.dataValue);
            }, null, null, 9);
      });

      config.toolbar_Full =
              [
                    ['Source'],
                    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
                    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
                    ['Image', 'oembed', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
                    ['Maximize', 'ShowBlocks', '-', 'About'],
                    '/',
                    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
                    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
                    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                    ['Link', 'Unlink', 'Anchor', 'More', 'Syntaxhighlight'],
                    ['Styles', 'Format'],
                    ['TextColor', 'BGColor']
              ];

      config.toolbar_Medium = [
            ['Bold', 'Italic', 'Underline', 'Strike'],
            ['NumberedList', 'BulletedList', '-', 'Blockquote', 'Syntaxhighlight'],
            ['Image', 'Link', 'Unlink', 'Anchor', 'Smiley'],
            ['TextColor', 'BGColor'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Source']
      ];

      config.toolbar_Basic =
              [
                    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']
              ];
};


Остальное по умолчанию. Вот здесь еще разные случаи описаны.

Sorokin VladimirTopic starter

Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  


Clever

#5
Цитата: Sorokin Vladimir от 05-09-2018, 14:00:25
И что, у вас <br /> не режет?
Нет, у меня перенос это перенос.

Я посмотрел в документации, у вас не указан config.enterMode = CKEDITOR.ENTER_BR; , и при этом заполняется символ пробела, чтобы параграф не был пустой, в итоге имеете: 
<p>&nbsp;</p>
<p>&nbsp;</p>

Вот ссылка на полигон, первый селект - это то, что будет происходить по нажатию enter, выберите вариант, сделайте пару переносов, и посмотрите в режим кода, там все будет видно.

Но лучше применить рекомендуемые по умолчанию (<p>), так как рядом с этой настройкой:

// Not recommended.
config.enterMode = CKEDITOR.ENTER_BR;

Sorokin VladimirTopic starter

Цитата: Clever от 05-09-2018, 14:02:25у вас не указан config.enterMode = CKEDITOR.ENTER_BR

Что я там только не указывал......
Менял BR на Р, потом наоборот, потом указывал BR в обеих строках, потом Р также - все равно режет.
Вот мой конфиг[quote author=Clever link=topic=55557.msg720341#msg720341 date=1536145345]у вас не указан config.enterMode = CKEDITOR.ENTER_BR[/quote]

Что я там только не указывал......
Менял BR на Р, потом наоборот, потом указывал BR в обеих строках, потом Р также - все равно режет.
Вот мой конфиг, последний вариант[code]/**
* @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 ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
    config.enterMode = CKEDITOR.ENTER_P;
    config.shiftEnterMode = CKEDITOR.ENTER_BR;
    // Запретить удалять теги, если между ними ничего нет
    CKEDITOR.dtd.$removeEmpty.span = 0;
    CKEDITOR.dtd.$removeEmpty.i = 0;
    CKEDITOR.dtd.$removeEmpty.div = 0;
    CKEDITOR.dtd.$removeEmpty.em = 0;
    CKEDITOR.dtd.$removeEmpty.b = 0;
   config.allowedContent =
   'h1 h2 h3 p ul blockquote strong em;' +
   'a[!href];' +
   'img(left,right)[!src,alt,width,height];';//  А эта строчка чтобы не удалял нужные теги
    config.protectedSource.push(/<p class="[^:]*">.*?<\/p>/g);
    config.protectedSource.push(/<(style)[^>]*>.*<\/style>/ig);// разрешить теги <style>
config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);// разрешить теги <script>
    config.protectedSource.push(/<(span)[^>]*>.*<\/span>/ig);// разрешить теги <span>
config.protectedSource.push(/<(i)[^>]*>.*<\/i>/ig);// разрешить теги <i>
    config.protectedSource.push(/<(li)[^>]*>.*<\/li>/ig);// разрешить теги <li>
    config.protectedSource.push(/<(a)[^>]*>.*<\/a>/ig);// разрешить теги <a>
config.protectedSource.push(/<\?[\s\S]*?\?>/g);// разрешить php-код
    config.protectedSource.push(/<%[\s\S]*?%>/g); // ASP code
    config.protectedSource.push(/(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi); // ASP.Net code
config.protectedSource.push(/<!--dev-->[\s\S]*<!--\/dev-->/g);
    config.indentClasses = ["ul-grey", "ul-red", "text-red", "ul-content-red", "circle", "style-none", "decimal", "paragraph-portfolio-top", "ul-portfolio-top", "url-portfolio-top", "text-grey"];
    //config.contentsCss = ["/css/bootstrap.css", "/css/styles.css"];
config.contentsCss = ["/css/styles.css"];
    config.disableNativeSpellChecker = false;
customConfig: '/js/bootstrap.min.js';
config.bodyClass = 'mystyle';
    config.fontawesomePath = '/js/ckeditor/plugins/fontawesome/font-awesome/css/font-awesome.min.css';
    config.codeSnippet_languages = {
    javascript: 'JavaScript',
    php: 'PHP',
html: 'HTML',
css: 'CSS',
mysql: 'MYSQL'
};
};
Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •  

Clever

Цитата: Sorokin Vladimir от 05-09-2018, 14:12:48
Что я там только не указывал......


Попробуйте как здесь предложено.
Но вообще слишком нагромождено в конфиге, например:

config.protectedSource.push(/<(span)[^>]*>.*<\/span>/ig);// разрешить теги <span>
config.protectedSource.push(/<(i)[^>]*>.*<\/i>/ig);// разрешить теги <i>

Не совсем понятно, что здесь protectedSource..
Ладно еще config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);// разрешить теги <script>


Sorokin VladimirTopic starter

Цитата: Clever от 05-09-2018, 14:28:36Попробуйте как здесь предложено.
попробую
Вот это
config.protectedSource.push(/<(span)[^>]*>.*<\/span>/ig);// разрешить теги <span>
config.protectedSource.push(/<(i)[^>]*>.*<\/i>/ig);// разрешить теги <i>

пришлось добавить, потому что он вырезал такие строки кода
<span class="icon-bar"></span>
<i class="fa fa-angle-right"></i>


Мой девиз:    Делу время, потехе – час!
Натяжка HTML шаблонов на MODX Rev, Joomla 3, GetSimpleCMS, MyEngineCMS,  Kandidat CMS.
  •