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 проектах очень удобно и просто.

 

 омментарии  

 
0#3Williamtix2017-11-19 03:17Easy way to lose weight fast for a week:
https://sites.google.com/site/weightlossluxury/weight-loss-eat-this-not-that


Interesting queries:
diet plan schedule to lose weight
weight loss and spotting between periods
weight loss lunch ideas
best soft drinks for weight loss
nutriplex weight loss reviews
have to lose weight in 4 days
herbs weight loss metabolism
fast weight loss online information
kutting weight loss sauna workout sweatshirt
÷итировать
 
 
-1#2јлексей2014-10-24 18:21÷итирую lifeact:
а как добавить простой загрузчик изображений?

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

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


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

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

‘отоальбом

fotic.jpg

ќблако “егов