Wysiwyg-редактор в ASP.NET MVC приложении

Итак, сегодня речь пойдет об испольвании редактора nicEdit в ASP.NET MVC приложении. Вот наша конечная цель (рис. 1):

 Рис. 1. Конечная цель

Для начала необходимо скачать исходники нашего будущего редактора nicEdit. Предпочитаю качать с официальных сайтов, что и вам советую - nicEdit. Файл с официального сайта представляет собой архив, из которого нам понадобятся всего 2 файла: сам js-файл и картинки для наших кнопочек в панели инструментов редактора (nicEdit.js и nicEditorIcons.gif). Копируем в папку с проектом.

Откроем View, которое будем использовать для отображения формы с редактором. У меня контроллер называется SoftController, а отображение называется Create (находится в папке /View/Soft/Create.aspx; если нет, то создайте). Ваши названия контроллера и действий могут отличаться от моих, главное, чтобы вы знали, на отображение какого действия вам перейти. На странице Site.Master (мастер-страница) я сразу резервирую место для javascript'а,:

<asp:ContentPlaceHolder ID="CustomJs" runat="server" />

Переходим на страницу, в которую будем помещать наш редактор (в моем случае Create.aspx в папке контроллера SoftController). Если вы создавали с нуля эту страницу и указали в качестве мастер-страницы Site.Master, то Visual Studio (я надеюсь, что в качестве инструментария по-умолчанию, вы используете именно её), сразу создаст все области, описанные в мастер-странице.

Для начала нам необходима область CustomJS. В неё загрузим все необходимые для работы javascript'ы (я использую, помимо серверной валидации, ещё и клиентскую (дабы перестраховаться от уж больно криворуких админов), поэтому не пугайтесь загрузки jQuery-файлов. Полная версия области будет выглядеть так:

<asp:Content ID="Content3" ContentPlaceHolderID="CustomJs" runat="server">
 <script src="/Scripts/nicEdit.js" type="text/javascript"></script>
 <script src="/Scripts/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
 <script src="/Scripts/jQuery/jquery.validate.min.js" type="text/javascript"></script>

 <script language="javascript" type="text/javascript">
  $(function() {
   new nicEditor({
    fullPanel: true,
    iconsPath: '/Content/images/nicEditorIcons.gif'
   }).panelInstance('dTextarea');
   $("#softForm").validate();
  });
 </script>

</asp:Content>

Свойство fullPanel сообщает объекту nicEditor, чтобы тот создал панель со всеми кнопками, которые только доступны в исходниках, а свойство iconPath указывает, откуда качать изображения для кнопочек. Пути для загрузки JS-файлов могут отличаться от моих.

Теперь, для тестового примера в области MainContent (при создании ASP.NET MVC приложения на странице Site.Master резервируется эта область, если нет - создйте её также, как и область CustomJs) страницы Create.aspx (отображение, на котором будет наш редактор; должно наследоваться от Site.Master) напишем следующее:

<textarea rows="25" name="Description" id="dTextarea" cols="20"></textarea>

Как вы уже заметили, то в методе panelIstance объекта nicEditor указывается уникальный идентификатор (id, простыми словами "айдишник") поля, в который будет интегрироваться редактор.

Теперь, если вы всё сделали так, как я описал, то на вашей странице будет текстовое поле с панелью инструметов для редактирования.

По умолчанию, страницы защищены от внедрения любого html-кода. Поэтому, чтобы  отключить проверку на вводимую пользователем информации, необходимо на странице написать ValidateRequest="false". Если вы используете ASP.NET MVC 2.0, то действиею контроллера поставить аттрибут [InputValidate(false)].