Разное

Html editor: Real-time document collaboration — WYSIWYG editor

02.10.2023

HTML-редактор | Дополнительные инструменты | Инструменты | Desire2Learn | Технология | Учебные пособия | Teaching Commons

Academic Resources

  • Academic Calendar
  • Academic Success
  • BlueStar
  • Campus Connect
  • DePaul Central
  • Desire2Learn (D2L)
  • BlueM@il (электронная почта)
  • Университетский каталог
  • Библиотека

Ресурсы кампуса

  • Безопасность кампуса
  • Книжный магазин
  • Карты кампуса
  • События

Ресурсы университета

  • Справочник
  • Легкая атлетика
  • Работа
  • Сайты A-Z
    • 9000 5 Служба технической поддержки

Информация для

  • Выпускники и друзья
  • Текущие студенты
  • Преподаватели и сотрудники

Университет ДеПоля Университет ДеПоляTeaching CommonsTeaching Commons

Ярлыки ДеПоля

Teaching Commons > Учебные руководства > Технология > Desire2Learn >

Инструменты > Дополнительные инструменты > Редактор HTML

Редактор HTML — это текстовое поле, которое позволяет пользователям редактировать текст и вставлять такие элементы, как изображения, видео и таблицы. Редактор HTML в D2L появляется в D2L в ряде инструментов:

  • . Создание или редактирование страниц в контенте
  • Отправка писем из Classlist
  • Создание и редактирование новостей
  • Создание и редактирование виджетов из курса Home

В дополнение к перечисленным выше элементам редактор HTML появляется при добавлении инструкций в папки отправки, викторины, темы и форумы для обсуждения.

Редактор HTML можно использовать следующими способами:

  • Вставить ссылки на внешний контент
  • Вставьте ссылки на другие разделы курса
  • Изменить или удалить ссылки
  • Встраивайте контент с кодом встраивания
  • Вставка изображений
  • Вставить аудиофайлы
  • Использовать заголовки текста
  • Введите код

При использовании редактора HTML важно проверить доступность, чтобы убедиться, что содержимое доступно для всех учащихся. См. раздел о Использование средства проверки читаемости для получения дополнительной информации.

В редакторе HTML есть два типа быстрых ссылок: внешние ссылки на веб-сайты за пределами курса D2L и относительные ссылки на другие части сайта курса D2L.

Вставка ссылки на внешний веб-сайт

  1. Выберите место для ссылки в текстовом поле HTML.
  2. Выберите значок Вставить быструю ссылку [A].
  3. Откроется всплывающее окно. Выбирать URL из списка.
  4. Введите ссылку в поле «URL».
  5. Введите текст, который будет отображаться в поле «Заголовок».
  6. Выберите способ открытия ссылки. Чтобы курс был доступен для всех пользователей, лучше всего выбрать «Тот же кадр».
  7. Выбрать Вставка .

Вставка ссылки на элемент на сайте курса

  1. Выберите место для ссылки в текстовом поле.
  2. Выберите Вставить быструю ссылку 9Значок 0113.
  3. Выберите тип действия из вариантов в списке.
  • Выберите Представления , чтобы выбрать папку из списка существующих папок.
  • Выбрать Обсуждения  для выбора форума, затем выберите тему из списка существующих тем.
  • Выбрать
    Новости     , чтобы выбрать новость из списка существующих.
  • Выбрать Группы самостоятельной регистрации , чтобы выбрать группу, в которую учащиеся могут зарегистрироваться, из списка существующих категорий групп самостоятельной регистрации.

Изменить или удалить ссылку

  1. Выберите ссылка в редакторе HTML [A].
  2. Появится контекстное меню. Выберите значок карандаша [B] для редактирования ссылки или ее названия.
  3. Выберите Значок разорванной цепи [C], чтобы удалить ссылку.

Вставить изображение

Используйте функцию «Вставить изображение», чтобы добавить изображения в текстовое поле.

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

  1. Выберите, где разместить изображение в текстовом поле HTML.
  2. Выберите Вставить изображение кнопка [A].
  3. Выберите расположение образа:
    • Если изображение находится на компьютере,       выберите Кнопка «Загрузить «. Выберите файл на компьютере, затем выберите Добавить .
    • Если изображение находится в Интернете, выберите  URL-адрес . Введите или вставьте веб-адрес изображения, затем выберите Добавить кнопку .
  4. Чтобы убедиться, что изображение доступно для всех пользователей, введите описательный текст для вашего изображения. Выбирайте «Это изображение является декоративным» только в том случае, если изображение не содержит ценной для учащегося информации.
  5. Выберите  ОК.

Вставить аудиофайл

  1. Выберите вставить значок материала [A].
  2. Выберите  Мой компьютер .
  3. Выбрать Выберите «Файл », чтобы выбрать аудиофайл.

    4. Примечание. При выборе аудиофайла .m4a звук будет воспроизводиться автоматически при открытии вопроса. Чтобы избежать возможных проблем с одновременным воспроизведением нескольких аудиофайлов, файл можно преобразовать в формат .mp3.

  4. Выбрать
    Откройте     , чтобы добавить файл.
  5. Выбрать Загрузить .

Добавить заголовки

  1. Выделите текст для форматирования.
  2. Выберите стрелка раскрывающегося списка рядом с пунктом «Абзац», затем выберите стиль заголовка, который нужно применить. Текст будет изменен на этот стиль заголовка.

Примечание. Если раскрывающееся меню «Абзац» не отображается сразу на ленте параметров, выберите … для отображения всех его кнопок.

Вставьте код

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

Примечание. Параметр «Вставить код» недоступен в инструменте «Опросы».

  1. В редакторе HTML выберите плюс .
  2. Выбрать Вставьте код .
  3. Откроется редактор разметки. Выберите язык разметки [A].
  4. (Необязательно) Выберите
    значок луны     для переключения редактора в темный режим [B].
  5. Добавьте или вставьте код в редактор.
  6. По завершении выберите галочка [C].
  7. Чтобы снова отредактировать код, выберите внутри редактор разметки .

Внедрение контента с кодом встраивания

Эти инструкции предназначены для встраивания видео, размещенного на внешнем веб-сайте, таком как YouTube или Ooyala. Эту процедуру также можно использовать для встраивания другого контента в D2L, например каналов Twitter и календарей, если сайт предоставляет безопасный код для встраивания. Чтобы встроить локальный видеофайл, обратитесь к руководству Panopto.

  1. Скопируйте код для встраивания с хост-сайта.
  2. Выберите Вставка вещей 9Значок 0113 [А].
  3. Выберите  Введите код для встраивания .
  4. Вставьте скопированный код для встраивания.
  5. Выберите Кнопка «Далее» .
  6. Выберите Вставить кнопку .

Примечание. Код для встраивания — это HTML-код, который можно добавить на сайт курса для отображения контента, хранящегося на внешнем веб-сайте. Код для встраивания будет расположен в разных местах в зависимости от того, на каком веб-сайте размещается контент.

Проверить доступность

Редактор HTML в D2L имеет инструмент проверки доступности, который может помочь определить, доступно ли введенное содержимое. Средство проверки читаемости ищет потенциальные проблемы с размером шрифта, цветами, списками и другими параметрами форматирования.

  1. Перейдите к инструменту с редактором HTML.
  2. Откройте редактор HTML, выбрав Изменить существующий элемент или тему или создать новую.
  3. Введите или отредактируйте содержимое в текстовом поле редактора HTML.
  4. При изменении цвета шрифта проверьте доступность, найдя зеленую галочку или красный крестик [A].
  5. После ввода или редактирования текста выберите многоточие [A].
  6. Затем выберите глаз со значком галочки [B].
  7. Средство проверки доступности укажет, есть ли проблемы с доступностью или доступно ли содержимое [C].
  8. Если содержимое помечено как проблема с доступностью, внесите любые изменения, а затем проверьте еще раз.

HTML-редактор платформы NetBeans

Это руководство нуждается в проверке. Вы можете отредактировать его в GitHub следуя этим рекомендациям по взносам.
  • Создание скелетного приложения
  • Распространение приложения
    • Распространение приложения через ZIP-файл
    • Распространение редактора HTML через общий стартовый веб-репозиторий NetBeans
  • См. также

В этом учебном пособии представлено очень простое и быстрое введение в рабочий процесс платформы NetBeans путем создания простого HTML-редактора. Несмотря на простоту создания, редактор HTML, который вы создадите, будет зрелым приложением, поскольку он будет повторно использовать инфраструктуру, предоставляемую платформой NetBeans, а также несколько модулей из среды IDE NetBeans. Например, без какого-либо кодирования ваш HTML-редактор будет иметь зрелую оконную систему, которую он повторно использует с платформы NetBeans. Когда вы закончите работу с этим учебным пособием, у вас будет общее представление о том, как создавать, компоновать и запускать приложения на платформе NetBeans.

После завершения работы с этим учебным пособием вы можете перейти к учебному курсу платформы NetBeans. Учебный маршрут содержит исчерпывающие руководства, в которых рассказывается о широком спектре API-интерфейсов NetBeans для различных типов приложений. Если вы не хотите создавать приложение «Hello World», вы можете пропустить это руководство и сразу перейти к учебному маршруту.

Чтобы использовать тот же внешний вид в среде IDE NetBeans, что и в этом руководстве, установите Darcula LAF для NetBeans.

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

В конце этого руководства у вас будет HTML-редактор, который выглядит следующим образом:

Хотя это очень простое демонстрационное приложение, это не игрушка! Это настоящая программа , которая поддерживает простое редактирование HTML-страниц с такими функциями, как завершение кода, проверка и предопределенные фрагменты HTML.

Редактор HTML, который вы создаете в этом руководстве, представляет собой многофункциональное клиентское приложение, созданное «поверх платформы NetBeans». Это означает, что ядро ​​IDE, которым является платформа NetBeans 9,0194 это , будет основой вашего приложения. Поверх платформы NetBeans вы добавляете модули, которые вам нужны, и исключаете те, которые нужны IDE, но не нужны вашему приложению. Здесь вы видите некоторые модули IDE, добавленные к платформе NetBeans, которая является ее основой:

Создание этого HTML-редактора означает создание каркаса приложения, исключение модулей и элементов пользовательского интерфейса, которые вам не нужны, а затем настройку NetBeans. Окно «Избранное» IDE как окно, которое открывается по умолчанию при запуске IDE. Окно «Избранное» будет переименовано и станет браузером для HTML-документов. Все эти действия поддерживаются элементами пользовательского интерфейса в среде IDE, как вы узнаете из этого руководства.

Вы сами убедитесь, насколько просто и легко построить, или, если быть более точным, собрать полнофункциональное приложение поверх платформы NetBeans. В конце вам будет показано, как сделать конечный продукт легко загружаемым и запускаемым с помощью WebStart.

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

Создание каркасного приложения

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

  1. С помощью мастера создания проекта (Ctrl-Shift-N) создайте проект приложения платформы NetBeans из шаблона в категории «Модули NetBeans», как показано ниже:

  1. Нажмите «Далее» и назовите проект приложения платформы NetBeans «NetBeansHTMLEditor»:

    .

Нажмите Готово. Скелет приложения создан:

Щелкните приложение правой кнопкой мыши и выберите «Выполнить». Приложение запускается и выглядит следующим образом:

Закройте приложение.

  1. Мы начнем с использования IDE для брендирования нашего приложения. Щелкните правой кнопкой мыши узел проекта, выберите «Фирменная символика», а затем внесите несколько изменений в редакторе фирменной символики:

    • На основной панели убедитесь, что вам нравится название приложения для строки заголовка, а также значки, как показано ниже:

  • Обратите внимание, что на панели «Экран-заставка» можно указать экран-заставку приложения и брендинг индикатора выполнения, как показано ниже:

Если у вас нет заставки, используйте ее

.

1. Теперь, когда приложение было брендировано, давайте удостоверимся, что модули, которые нам нужны для нашего HTML-редактора, доступны для приложения. Щелкните правой кнопкой мыши узел проекта, выберите «Свойства», а затем перейдите на панель «Библиотеки» в диалоговом окне «Свойства проекта». Здесь вы видите список «кластеров». Кластер представляет собой набор связанных модулей и представляет собой папку в каталоге установки приложения. Единственные кластеры, которые необходимо выбрать, это, в первую очередь, платформа 9.0478 , который уже выбран, но разверните его и также выберите следующее:

  • Службы автоматического обновления Пользовательский интерфейс автоматического обновления — вместе эти два модуля обеспечивают диспетчер подключаемых модулей, так что пользователи вашего HTML-редактора смогут добавлять новые подключаемые модули во время выполнения приложения

    .

  • Избранное — предоставляет окно Избранное, которое вы будете использовать для открытия и создания новых файлов HTML позже

Затем отмените выбор следующих элементов в кластере «платформа», так как в этом сценарии они не понадобятся:

1. Затем разверните кластер ide и выберите большинство модулей HTML в кластере «ide»:

  • HTML

  • Редактор HTML

  • Библиотека редактора HTML

  • HTML Лексер

  • Анализатор HTML

  • Проверка HTML

Затем нажмите кнопку «Решить», и требуемые модули будут добавлены в набор модулей, необходимых модулям, которые вы уже выбрали как часть приложения.

  1. Также выберите в кластере ide следующее:

    • Lexer для моста NetBeans

    • Мост IDE для API синтаксического анализа

    • Реализация API проекта

    • Пользовательские утилиты

Нажмите кнопку «Решить», чтобы включить модули, необходимые для вышеуказанных модулей. Теперь у вас есть подмножество модулей NetBeans, относящихся к вашему редактору HTML. Нажмите «ОК», чтобы закрыть диалоговое окно «Свойства проекта».

  1. Щелкните приложение правой кнопкой мыши и запустите его. Выберите Файл | Откройте файл, а затем откройте несколько файлов HTML. Вы должны увидеть полнофункциональный HTML-редактор:

    .

Распространение приложения

Выберите один из двух подходов к распространению приложения. Если вы хотите сохранить как можно больший контроль над своим приложением, вы будете использовать веб-старт (JNLP) для распространения своего приложения через Интернет. В этом сценарии всякий раз, когда вы хотите обновить приложение, вы делаете это локально и сообщаете своим конечным пользователям об обновлении, которое будет автоматически доступно им в следующий раз, когда они запустят ваше приложение через Интернет. Либо распространяйте ZIP-файл, содержащий ваше приложение. После этого конечные пользователи будут иметь локально доступное полное приложение. Затем вы будете распространять обновления и новые функции с помощью механизма обновления, описанного ниже.

Распространение приложения через ZIP-файл

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

  1. Щелкните правой кнопкой мыши узел проекта приложения и выберите Упаковать как | ZIP-рассылка.

1. В папке dist (отображаемой в окне «Файлы», Ctrl-2) теперь вы сможете увидеть ZIP-файл, как показано ниже:

Панель запуска приложения создается в папке bin , как показано выше.

Распространение HTML-редактора через общий репозиторий NetBeans Web Start

Вместо распространения ZIP-файла давайте подготовимся к распространению через Webstart, настроив файл master.jnlp , который создается при первом запуске приложения через " JNLP | Беги". Несмотря на то, что он выполняет свою работу, он еще не готов к распространению. По крайней мере, вам нужно изменить информационный раздел, чтобы предоставить лучшие описания и значки.

Другим изменением стандартной инфраструктуры JNLP является использование общего репозитория JNLP на www.netbeans.org. По умолчанию приложение JNLP, созданное для пакета, всегда содержит все его модули, а также все модули, от которых оно зависит. Это может быть полезно для использования в интрасети, но немного менее практично для широкого использования в Интернете. В Интернете гораздо лучше, если все приложения, созданные на платформе NetBeans, ссылаются на один репозиторий модулей NetBeans, что означает, что такие модули являются общими и их не нужно загружать более одного раза.

Существует такой репозиторий для платформы NetBeans. Он не содержит всех модулей, которые есть в среде IDE NetBeans, но их достаточно, чтобы сделать возможным использование большинства приложений, отличных от IDE, таких как наш HTML-редактор. Чтобы использовать репозиторий, вам нужно только изменить platform.properties приложения , добавив правильный URL-адрес:

 # поделиться библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 81:
jnlp.platform.codebase=http://bits.netbeans.org/8.1/jnlp/

Аналогично для 8.0:

 # поделитесь библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 80:
jnlp.platform.codebase=http://bits.netbeans.org/8.0/jnlp/

Аналогично, для 7.4:

 # поделитесь библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 74:
jnlp. platform.codebase=http://bits.netbeans.org/7.4/jnlp/

Аналогично, для 7.3:

 # поделитесь библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 73:
jnlp.platform.codebase=http://bits.netbeans.org/7.3/jnlp/

Аналогично для 7.2:

 # поделитесь библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 72:
jnlp.platform.codebase=http://bits.netbeans.org/7.2/jnlp/

Аналогично, для 7.1:

 # поделитесь библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 71:
jnlp.platform.codebase=http://bits.netbeans.org/7.1/jnlp/

Аналогично, для 7.0:

 # поделитесь библиотеками из общего репозитория на netbeans.org
# этот URL предназначен для файлов JNLP версии 70:
jnlp.platform.codebase=http://bits.netbeans.org/7.0/jnlp/

Аналогично для 6.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *