Jump to content
Sign in to follow this  
SergDrakus

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

Recommended Posts

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Попробуйте

<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

 

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

Share this post


Link to post
Share on other sites

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

var hasCodeMirror = !!window.CodeMirror;

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

Share this post


Link to post
Share on other sites

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

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

 

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

 

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

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

Edited by SergDrakus

Share this post


Link to post
Share on other sites
Posted (edited)

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

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

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

на  

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

 

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

 

ЗЫ. Opencart.Pro 2.3

Edited by Leo2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.