Кастомизация
16
Ноя
5

Редактирование HTML-кода а Электронных сообщениях

В двух предыдущих постах – Вставка в Электронную почту форматированного текста с помощью JavaScript, Добавление в электронную почту динамического форматированного контента с помощью бизнес-процессов – рассказывалось, как программным способом разнообразить HTML-разметку электронных писем. Единственным их недостатком является умение программировать либо на JavaScript, либо на C#. Чтобы упростить себе эту задачу можно воспользоваться копированием готового HTML-контента либо из WYSIWYG-редактора, либо с готовой HTML-страницы. Но к сожалению код, подготовленный WYSIWYG-редактором или скопированный с какой-либо страницы зачастую не отвечает необходимым критериям «чистоты», т.е. содержит лишний и ненужный или не соответствует стандартам W3C код. Что в итоге сказывается на отображении HTML-контента в различных браузерах и платформах. Поэтому сейчас рассмотрим способ ручного, визуального и оперативного добавления/редактирования HTML-разметки в сообщениях Электронной почты (причем непосредственно с формы Электронной почты).

Весь замысел заключается в добавлении кнопки на панель инструментов WYSIWYG-редактора, по нажатию на которую WYSIWYG-редактор будет переключаться в редактор HTML-кода и обратно.

Все что нужно это добавить в конец файла <сайт CRM>\ Activities\email\edit.aspx (это форма редактирования объекта Электронная почта) такой JavaScript-код:

<script language="JavaScript" type="text/javascript">
    mode = 'textedit'; // Первоначальное состояние, в которое следует переключить редактор
    RichEdit = document.all['descriptionIFrame'].outerHTML; // Исходный WYSIWYG-редактор

    function addViewSourceBtn() {
        var t = document.getElementById("HTMLBAR"); // Получаем доступ к тулбару редактору
        var c = t.getElementsByTagName("TD")[0].outerHTML; // Получаем первую кнопку тулбара
        var v = c.replace("cmd-cut.gif", "cmd-insertKB.gif"); // Клонируем первую кнопку и заменяем на ней иконку...
        v = v.replace("HTMLBAR.htmlExec('cut')", "ViewSource()"); // ... и обработчик
        t.outerHTML = t.outerHTML.replace(c, v + c); // Пересоздаем тулбар с новой кнопкой
    }

    addViewSourceBtn();

    function ViewSource() {
        // Опеределяем редактор HTML-кода
        var TextEdit = '<textarea ID="descriptionIFrame" style="width:100%;height:100%;"></textarea>';
        var editor_obj = document.all['descriptionIFrame'];

        // Переключаем редактор на другой вид
        if (mode == "textedit") {
            mode = 'wysiwyg';

            // Убираем WYSIWYG-редактор
            var editdoc = editor_obj.contentWindow.document;
            var contents = editdoc.documentElement.outerHTML;
            editor_obj.outerHTML = TextEdit;
            var editor_obj = document.all['descriptionIFrame'];
            editor_obj.value = contents;

            b = document.all['HTMLBAR'].getElementsByTagName("TD"); // Скрываем кнопки WYSIWYG-редактора...
            for (i = 0; i < b.length; i++) {
                with (b[i]) { // ... кроме первой
                    if (i != 0) style.visibility = 'hidden';
                }
            }

        } else {
            mode = 'textedit';

            // Отображаем WYSIWYG-редактор
            var contents = editor_obj.value;
            editor_obj.outerHTML = RichEdit;
            var editor_obj = document.all['descriptionIFrame'];
            var editdoc = editor_obj.contentWindow.document;

            // Копируем HTML-код в WYSIWYG-редактор
            editdoc.open();
            editdoc.write(contents);
            editdoc.close();

            b = document.all['HTMLBAR'].getElementsByTagName("TD"); // Отображаем кнопки WYSIWYG-редактора
            for (i = 0; i < b.length; i++) {
                b[i].style.visibility = '';
            }
        }
    }
</script>

Что тут у нас есть:

  • Прежде всего, мы запоминаем начальное состояние WYSIWYG-редактора и режим в который следует переключить редактор;
  • Далее создаем на панели инструментов кнопку, по нажатию на которую будем менять состояние редактора (с WYSIWYG на редактор кода);
  • Затем идет функция, которая собственно и меняет состояние редактора при нажатии на кнопки. При значении флага mode равного «textedit» создается HTML-редактор на основе тега textarea, в который копируется содержимое iFrame’а descriptionIFrame (в котором собственно и выполняется редактирование текста). А также скрываются все кнопки, кромепервой (коотрая переключает состояние редактора). Если же флаг mode равного «wysiwyg», то возвращаем WYSIWYG-редактор и копируем в него содержимое тега textarea и отображаем кнопки редактора.

Теперь при открытии объекта Электронной почту на тулбал WYSIWYG-редактора будет добавляться новая кнопка, при нажатию на которую WYSIWYG-редактор будет переключаться на редактор HTML-кода. При повторном нажатии Вы снова увидите WYSIWYG-редактор.



Комментарии (5)
  • Sergey 16.11.2010

    Я попробовал доработку. Она действительно позволяет править теги. Но вот беда. Если я вставляю фрагмент HTML кода, и отправляю письмо — оно приходит пустым. Также нельзя выполнить сохранение письма.

  • slivka_83 16.11.2010

    Не знаю. чего там с отправкой. Но не сохраняется потому что система не «видит» изменений 🙂 внесите скриптом изменения в какое-нибудь поле и сохранение вновь будет работать 🙂

  • Макс 16.11.2010

    А можно ли так, что бы доработка отображалась и в шаге бизнес-процесса «отправить электронную почту» ?

  • Макс 16.11.2010

    К сожалению действительно письмо приходит пустым при вставке фрагмента хтмл кода(

  • slivka_83 16.11.2010

    Может быть такое поведение появилось после какого-либо ролапа.

*

code