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

09:11:2013 –≥.

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

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

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

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

Ќиже предоставлены скриншоты того, что должно у нас получитс€:
–едактор Tinymce в MVC 4 ASP.NET



» после нажани€ на кнопку "—пр€тать редактор" должно получитс€:

–езультат скрыти€ Tinymce

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

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

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

”становка NuGet Tinymce

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

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

¬ставка кода в проект 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

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

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

“еперь переходим к вопросу как спр€тать редактор и оставить один только форматирвоанный текст после редактировани€. ћы помним, что поместили редактор в тег p. Ёто значит, что весь текст, который вводитс€ в редактор "прив€зан" к нему. ¬се что нам нужно теперь это скрыть редактор в нашем проекте ASP.NET MVC после какого-то событи€. ѕоэтому создаем кнопку (input) и вешаем на нее javascript обработчик.

—пр€тать редактор Tinymce

 ак видим из кода, мы обрабатываем нажатие на кнопку с id button. » вызываем функцию hide дл€ редактора, который находитс€ по селектору 'editor'. —обственно, все. ‘орма скрываетс€, оставл€€ наш форматированный текст в формате html, как было показано на скриншотах в начале.

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

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

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

 

 омментарии  

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

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

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


«ащитный код
ќбновить

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

‘отоальбом

fotic.jpg

ќблако “егов