ASP.NET MVC: Редактируем Html в CKEditor через Knockout

Введение

Редактирование html-кода достаточно тривиальная задача. Если учесть, что количество WYSIWYG-редакторов в сети огромное количество, то единственным объяснением, почему именно взят именно CKeditor это то, что я с ним работаю уже более 6 лет, а еще этот редактор может в загружать файлы (например, картинок или флэш) на сервер (правда для этого используется модуль CKFinder).

Тестовый проект

Сразу к делу. Создаю новый проект. Mvc будет 4-ый, .Net пусть будет 4.5, потому как это не принципиально для Knockout. После того как проект создала Visual Studio запускаю команду обновления всех nuget-пакетов. Чтобы вы смогли отследить какие версии и чего используются приведу лог обновления:

PM> update-package Updating 'Modernizr' from version '2.5.3' to '2.6.2' in project 'CKEditor_Knockout'. Successfully removed 'Modernizr 2.5.3' from CKEditor_Knockout. Successfully installed 'Modernizr 2.6.2'. Successfully added 'Modernizr 2.6.2' to CKEditor_Knockout. Successfully uninstalled 'Modernizr 2.5.3'. No updates available for 'Microsoft.jQuery.Unobtrusive.Validation' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.jQuery.Unobtrusive.Ajax' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebPages.OAuth' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebPages.WebData' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebPages.Data' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebApi' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebApi.WebHost' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebApi.Core' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebApi.Client' in project 'CKEditor_Knockout'. Updating 'Newtonsoft.Json' from version '4.5.6' to '4.5.11' in project 'CKEditor_Knockout'. Successfully removed 'Newtonsoft.Json 4.5.6' from CKEditor_Knockout. Successfully installed 'Newtonsoft.Json 4.5.11'. Successfully added 'Newtonsoft.Json 4.5.11' to CKEditor_Knockout. Successfully uninstalled 'Newtonsoft.Json 4.5.6'. No updates available for 'Microsoft.Net.Http' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.Web.Optimization' in project 'CKEditor_Knockout'. Updating 'WebGrease' from version '1.1.0' to '1.3.0' in project 'CKEditor_Knockout'. Successfully removed 'WebGrease 1.1.0' from CKEditor_Knockout. You are downloading WebGrease from Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript , the license agreement to which is available at http://www.microsoft.com/web/webpi/eula/msn_webgrease_eula.htm. Check the package for additional dependencies, which may come with their own license agreement(s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement(s), then delete the relevant components from your device. Successfully installed 'WebGrease 1.3.0'. Successfully added 'WebGrease 1.3.0' to CKEditor_Knockout. Successfully uninstalled 'WebGrease 1.1.0'. No updates available for 'Microsoft.AspNet.Mvc' in project 'CKEditor_Knockout'. No updates available for 'Microsoft.AspNet.WebPages' in project 'CKEditor_Knockout'. Updating 'Microsoft.AspNet.Razor' from version '2.0.20710.0' to '2.0.20715.0' in project 'CKEditor_Knockout'. Successfully removed 'Microsoft.AspNet.Razor 2.0.20710.0' from CKEditor_Knockout. You are downloading Microsoft.AspNet.Razor from Microsoft, the license agreement to which is available at http://www.microsoft.com/web/webpi/eula/WebPages_2_eula_ENU.htm. Check the package for additional dependencies, which may come with their own license agreement(s). Your use of the package and dependencies constitutes your acceptance of their license agreements. If you do not accept the license agreement(s), then delete the relevant components from your device. Successfully installed 'Microsoft.AspNet.Razor 2.0.20715.0'. Successfully added 'Microsoft.AspNet.Razor 2.0.20715.0' to CKEditor_Knockout. Successfully uninstalled 'Microsoft.AspNet.Razor 2.0.20710.0'. No updates available for 'Microsoft.Web.Infrastructure' in project 'CKEditor_Knockout'. Updating 'knockoutjs' from version '2.1.0' to '2.2.1' in project 'CKEditor_Knockout'. Successfully removed 'knockoutjs 2.1.0' from CKEditor_Knockout. Successfully installed 'knockoutjs 2.2.1'. Successfully added 'knockoutjs 2.2.1' to CKEditor_Knockout. Successfully uninstalled 'knockoutjs 2.1.0'. Updating 'jQuery.Validation' from version '1.9.0.1' to '1.10.0' in project 'CKEditor_Knockout'. Successfully removed 'jQuery.Validation 1.9.0.1' from CKEditor_Knockout. Successfully installed 'jQuery.Validation 1.10.0'. Successfully added 'jQuery.Validation 1.10.0' to CKEditor_Knockout. Successfully uninstalled 'jQuery.Validation 1.9.0.1'. Updating 'jQuery.UI.Combined' from version '1.8.20.1' to '1.10.0' in project 'CKEditor_Knockout'. Successfully removed 'jQuery.UI.Combined 1.8.20.1' from CKEditor_Knockout. Successfully installed 'jQuery.UI.Combined 1.10.0'. Successfully added 'jQuery.UI.Combined 1.10.0' to CKEditor_Knockout. Successfully uninstalled 'jQuery.UI.Combined 1.8.20.1'. Updating 'jQuery' from version '1.7.1.1' to '1.9.0' in project 'CKEditor_Knockout'. Successfully removed 'jQuery 1.7.1.1' from CKEditor_Knockout. Successfully installed 'jQuery 1.9.0'. Successfully added 'jQuery 1.9.0' to CKEditor_Knockout. Successfully uninstalled 'jQuery 1.7.1.1'. No updates available for 'EntityFramework' in project 'CKEditor_Knockout'. Updating 'DotNetOpenAuth.AspNet' from version '4.0.3.12153' to '4.2.1.13026' in project 'CKEditor_Knockout'. Successfully removed 'DotNetOpenAuth.AspNet 4.0.3.12153' from CKEditor_Knockout. Successfully removed 'DotNetOpenAuth.OAuth.Consumer 4.0.3.12153' from CKEditor_Knockout. Successfully removed 'DotNetOpenAuth.OAuth.Core 4.0.3.12153' from CKEditor_Knockout. Successfully removed 'DotNetOpenAuth.OpenId.RelyingParty 4.0.3.12153' from CKEditor_Knockout. Successfully removed 'DotNetOpenAuth.OpenId.Core 4.0.3.12153' from CKEditor_Knockout. Successfully removed 'DotNetOpenAuth.Core 4.0.3.12153' from CKEditor_Knockout. Successfully installed 'DotNetOpenAuth.Core 4.2.1.13026'. Successfully added 'DotNetOpenAuth.Core 4.2.1.13026' to CKEditor_Knockout. Successfully installed 'DotNetOpenAuth.OpenId.Core 4.2.1.13026'. Successfully added 'DotNetOpenAuth.OpenId.Core 4.2.1.13026' to CKEditor_Knockout. Successfully installed 'DotNetOpenAuth.OpenId.RelyingParty 4.2.1.13026'. Successfully added 'DotNetOpenAuth.OpenId.RelyingParty 4.2.1.13026' to CKEditor_Knockout. Successfully installed 'DotNetOpenAuth.OAuth.Core 4.2.1.13026'. Successfully added 'DotNetOpenAuth.OAuth.Core 4.2.1.13026' to CKEditor_Knockout. Successfully installed 'DotNetOpenAuth.OAuth.Consumer 4.2.1.13026'. Successfully added 'DotNetOpenAuth.OAuth.Consumer 4.2.1.13026' to CKEditor_Knockout. Successfully installed 'DotNetOpenAuth.AspNet 4.2.1.13026'. Successfully added 'DotNetOpenAuth.AspNet 4.2.1.13026' to CKEditor_Knockout. Successfully uninstalled 'DotNetOpenAuth.AspNet 4.0.3.12153'. Successfully uninstalled 'DotNetOpenAuth.OAuth.Consumer 4.0.3.12153'. Successfully uninstalled 'DotNetOpenAuth.OAuth.Core 4.0.3.12153'. Successfully uninstalled 'DotNetOpenAuth.OpenId.RelyingParty 4.0.3.12153'. Successfully uninstalled 'DotNetOpenAuth.OpenId.Core 4.0.3.12153'. Successfully uninstalled 'DotNetOpenAuth.Core 4.0.3.12153'. No updates available for 'DotNetOpenAuth.OAuth.Consumer' in project 'CKEditor_Knockout'. No updates available for 'DotNetOpenAuth.OAuth.Core' in project 'CKEditor_Knockout'. No updates available for 'DotNetOpenAuth.OpenId.RelyingParty' in project 'CKEditor_Knockout'. No updates available for 'DotNetOpenAuth.OpenId.Core' in project 'CKEditor_Knockout'. No updates available for 'DotNetOpenAuth.Core' in project 'CKEditor_Knockout'.

PM>

Теперь когда проект почти готов, надо бы загрузить и установить сам редактор CKEditor. Иду по ссылки и качаю последнюю версию (на момент написания статьи версия 4.0.1). Распаковываю архив и (для экономии времени) закидываю всю папку ckeditor в корень проекта. По идеи можно было бы "почистить" немного папку, удалив файлы примера и ненужные плагины, а еще файлы справки (всё равно их никто не читает).

Классы и формы

Создаю новый класс, который будет использоваться… Не будет у меня никаких классов, ибо цель данной статьи показать другое. Ставим новый nuget-пакет, который называется JsSite:

PM> install-package jssite Successfully installed 'JsSite 0.3.0'. Successfully added 'JsSite 0.3.0' to CKEditor_Knockout.

PM>

После установки этого пакета, в папке Scripts появилась еще одна папка App. В этот папке набор полезных файликов (немного описания можно найти в статье), которые я сделал, чтобы ускорить разработку проектов такого типа как этот. Просто и быстро. Далее...

Для начала удаляю содержание представления (view) в Home/Index.cshtml, потому что буду писать новую разметку под Knockout. А теперь немного кода на JavaScript.

   1:  $(function () {

   2:  

   3:  "use strict";

   4:  

   5:  

   6:      site.vm.homeIndex = function () {

   7:  var meta = new site.fw.Metadata("Демонстрация редактирования HTML",

   8:  "Данный CKEditor используется в связке с Knockout. 
                           Дополнительные инструкции в статье.",

   9:  "http://www.calabonga.net/blog/post/107"),

  10:              title = ko.observable("Этот текст редактируется!"),

  11:              html = title,

  12:              save = function () {

  13:                  alert("Сохранилось! " + html());

  14:              };

  15:  

  16:  return {

  17:              title: title,

  18:              save: save,

  19:              meta: meta,

  20:              html: html

  21:          };

  22:      }();

  23:  

  24:      ko.applyBindings(site.vm.homeIndex);

  25:  

  26:  });

В строке 6 создается viewModel для страницы, а в строке 24 осуществляется привязка.

В строке 10 создаем поле, которое я и собираюсь редактировать. А 11-ой я создаю временную переменную, дальше будет понятно.

Теперь немного много разметки. Вся форма (представление Index) целиком:

Ключевыми строчками кода является 13 (прекрасный номер для главной строки, не правда ли?) и строчка номер 23. В 13-ой посмотрите на атрибут data-bind и, соответственно, на ckeditor (код может скачать и посмотреть). В 24 строке как раз, тот самый custom binding.

Запускаем

• Комментарии