SergDrakus

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

Рекомендуемые сообщения

SergDrakus    1

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
chukcha    928

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
chukcha    928

Вы бы показали как вы подключаете, может быть вы не все скрипты подключаете?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
SergDrakus    1

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

Чем не устраивает 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
chukcha    928

Попробуйте

<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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
chukcha    928

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

var hasCodeMirror = !!window.CodeMirror;

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
SergDrakus    1

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

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

 

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

 

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

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

Изменено пользователем SergDrakus

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу