Кастомизация
22
Сен
9

Текстовый редактор на форме MS CRM, эпизод II

Когда-то я уже писал о способе интеграции WYSIWYG текстового веб-редактора TinyMCE в CRM. Тогда для этого использовались iFrame’ы, много JS-кода и допиливание самого редактора (точнее страницы хостирующей его). Сегодня рассмотрим как подключить другой WYSIWYG редактор – FCKeditor. Но на этот раз способ подключения разительно отличается своей простотой 🙂 Приступим…

  • Скачейте последнюю версию FCKeditor (не путать с CKEditor) и разархивируйте в папку fckeditor в папке <сайт CRM>\ISV. Локальное зеркало версии FCKeditor 2.6.6, на которой проводится эксперимент 🙂
  • Создайте в CRM для какой-либо формы новое поле с типом ntext. Разместите его на форме и уберите для него подпись (делается в свойствах поля на форме);
  • На онлоад поместите такой скрипт:
    function InjectScript(scriptFile) {
        var netRequest = new ActiveXObject("Msxml2.XMLHTTP");
        netRequest.open("GET", scriptFile, false);
        netRequest.send(null);
        eval(netRequest.responseText);
    
        // Создаем FCKeditor
        var oFCKeditor = new FCKeditor('new_fckeditor'); // Указываем имя поля ntext
        oFCKeditor.BasePath = "/ISV/fckeditor/";
        oFCKeditor.ReplaceTextarea();
    }
    
    // Подключаем внешний скрипт FCKeditor
    InjectScript('/ISV/fckeditor/fckeditor.js');
    // Разворачиваем редактор на всю доступную область
    document.getElementById('new_fckeditor___Frame').style.height = "100%";
    
    

    Этот код подключает внешний JS-файл, включающего в себя всю логику работы FCKeditor’а. и создает из поля ntext (в разметке HTML это <textarea>) текстовый веб-редактор. не забудьте только в коде изменить имя поля ntext на ваше 🙂

  • А на онсейв такой код:
    // Переносим данные из FCKeditor в поле ntext
    var ed = FCKeditorAPI.GetInstance('new_fckeditor');
    crmForm.all.new_fckeditor.DataValue = ed.GetHTML();
    crmForm.all.new_fckeditor.ForceSubmit = true;
    

    Тут просто при онсейве происходит перенос содержимого FCKeditor’а в поле ntext, чтобы введенные данные были сохранены в БД;

  • Собственно, все 🙂 Публикуйте и смотрите 🙂







З.Ы. Много примеров по настройке FCKeditor’а Вы можете найти в официальной документации 🙂

Комментарии (9)
  • Vladislav Osmanov 22.09.2010

    И всё-таки TinyMCE — наше всё. Особенно в связке с IMCE : )

  • Dissidenr 22.09.2010

    оно конечно хорошо, но вот тут
    eval(netRequest.responseText);
    валится с ошибкой «синтаксическая ошибка»

  • slivka_83 22.09.2010

    Пробовали под разными юзверами (в том числе под админом)? И на разных компьютерах (в том числе на сервере)?

  • absurdperson 22.09.2010

    Почему-то не могу изменить размер поля редактора на форме. Имея небольшие познания в javascript пытался вариативно поменять последнюю строчку (document.getElementById(‘new_fckeditor___Frame’).style.height = «100%»;), но никакого эффекта не было, либо появляются ошибки.

  • absurdperson 22.09.2010

    Редактор добавился на форму, но не могу изменить его размеры. CMR’ла ругается на строчку
    document.getElementById(‘new_fckeditor___Frame’).style.height = «100%»;

  • slivka_83 22.09.2010

    CRM какой? в остальном код отрабатывает, редактор создается? версия редактора та же?

  • absurdperson 22.09.2010

    Версия CRM — 4.0.7333.3732
    На сервер установлен Rollup 20
    FCKeditor качал по вашей ссылке, так что его версия та же.
    В остальном код работает, редактор нормально функционирует. Проблема именно в изменении размеров. Помимо кода, взятого с данного материала, на onLoad формы у меня написан код для разворачивания окна на весь экран и небольшая функция для фильтрации лукапа на форме. Удаление этого кода ни к чему не приводит. Все действия произвожу непосредственно на сервере MS CRM, то есть локально.

  • slivka_83 22.09.2010

    Попуробуйте открыть IE DevToolBar (по кнопке F12) и добравшись до узла new_fckeditor___Frame изменить его ширину вручную. Вообще такой узел у Вас есть?

  • absurdperson 22.09.2010

    Помогли решить проблему на axforum’е путём замены последней строки на onLoad’e
    на строку
    window.setTimeout(«document.getElementById(‘new_fckeditor___Frame’).style.height = document.body.clientHeight- 200», 1000);
    window.onresize = function()
    {
    document.getElementById(‘new_fckeditor___Frame’).style.height = document.body.clientHeight — 200;
    }

*

code