Редактор html и подсветка синтаксиса
В проекте на MVC4 решил сделать возможность редактировать текст материала в WYSIWYG редакторе, добавить подсветку для программного кода и добавить в редактор поддержку этой подсветки. К счастью, писать самому ничего не пришлось, хватило сторонних решений.
WYSIWYG редактор.
Я использовал TinyMCE. Подключается он очень просто, нужно в .cshtml файл добавить такие строчки:
@Scripts.Render("//code.jquery.com/jquery-1.10.2.min.js") @Scripts.Render("//tinymce.cachefly.net/4.0/tinymce.min.js")
Хотя можно и добавить эти файлы в проект, это не важно.
К свойству модели, в котором хранится редактируемый текст, добавляем атрибуты:
[AllowHtml] [DataType(DataType.MultilineText)]
Первый атрибут нужен для хранения html разметки в свойстве модели, второй — для отображения свойства в виде textarea.
Теперь нужно настроить TinyMCE. Вставляем в представление вот такой код:
tinymce.init({ selector: "textarea", plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor csharp" ], toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", toolbar2: "print preview media | forecolor backcolor emoticons | csharp" });
Здесь selector — блок, который будет отображаться в виде редактора. Обратите внимание на «csharp» в списке плагинов и в списке кнопок тулбара — это мой плагин для разметки выделенного кода, его я опишу ниже.
Разметка кода
Я использовал популярный скрипт SyntaxHighlighter. Его нужно скачать и добавить в проект
Создаем бандлы
bundles.Add(new ScriptBundle("~/bundles/SyntaxHighlighter"). Include("~/Content/SyntaxHighlighter/js/shCore.js"). Include("~/Content/SyntaxHighlighter/js/shBrushCSharp.js")); bundles.Add(new StyleBundle("~/Content/SyntaxHighlighter/css"). Include("~/Content/SyntaxHighlighter/css/shCore.css"). Include("~/Content/SyntaxHighlighter/css/shThemeDefault.css"));
И подключаем их
@Scripts.Render("~/bundles/SyntaxHighlighter") @Styles.Render("~/Content/SyntaxHighlighter/css");
Осталось только активировать подсветку:
$(document).ready(function () { SyntaxHighlighter.all(); });
Теперь все, что завернуто в
<pre class="brush: csharp">
будет подсвечиваться.
Плагин для TinyMCE для включения подсветки синтаксиса
Плагин добавляется очень легко, достаточно до инициализации TinyMCE выполнить этот код:
tinymce.PluginManager.add('csharp', function (editor, url) { editor.addButton('csharp', { text: 'C#', icon: false, onclick: function () { editor.focus(); editor.selection.setContent('<pre class="brush: csharp">' + editor.selection.getContent() + '</pre>'); } }); });
Здесь создается кнопка, которая при нажатии оборачивает выделенный текст в нужный тег.
Все, соединили все части, теперь можно пользоваться.