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.
Запускаем
Отобразился редактор – уже хорошо! Попробуем чего-нибудь написать в редакторе:
Работает!
Заключение
В качестве заключения хочется сказать следующее. У меня задача была редактировать только свойства типа ko.observable(), поэтому я сделал свойство html в моделе и делаю привязку к нему.
Редактировать простой текст простого свойства из Literal Object не получится.
Скачать демо-проект (~13Mb).
Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/Ja29gxui40A/107


Поделиться статьей:
Акция: Закажи любой сайт до окончания акции и получи скидку + подбор семантического ядра + поисковую оптимизацию сайта Это позволит Вам получать еще больше трафика и соответственно клиентов из Интернета!
До конца акции осталось
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
|
Узнайте подробности акции у менеджеров компании по телефонам: 8-924-200-7194 г.Хабаровск 8-800-550-9899 Бесплатно по России (с 2:30 до 11:30 по Мск) |
Новые статьи и публикации
- 2021-03-03 » Оптимизация канала на YouTube
- 2021-02-24 » Как попасть в Clubhouse и что там делать: гид по новой соцсети
- 2021-02-24 » ТОП-10 онлайн-консультантов для сайта
- 2021-02-16 » UX-копирайтинг: как небольшие тексты существенно повышают продажи
- 2021-02-08 » Яндекс.Кью: особенности сервиса и его польза для бизнеса
- 2021-02-01 » Покупательское поведение пользователей: как оно изменилось за последнее время?
- 2021-01-22 » PHP и регулярные выражения: азы для новичков
- 2021-01-22 » Факторы ранжирования-2021
- 2021-01-19 » Вопросы юзабилити: на что обратить внимание в 2021 году?
- 2021-01-12 » Алгоритм YATI: новая разработка Яндекса
- 2020-12-29 » DdoS-атаки: суть и способы защиты от них
- 2020-12-21 » Оплата за конверсии в Яндекс.Директе: в чём выгода и как проходит подключение?
- 2020-12-14 » Предновогодняя суета: как привлечь клиентов и активизировать продажи?
- 2020-12-03 » Ведение блога: на своём сайте или на специальной платформе?
- 2020-11-30 » Виджеты для веб-сайтов: влияние кнопок на продажи
- 2020-11-30 » CRM: что это и как помогает бизнесу?
- 2020-11-13 » Тепловые карты сайта: особенности и возможности для продвижения
- 2020-11-11 » Яндекс.Клиенты: всё о новых возможностях георекламы
- 2020-10-27 » Описания товаров для интернет-магазинов: секреты успешных продаж
- 2020-10-27 » Увеличиваем мобильный трафик: 10 способов привлечь новых клиентов
- 2020-10-14 » Определение CMS сайта: как это сделать?
- 2020-10-13 » Сайты-агрегаторы: сотрудничать или бороться за ТОП?
- 2020-10-05 » Интернет-магазин в Instagram: как его открыть?
- 2020-09-28 » Интернет-тролли: как с ними бороться и не подмочить репутацию?
- 2020-09-17 » Bing: обновление для веб-мастеров
- 2020-09-15 » Подключение платформы Яндекс.Диалоги на веб-сайт
- 2020-09-07 » Яндекс.Вордстат: как это работает?
- 2020-08-27 » Настройка аудиорекламы в социальных сетях: как её выполнить?
- 2020-08-21 » Текст для карточки товара: как сделать идеальное описание?
- 2020-08-17 » Сайты-визитки: какими они должны быть?
Предоставляем полный комплекс услуг по созданию, обслуживанию и продвижению сайтов по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.