Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Как подключить CodeMirror к редактору SummerNote


Recommended Posts

Как подключить подсветку кода CodeMirror к редактору SummerNote

Действовал по инструкции на официальном сайте, подключал через CDN, в Opencart.js добавил подключение этого плагина. В итоге – ничего не изменилось. Инструкций в сети Интернет актуальных я так и не нашел.

Надіслати
Поділитися на інших сайтах


Что ж єто вас так колбасит?

Чем не устраивает tinymce?

Хочу все варианты опробовать и выбрать наилучший.

Вот текст для подключения:

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js) -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

Выводу вот так (файл opencart.js):

$('.summernote').summernote({
height: 150, //set editable area's height
codemirror: { // codemirror options
theme: 'monokai'
}
});

Действую по инструкции на офф сайте http://summernote.org/examples/#codemirror-as-codeview

Надіслати
Поділитися на інших сайтах


Попробуйте

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.js"></script>

В том же блоке где подключается summernote

 

 

До Подключения summernote

 

У меня подключился, даже без инициализации в скрипте

Надіслати
Поділитися на інших сайтах

Может  быть у нас отличаются версии редактора, но он сам определяет наличие

var hasCodeMirror = !!window.CodeMirror;

Т.е. достаточно толко подключение
Ну.. разве что поиграться  темой самого codemirror

Надіслати
Поділитися на інших сайтах

Да, в файле summernote.js действительно сам проверяет наличие CodeMirror.

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

 

Вставил в header.tpl (самый верх). Вроде бы все заработало, но есть одна проблема, которая так и не решилась.

 

Смотрите. Я пишу какой-то текста (2-3 абзаца). В визуальном редакторе все выглядит как нужно, но стоит переключить в исходный код, как весь набранный текст вместе с атрибутами превращается в одну большую кашу. Это очень неудобно, поскольку между абзацами я добавляю видео вручную и изображения анимированные. Как я понимаю, тег <br>, который виден в SummerNote, отвечает за перенос на новую строку.

Можно ли как-то заставить SummerNote не смешить код в один единый текст?

Змінено користувачем SergDrakus
Надіслати
Поділитися на інших сайтах


  • 2 years later...

Подскажите, как включить перенос строк в codemirror для summernote?

Пробовал в файле codemirror.js поменять в строке 5421

  option("lineWrapping", false, wrappingChanged, true);

на  

option("lineWrapping", true, wrappingChanged, true);

 

но все равно не переносит. Может где-то в другом месте опции для переноса строк?

 

ЗЫ. Opencart.Pro 2.3

Змінено користувачем Leo2
Надіслати
Поділитися на інших сайтах


  • 1 month later...
В 08.10.2019 в 18:31, Leo2 сказал:

Подскажите, как включить перенос строк в codemirror для summernote?

Пробовал в файле codemirror.js поменять в строке 5421

  option("lineWrapping", false, wrappingChanged, true);

на  

option("lineWrapping", true, wrappingChanged, true);

 

но все равно не переносит. Может где-то в другом месте опции для переноса строк?

 

ЗЫ. Opencart.Pro 2.3

 

Обнови кеш модификаторов. На Octore 2.3 заработало сразу.

codemirror.png

  • +1 1
Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.