Используем FCK редактор в ASP.NET MVC

четверг, 13 мая 2010, Евгений Жарков

Прежде всего, что такое FCKEditor? Это редактор HTML. Он бесплатен и открыт, является кроссбраузерным, расширяемым и так далее. А, ну и еще он стоит по умолчанию в DotNetNuke. Fck Editor уже переименован в CK Editor, так что не пугайтесь, работают они одинаково.

Прежде всего вам нужно загрузить Fck Editor. Распаковать файл, чтобы увидеть содержимое.image

Скопируйте папку “editor” в директорию Content вашего ASP.NET MVC проекта. Я выбрал следующий путь "/Content/Js/ Fck" для размещения.

Так же вам нужно скопировать два файла в Content,  которые лежат в корне архива: fckeditor.js и fckconfig.js. Первый содержит функции для инстанцирования редактора, а второй, как не удивительно, его настройки.

image

Далее подключим fckeditor.js к нашей странице:

<code><script src="<%= Url.Content("~/Content/Js/fck/fckeditor.js") %>" type="text/javascript" ></script></code>

Теперь нужно добавить textarea на страницу:

<code><%= Html.TextArea("FckEditor1", "Some Value", <br />  new { @name="FckEditor1" })%></code>

Важной частью является то, что имя TextArea должно совпадать с Id.

И чтобы закончить с клиентской частью, нужно добавить пару строчек javascript кода для превращения текстовой области в Fck Editor. Все это можно скопировать с примеров, кроме Url.Contents части:

<code><script type="text/javascript"><br />window.onload = function()<br />{<br />  var sBasePath = '<%= Url.Content("~/Content/Js/Fck/") %>';<br /><br />  var oFCKeditor = new FCKeditor( 'FckEditor1' ) ;<br />  oFCKeditor.BasePath = sBasePath ;<br />  oFCKeditor.ReplaceTextarea() ;<br />}<br /></script></code>

Чтобы избежать ошибки сервера “A potentially dangerous Request.Form value was detected from the client”, вам следует добавить атрибут “ValidateInput” в метод действия контроллера:

<code>[ValidateInput(false)]<br />public ActionResult Save(int id)<br />{<br />    ...<br />}</code>

Теперь можно и в бой. Содержимое TextArea будет идентично содержимому FckEditor’a.

Источник - MSMVPS


Ищите нас в интернетах!

Комментарии

Свежие вакансии