Tinymce в ASP.NET MVC 4 - пример использования с русификацией

09:11:2013 Рі.

В данном небольшом руководстве рассматривается работа с редактором Tinymce в ASP.NET MVC 4. Tinymce это очень хороший, наверное даже, один из лучших редакторов на JavaScript. Естественно, его природа позволяет легко быть использованым на различных платформах в разных языках.

ASP.NET MVC, предоставляя полный контроль над View (то, что видит пользователь или html файлами, как привычно для кого-то было бы сказать) дает нам возможность использовать данный редактор в полной мере.

Итак, что будет рассматриватся в данном руководстве:

  • Как установить Tinymce
  • Как русифицировать Tinymce
  • Как редактировать текст в Tinymce, а затем скрывать редактор

Ниже предоставлены скриншоты того, что должно у нас получится:



И после нажания на кнопку "Спрятать редактор" должно получится:


Начнем - установка Tinymce в ASP.NET MVC4

К большому и приятному удивлению можно для себя отметить, что нам не нужно ничего качать с официального сайта, добавлять никаких файлов вручную. За нас все сделуют доступные пакеты NuGet, которые доступны с этим редактором. Нужно сказать, что версия, доступна в NuGet ничем не отличается от самой новой, которая представлена на сайте, поэтому просто устанавливаем данный пакет в менеджере NuGet в VisualStudio (в нашем случае мы работаем с Visual Studio 2012).

В результате установки в наш проект добавятся новые файлы и все необходимые зависимости.

По большому счету все, что теперь нам нужно - вставить уже готовый код в проект.

Открываем нужную страницу нашего проекта ASP.NET MVC, на которую хотим добавить редактор и вставляем:

Разберем код, который написан выше. Сначала мы подключаем javascript файлы, который были установлены нашим менеджером пакетов NuGet. Затем прописываем скрипт, который инициализирует редактор по селектору #editor. Т.е. редактор будет вставлен на месте того элемента страницы html, id которого будет равен editor.

Соответственно, добавляем на странице элемент с таким идентификатором. 

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

Единственный момент - если хотим расширить функционал, который в базовой комплектации редактора не слишком богат - подключаем дополнительные опции. Для этого в инициализацию добавляем дополнительный параметр:

plugins:[
         "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
         "save table contextmenu directionality emoticons template paste textcolor"
        ],

Русификация Tinymce

Русифицировать Tinymce не составит труда - на каком бы языке не был написан проект - то ли ASP.NET то ли PHP то ли еще какой-то. Для этого качаем с официального сайта перевод. И вставляем в папку lang tinymce:

Теперь все что нам остается сделать - передать парметр языка в функции tinymce.init. Добавляем рядом с there и selector в коде, который представлен на скриншоте выше language:"ru". На этом русификация закончена.

Скрытие Tinymce после завершения редактирования

Теперь переходим к вопросу как спрятать редактор и оставить один только форматирвоанный текст после редактирования. Мы помним, что поместили редактор в тег p. Это значит, что весь текст, который вводится в редактор "привязан" к нему. Все что нам нужно теперь это скрыть редактор в нашем проекте ASP.NET MVC после какого-то события. Поэтому создаем кнопку (input) и вешаем на нее javascript обработчик.

Как видим из кода, мы обрабатываем нажатие на кнопку с id button. И вызываем функцию hide для редактора, который находится по селектору 'editor'. Собственно, все. Форма скрывается, оставляя наш форматированный текст в формате html, как было показано на скриншотах в начале.

Как получить значение в html в редакторе Tinymce

Иногда бывает очень нужно получить форматированный текст из редактора. Сделать это очень просто. Возьмем пример прошлой функции javascript и вызовем alert(tinyMCE.activeEditor.getContent());

Все работает. Как видим, использование этого редактора в MVC проектах очень удобно и просто.

 

Комментарии  

 
-2#2Алексей2014-10-24 18:21Цитирую lifeact:
а как добавить простой загрузчик изображений?

это нереально!Цитировать
 
 
0#1lifeact2013-12-16 15:04а как добавить простой загрузчик изображений?Цитировать
 

Добавить комментарий



Обновить

Файл настроек C# программы - создание и использование »
← Раньше

Фотоальбом

fotic.jpg

Облако Тегов