Использование контрола HtmlEditor. Часть 3

Часть 1. Использование HtmlEditor на страницах/контролах SharePoint
Часть 2. Создание своего контрола на базе HtmlEditor
Часть 3. Варианты использование HtmlEditor
Исходные коды демонстрационного проекта

Редактор в модальном окне

Для начала пример с модальным окном. Здесь нам понадобится jQuery (исключительно для удобства, можно обойтись и без этой библиотеки). Сценарий применения следующий: На странице есть простая кнопка/ссылка по нажатии на которую, вызывается модальное окно, пользователь вводит данные и окно закрывается. Основная страница не перегружена "тяжелым" контролом, коим является HtmlEditor.

Вызов модального окна - одно удовольствие и минимум кода:

  1. function GetHtmlContent() {
  2.   var options = {
  3.     url: "/_layouts/ZhukBlogUsingHtmlEditor/ModalEditor.aspx",
  4.     title: "HtmlEditor",
  5.     width: 500,
  6.     dialogReturnValueCallback: editorCallback
  7.   }
  8.   SP.UI.ModalDialog.showModalDialog(options);
  9. }
  10.  
  11. function editorCallback(result, target) {
  12.   if (result == 1) { //Пользователь нажал кнопку "ОК"
  13.     $("#HtmlModalResult").html(target);
  14.     $("#<%= HTMLSource.ClientID %>").html(target);
  15.   } else { //Пользователь отменил ввод
  16.     alert("Canceled");
  17.   }
  18. }

Здесь ничего сложного. Страница, открываемая в диалоговом окне содержит стандартный HtmlEditor (подробнее читай часть 1). А вся хитрость заключается в получении HTML-кода из редактора на стороне клиента без вызова постбэка. HtmlEditor хранит этот HTML-код в поле, ID которого получается путем конкатенации ClientID самого контрола и "_displayContent". Таким образом возвращать значение вызывающей странице мы будем вот таким кодом (JavaScript):

  1. function ReturnValue() {
  2.   window.frameElement.commonModalDialogClose(1, $('#<%= Editor.ClientID %>_displayContent').html());
  3. }

Весь код я здесь не привожу, так как исходные коды демонстрационного проекта прилагаются.

UIVersion = 3

Теперь я покажу как обеспечить совместимость с предыдущей версией интерфейса, доставшейся от SharePoint 2007. Просто так наш HtmlEditor не заработает. Для работы ему не хватает стилей из forms.css. Но и эта проблема решается путем добавления на вызывающую страницу следующего кода:

  1. protected override void OnPreRender(EventArgs e)
  2. {
  3.   base.OnPreRender(e);
  4.   if (SPContext.Current.Web.UIVersion == 3)
  5.     CssRegistration.Register("forms.css");
  6. }

Теперь все работает при любых обстоятельствах:

Виталий Жуков

Виталий Жуков

Техлид, Архитектор, Разработчик, Microsoft MVP. Более 20 лет опыта в области системной интеграции и разработки программного обеспечения. Специализируюсь на проектировании и внедрении масштабируемых высокопроизводительных программных решений в различных отраслях.

Смотрите также