Редактор WYSIWIG

CimWebCenter имеет встроенныйWYSIWIG редактор. Это означает, что для внесения простых изменений в содержимое страниц нет необходимости знания языка разметки документов HTML. Все содержимое страниц выглядит так же, как видят его посетители сайта. При этом редактор позволяет редактировать его и сразу же видеть вносимые изменения. 

Встроенные функции WYSIWIG редактора:

  • Cut, Copy, Past – функции для работ (вырезать скопировать, вставить)
  • Undo – отмена действия, восстановить предыдущее действие
  • Redo – перейти к следующему действию
  • Align left – выравнивание выделенного фрагмента влево
  • Align center – выравнивание выделенного фрагмента по центру
  • Align right – выравнивание выделенного фрагмента вправо
  • Ordered list – создает нумерованный список из выделенного фрагмента
  • Bulleted list – создает маркированный список из выделенного фрагмента
  • Indent – отступ вправо
  • Outdent – отступ влево
  • Hyperlink – создание ссылки
  • Image – вставить картинку
  • Insert symbol – вставить символ
  • Show borders – режим видимости границ
  • Show datails – режим видимости маркеров
  • Edit HTML source – редактирование страницы в HTML
  • Clean HTML – очистка HTML кода
  • Table – вставить таблицу
  • Insert column – вставить в таблицу колонку
  • Insert row – вставить в таблицу строку
  • Insert cell – вставить в таблицу ячейку
  • Delete column – удалить колонку
  • Delete row – удалить строку
  • Delete cell – удалить ячейку
  • Merge cells – объединить ячейки таблицы
  • Split cells – разбить ячейки таблицы
  • Выбор стиля(список) – задать стиль для выделенного фрагмента
  • Выбор гарнитуры шрифта (список) – задать шрифт  для выделенного фрагмента
  • Размер шрифта – установить размер шрифта для фрагмента текста
  • Font – комплексный выбор гарнитуры  шртифта, размер, цвет, стиль
  • Bold – выделение фрагмента текста жирным
  • Italic – выделение фрагмента текста курсивом
  • Underline – выделение фрагмента текста подчеркнутым
  • Background color – установка цвета фона фрагмента текста
  • Foreground color – установка цвета фрагмента текста
  • Horizontal rule – вставить горизонтальную линию.

Создание ссылки

Для создания ссылки необходимо выделить фрагмент текста или имидж и нажать кнопку «Hyperlink». В открывшемся окне необходимо выбрать протокол (по умолчанию http:) и в поле URL: ввести требуемый адрес:

Примечание: при сохранении адреса редактор сохраняет полный URL. Например, если указать в строке URL: /new-page/ - после сохранения ссылка будет выглядеть как http://www.mysite.com/new-page.

Вставка картинок

Для того чтобы вставить имидж (или другой внешний файл) в содержимое страницы необходимо:

  • Выбрать место, куда эта картинка должна быть вставлена,  установить туда курсор и кликнуть на кнопку «Image», появится окно (см. скриншот):

  • Далее необходимо задать параметры имиджа: 
    • Picture Source - URL картинки (вы могли скопировать его в буфер обмена в загрузчике имиджей), если вы его не знаете, то  нажмите на кнопку Browse, появится окно, см. скриншот:

      • В левом верхнем фрэйме находится список имиджей, выбрав нужный имидж необходимо нажать на кнопку "OK"
      • Если в списке нет ни одного имиджа, вы можете нажать на кнопку "Обзор", выбрать имидж на вашем компьютере и нажать на кнопку Upload
      • Другой список загрузки имиджей - через "Загрузчик имиджей"
    • После выбора имиджа для вставки и нажатия на кнопку "OK", вы возвращаетесь к окну установки параметров вставки  имиджа:

    • Здесь вы можете установить следующие параметры вставки имиджа:
      • Alternate Text (параметр Alt=)
      • Aligment - выравнивание (параметр align=)
      • Border - граница имиджа (параметр border=)
      • Horisonral - отступ по горизонтали (параметр hspace=)
      • Vertical - отступ по вертикали (параметр vspace=)
      • Width - ширина (параметр width=)
      • Height dscjnf - высота (параметр height=)
    • После нажатия на кнопку OK выбранный имидж будет вставлен в страницу в том месте, где находился курсор.

Изменения параметров картинок

Для изменения параметров имиджей необходимо выбрать картинку, указав на нее курсором. При этом вокруг имиджа появятся маркеры.

После этого следует нажать на кнопку Image в меню WYSIWIG редактора, появится следующее окно:

    • Здесь вы можете установить следующие параметры вставки имиджа:
      • Alternate Text (параметр Alt=)
      • Aligment - выравнивание (параметр align=)
      • Border - граница имиджа (параметр border=)
      • Horisonral - отступ по горизонтали (параметр hspace=)
      • Vertical - отступ по вертикали (параметр vspace=)
      • Width - ширина (параметр width=)
      • Height dscjnf - высота (параметр height=)
    • После нажатия на кнопку OK - параметры выбранного имиджа будут изменены.

Вставка символа

Для вставки символа необходимо нажать на кнопку Insert symbol в меню WYSIWIG редактора:

Выбрать нужный символ и нажать на кнопку "OK"

Режим видимости границ

Редактор позволяет включить режим показа рабочей области редактирования. Для этого необходимо нажать на кнопку Show Borders в меню WYSIWIG редактора, при этом отображаются  также границы таблиц, даже если параметр border в них установлен  0.

Режим видимости маркеров

Редактор позволяет включить режим видимости маркеров, для этого необходимо нажать на кнопку Show Details в меню WYSIWIG редактора:

Очистка HTML

Редактор позволяет производить очистку HTML кода от ненужных тегов. Обычно они появляются после импортирования контента из других офисных пактов, например Ms Office.

Для этого необходимо нажать на кнопку Clean HTML, в меню WYSIWIG редактора:

Далее необходимо выбрать теги, которые вы хотите удалить и нажать на кнопку "OK"

  • Clean empty tasgs - удаление пустых тегов
  • Clean MS Office tag - удаление тегов MS Office
  • Clean MS Office tag (class="Mso...") - удаление тегов MS Office с параметрами
  • Clean MS Office tag (style="mso-...") - удаление тегов MS Office с параметрами
  • Clean inline style (style=" ...")  - удаление inline style
  • Clean FONT tag - очистка тегов FONT
  • Clean SPAN tag - очистка тегов SPAN.

Вставка таблиц

Редактор предоставляет широкие возможности по работе с таблицами.

Для вставки таблицы в документ необходимо установить курсор и нажать на кнопку Table в меню WYSIWIG редактора:

Далее необходимо указать следующие параметры:

  • Rows - количество строк
  • Cols - количество колонок
  • Width - ширина таблицы
  • Height - высота таблицы
  • Cell spacing - толщина разделителя ячеек
  • Cell padding - отступ от разделителя ячеек до элементов ячеек
  • Border - толщина тела таблицы
  • Border color - цвет тела таблицы
  • Background color - цвет фона таблицы.

Изменение параметров таблиц

Редактор предоставляет широкие возможности по работе с таблицами.

Для изменения параметров таблицы необходимо кликнуть на таблицу; при этом она будет выделена маркерами:

и нажать на кнопку Table в меню WYSIWIG редактора:

Далее необходимо указать следующие параметры:

 

  • Rows - количество строк (изменить нельзя)
  • Cols - количество колонок (изменить нельзя)
  • Width - ширина таблицы
  • Height - высота таблицы
  • Cell spacing - толщина разделителя ячеек
  • Cell padding - отступ от разделителя ячеек до элементов ячеек
  • Border - толщина тела таблицы
  • Border color - цвет тела таблицы
  • Background color - цвет фона таблицы

 

Добавить, удалить, объединить, ячейки, колонки, строки таблицы

Редактор предоставляет широкие возможности по работе с таблицами.

Для того чтобы произвести действие с таблицей, сущестуют следующие функции в меню WYSIWIG редактора:

  • Insert column - вставить в таблицу колонку
    • необходимо установить курсор в ячейку таблицы; колонка будет вставлена слева от текущей колонки
  • Insert row - вставить в таблицу строку
    • необходимо установить курсор в ячейку таблицы; строка будет вставлена сверху от текущей строки
  • Insert cell - вставить в таблицу ячейку
    • необходимо установить курсор в ячейку таблицы; ячейка будет вставлена слева от текущей ячейки
  • Delete column - удалить колонку
    • необходимо установить курсор в ячейку таблицы; удалена будет текущая колонка
  • Delete row - удалить строку
    • необходимо установить курсор в ячейку таблицы; удалена будет текущая строка
  • Delete cell - удалить ячейку
    • необходимо установить курсор в ячейку таблицы; удалена будет текущая ячейка
  • Merge cells - объединить ячейки таблицы
    • необходимо выделить содержимое нескольких ячеек; они будт объединены
  • Split cells - разбить ячейки таблицы
    • необходимо установить курсор в ячейку таблицы; она будет разделена на две.

Выбор цвета фона и текста

Редактор позволяет установить цвет  фонта и его фона, для этого в меню WYSIWIG редактора есть две кнопки:

  • Background color – установка цвета фона фрагмента текста
  • Foreground color – установка цвета фрагмента текста

    При этом подбор цвета осуществляется с помощью окна выбора цвета:

  • Установка параметров шрифта

    Редактор позволяет установить гарнитуру и размер шрифта с помощю выпадающих списков, находящихся в меню WYSIWIG редактора.

    Другой способ задать эти параметры - нажать на кнопку Font в меню WYSIWIG редактора и подобрать нужный фонт с помощью удобного окна:

    Примечание: не рекомендуется выбирать экзотические шрифты, так как их может не оказаться на компьютере пользователя, который будет просматривать сделанную вами страницу и она будет выглядеть искаженной.

    Стили

    Редактор позволяет устанавливать стили для фрагментов текста; это происходит посредством списка стилей в меню WYSIWIG редактора.

    Обратите внимание на то, что наряду со стандартными стилями, редактор поддерживает также стили, созданные дизайнером вашего сайта и подгружаемые из внешних CSS файлов, .