Где скачать Kunena форум. Официальный сайт Kunena.
Где скачать Kunena Discuss. Официальный сайт Kunena.
Как сменить кодировку в Блокноте по умолчанию с ANSI на другую
Как войти в Instagram с телефона или планшета
Как сменить кодировку текстового файла с помощью Блокнота в Windows
Как получить HTML-код для вставки на сайт видео с YouTube
Создание HTML-файла в Блокноте (Notepad)
Где находится файл index.php шаблона сайта на Joomla
ArrowArrow
ArrowArrow
ArrowArrow
ArrowArrow
ArrowArrow
Slider

Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Как добавить пример кода в статью с помощью Визуального редактора TinyMCE на примере Joomla 3

В последних версиях Joomla в редакторе TinyMCE появилась встроенная возможность вставки размеченного кода непосредственно в публикацию. В этой статье подробно рассмотрим поэтапно, как вставить код в статью на сайте с помощью встроенного визуального редактора TinyMCE, как это выглядит в виде HTML-кода, как выглядит в окне самого редактора TinyMCE и как в конечном счёте это отображается на сайте для пользователей.



Как выглядит кнопка вставки кода в кнопках-иконках встроенного визуального редактора TinyMCE

Сразу хочу привести внешний вид кнопки вставки кода в кнопках-иконках встроенного визуального редактора TinyMCE. Выглядит она так:

кнопка вставки кода в кнопках-иконках встроенного визуального редактора TinyMCE

Как вставить код в статью с помощью Визуального редактора TinyMCE на примере Joomla 3

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

После этого нужно кликнуть левой кнопкой мышки по кнопке вставки кода:

кликнуть левой кнопкой мышки по кнопке вставки кода

Описанное выше действие откроет новое окно «Добавить/Изменить пример кода» в котором будет два поля. Верхнее поле «Язык» выполнено в виде выпадающего списка из которого можно выбрать тот язык, код которого будет вставлен в статью на сайт:

  • HTML/XML
  • JavaScript
  • CSS
  • PHP
  • Ruby
  • Pyton
  • Java
  • C
  • C#
  • C++

Поле «Язык» в окне «Добавить/Изменить пример кода» выглядит так:

Поле «Язык» в окне «Добавить/Изменить пример кода»

После выбора языка нужно вписать или вставить скопированный кусок кода в текстовое поле и нажать кнопку «Ok» внизу окна:

вписать или вставить скопированный кусок кода в текстовое поле и нажать кнопку «Ok»

Окно «Добавить/Изменить пример кода» автоматически закроется, а в выбранном месте в окне редактора TinyMCE появится вставленный фрагмент кода:

в выбранном месте в окне редактора TinyMCE появится вставленный фрагмент кода

Если посмотреть в исходный HTML-код документа, то можно увидеть, что вставленный фрагмент кода обрамлён двумя тегами:

<pre class="language-markup">
 <code>
  тут собственно вставленный код
 </code>
</pre>

В окне с выключенным редактором это выглядит так:

вставленный фрагмент кода обрамлён двумя тегами

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

После сохранения статьи, код вставляется согласно правилам CSS, описанных в соответствующих файлах + все строчки пронумерованы. И выглядит это примерно так:

все открывающие и закрывающие скобки тегов автоматически заменены спец.символами HTML

Таким вот образом, используя кнопку «Добавить/Изменить пример кода» в Визуальном редакторе TinyMCE очень просто вставлять код прямо в статью.

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )