Кастомизация
01
Окт
7

Текстовый редактор на форме MS CRM

В MS CRM есть такая интересная форма объекта Электронная почта. Спрашиваете почму интересная? Потому что на ней реализован механизм визуального форматированоя текста. К большому сожалению его нельзя воспроизвести стандартным путем (с помощью настройки) на другие текстовые области – а надо! Поэтому, как всегда, воспользуемся не стандартным 🙂

Для этого интегрируем в CRM написанный на JavaScript WYSIWYG-редактор. В сети существует довольно много подобных систем, при этом открытых и бесплатных. В данном примере воспользуемся одним из наиболее распространенных – TinyMCE.

Приступим…

  • Первым делом скачайте последнюю версию мини-пакета TinyMCE (локальное зеркало версии 3.2.7). В архиве помимо прочего есть папка tiny_mce. Найдите ее и скопируйте в папку <сайт CRM>\ISV\. В скопированной папке tiny_mce создайте файл WYSIWYG.html со следующим содержимым:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>tinyMCE</title>
        
    <STYLE type="text/css">
    
    BODY {
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    
    </STYLE>
    
    <script type="text/javascript" src="tiny_mce.js"></script>
    <script type="text/javascript">
    
    tinyMCE.init({
    	// General options
    
    	mode : "textareas",
    	theme : "advanced",
    	plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
    	// по окончании загрузки редактора вызываем функцию
    	init_instance_callback: "getFromParent",
    
    	
    	// Theme options
    	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    	theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    	theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
    	theme_advanced_toolbar_location : "top",
    	theme_advanced_toolbar_align : "left",
    	theme_advanced_statusbar_location : "bottom",
    
    	// Example content CSS (should be your site CSS)
    	content_css : "css/example.css",
    
    	// Drop lists for link/image/media/template dialogs
    	template_external_list_url : "js/template_list.js",
    	external_link_list_url : "js/link_list.js",
    	external_image_list_url : "js/image_list.js",
    	media_external_list_url : "js/media_list.js"
    });
    
    
    // подтягиваем с формы CRM значение поля new_wysiwyg (измените его если оно у Вас отличается)
    function getFromParent() {
    
        tinyMCE.getInstanceById("wysiwyg").setContent(window.parent.document.forms[0].all.new_wysiwyg.DataValue);
    
    }
    
    // подгоняем размер редактора под размеры окна при загрузке
    window.onload = function() {
    
        editor = document.getElementById("wysiwyg_ifr");
        editor.style.height = document.documentElement.clientHeight - 129; // возможно Вам придется подкорректирвать последнее число - зависит от применяемых панелей инструментов
    
    }
    
    // меняем размер редактора при изменении размеров окна
    window.onresize = function() {
    
        editor = document.getElementById("wysiwyg_ifr");
        editor.style.height = document.documentElement.clientHeight - 129; // возможно Вам придется подкорректирвать последнее число - зависит от применяемых панелей инструментов
    
    }
    
    </script>
    
    </head>
    <body>
    <form method="post" action="somepage">
    	<textarea id="wysiwyg" style="width:100%">
    	</textarea>
    </form>
    </body>
    </html>
    

    Вы можете разу скачать папку tiny_mce, подготовленную мной, и поместить в папку ISV.


  • Создайте новый атрибут типа nText с именем wysiwyg (отображаемое имя можете выбрать сами) в нужном Вам объекте (в данном примере рассматривается объект Задача). Он нам понадобится чтобы хранить, то что Вы введете в текстовом редакторе. Это необходимо потому, что редактор будет загружаться в iFram’е и после того, как Вы закроете форму объекта, все введенные в редакторе данные сотрутся. Следовательно нам нужно где-то хранить их. Этим хранилищем и будет служить атрибут nText. При открытии редактора из этого поля будут подтягиваться данные, а при сохранении записываться в него;
  • Откройте настройки формы этого объекта и создайте в нем новую вкладку. На этой вкладке создайте два раздела. В нижний раздел поместите новый атрибут;
  • В верхний раздел добавьте iFrame со следующими настройками:
    • Имя: wysiwyg;
    • URL: http://crm2008/ISV/tiny_mce/wysiwyg.html (измените имя CRM сервера на Ваш);
    • Снимите галку Ограничить использование сценариев между кадрами;
    • На вкладе Формаирование поставьте галку Автоматически развертывать для заполнения доступной области окна.



  • На онлоад формы поместите следующий скрипт:
    document.getElementById("new_wysiwyg").parentElement.parentElement.parentElement.style.display = 'none';
    

    Этот скрипт скрывает поле используемое как хранилище – пользователям незачем его видеть!

  • А на онсейв вот этот:
    crmForm.all.new_wysiwyg.DataValue = document.frames["IFRAME_wysiwyg"].tinyMCE.getInstanceById("wysiwyg").getContent();
    

    При сохранении мы выцепляем из редактора все, что туда навводили, и помещаем в хранилище, где оно и будет сохранено!


Тестируем…

Создайте запись объекта Задача (или откройте существующую) и перейдите на вкладку с редактором.


П.С.

Вы можете произвольным образом настроить Ваш редактор поигравшись с файлом WYSIWYG.html (в примере я добавил почти все доступные функциональные возможности). О том как это сделать можете посмотреть в примерах и документации.

Комментарии (7)
  • Анатолий 01.10.2009

    Здравствуйте. Еще раз с наступившим :)))
    А вы не подскажите — ведь в CRM есть какой то встроенный редактор небольшой урезанный но редактор, в текстовом поле description сущности e-mail сверху же есть таблица id=»HTMLBAR» и картинки-кнопки с функциями HTMLBAR.htmlExec(‘…’), копировать, вставить, шрифт, размер, цвет и т.д. А как бы это все использовать в других текстовых полях других сущностей например в поле description Задачи.
    Спасибо.

  • slivka_83 01.10.2009

    Да, вроде никак 🙂 Только вот этот способ с айфремом придумали 🙂

  • slivka_83 01.10.2009

    А что Вам мешает снести поле description в Задачах и заменить его iFrame’ом?

  • Анатолий 01.10.2009

    Здравствуйте. Спасибо за участие.
    Вся беда в том, что как мы уже обсуждали в теме про счетчик нет доступа ни к чему кроме isv.config, кроме того заполнено столько description полей в задачах, что юзверя меня просто линчуют.
    Просто при попытке разобраться как поле description работает в мылах, я так понял что функции редактора есть, вызывать их можно в других полях, но проблема как сохранять отредактированный текст.
    Спасибо.

  • slivka_83 01.10.2009

    1. У вас даже к онлоаду нет доступа? Я предлагал скрывать поле именно оттуда с помощью JS. И сносить его не нужно 🙂 в нем можно хранить форматированный текст. А текущий также будет в iFrame подтягиваться.
    2. Про вызвать в других полях функции редактора я не совсем понял можно поподробнее?

  • Дмитрий 01.10.2009

    Добрый день!
    а возможно ли добавить этот редактор в класс шаблон электронной почты?
    по умолчанию который убог до ужоСа ;(

  • slivka_83 01.10.2009

    Если на вкидку то можно… можно отредактировать напрямую страницу (ASPX) создания/редактирования шаблона, добоавив в нее свой веб-редактор. А стандартный скрыть 🙂 При этом JS-скриптом при сохранении переносить данные из своего в стандартный 🙂

*

code