Данный плагин предоставляет визуальный интерфейс вставки более 3500 иконок размером 16х16 в формате .png из окна редактора страницы. Этот плагин добавляет дополнительную кнопку в редактор страниц. С помощью этой кнопки можно выбирать иконки в визуальном интерфейсе. Плагин работает с папкой менеджера загрузок ./data, что не нагружает сервер подменой кода в шаблона Lexer¹⁾

Этот плагин был разработан VladPolskiy.

• Релиз: 2025-01-12.
• Репозиторий:https://book51.ru/lib/exe/fetch.php?media=wiki:plugin:myicon.zip
• Совместимость с «Докувики»: 2024-02-06 «Kaos»
• myicon.zip

• 2024-02-06 «Kaos» да
• 2023-04-04 «Jack Jackrum» да
• 2022-07-31 «Igor» да
• 2020-07-29 «Hogfather» да

Используйте менеджер плагинов для установки или…

1. скачать zip-файл 2. распаковать его в <dokuwiki>/lib/plugins/

Дополнительные внешние требования: Для этого плагина требуются следующие дополнительные компоненты, которые необходимо установить отдельно:

• в папке ./data/media необходимо создать директорию с именем 16 для хранения иконок 16х16

• распокавать архив myicon.zip и из папки 16 все файлы иконок копировать! в папку ./data/media/16 вашего сайта Dokuwiki

Этой копированием мы получим набор иконок в менеджере медиафайлов Dokuwiki

Посмотрите на плагин в действии здесьздесь. На странице-образце показаны все доступные на сегодня иконки в размере 16х16 в плагине.

Откроем окно редактора страниц и выбирем кнопку Мои иконки (My Icons) В открывшемся окне выбора иконок выбираем и нажимаем на понравившуюся картинку иконки Получаем сообщение браузера о том, что код вставки иконки скапирован в буфер обмена и закрываем окно выбора иконок В редакторе страниц вставляем код с помощью мышки или сочетанием клавиш CTRL+V При сохранении страницы видим нашу иконку

Простой синтаксис использования:

{{:icons:16:auction-hammer--plus.png?|auction-hammer--plus.png.}}
где:
":icons" - начальная папка хранения иконок в менеджере ./data
":16" - папка размера иконок 16х16
":auction-hammer--plus.png?" - имя и расширение изображения иконки
"auction-hammer--plus.png." - всплывающий текст при навидении курсора на иконку

Некоторые более сложные варианты использования:

/*Пример обычной вставки в тексте*/
{{:icons:16:address-book-open.png?|address-book-open.png.}} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. {{:icons:16:balloon-left.png?|balloon-left.png.}} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.{{:icons:16:tick.png?|tick.png.}} Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

/*Пример измененной всплывающей подсказки при наведении курсора*/
{{:icons:16:address-book-open.png?|Прочитайте статью внимательно}}

/*Пример измененния размера иконки*/
{{:icons:16:address-book-open.png?12|address-book-open.png.}}
{{:icons:16:address-book-open.png?24|address-book-open.png.}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

/*Пример добавления иконки ко внутренней ссылки*/
Посмотрите {{:icons:16:address-book-open.png?|просмотреть плагин блог}}[[wiki:plugin:blog|перейти на странице плагина]]

Посмотрите перейти на странице плагина

/*Пример иконки - внешней ссылки*/
[[http://example.com|{{:icons:16:address-book-open.png?|http://example.com}}]]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ПРИМЕЧАНИЕ для пакета значков флагов: по умолчанию используются флаги из плагина перевода присутствующего в вашей установке DokuWiki..

Демонстрация и примеры доступны по адресу http://www.lotar.altervista.org/dokuwiki/wiki/plugin/icons.

Первый шаг, скачайте пакет Font Awesome и создайте в вашей установке DokuWiki каталог (например, assets/font-awesome) и поместите все файлы. Следующий шаг в Configuration Manager, установите loadFontAwesome и введите url вашего локального пакета font awesome в fontAwesomeURL (например, /dokuwiki/assets/font-awesome/css/font-awesome.min.css).

Это происходит потому, что скрипт, который использует jQuery в /lib/plugins/icons/exe/popup.php, вызывает jQuery до загрузки jQuery. Весь jQuery встроен с тегом defer, поэтому и возникает эта ошибка.

безопасное решение:

1. сделайте резервную копию popup.php
2. скопируйте скрипт, который находится внутри popup.php (скрипт для справки находится внизу этого комментария)
3. создайте файл popup_script.js в том же каталоге и вставьте в него этот скопированный скрипт
4. удалите этот скрипт из popup.php.
5. на место удаленного скрипта вставте скрипт следующего вида <script src=«/lib/plugins/icons/exe/popup_script.js» defer=«defer»></script>
6. и сохраните.

примечание: браузер игнорирует, defer если <script> не имеет src директивы. Вот о чем эта суета. Скрипт для вставки в popup.php:

<script src="/lib/plugins/icons/exe/popup_script.js" defer="defer"></script>

перезагрузите страницу, вызовите всплывающее меню, теперь все работает.

Скрипт для справки:

popup_script.js

jQuery(document).ready(function() {
 
      var is_bootstrap = (typeof jQuery.fn.modal !== "undefined");
 
      var $icon_pack    = jQuery('#icon_pack'),
          $icon_name    = jQuery('#icon_name'),
          $icon_size    = jQuery('#icon_size'),
          $icon_align   = jQuery('#icon_align'),
          $output       = jQuery('#output'),
          $preview      = jQuery('#preview');
 
      if (! is_bootstrap) {
        jQuery('.tab-pane').hide();
      }
 
      jQuery('button[data-icon-size]').on('click', function() {
 
        jQuery('button[data-icon-size]').removeClass('active');
        jQuery(this).addClass('active');
 
        $icon_size.val(jQuery(this).data('icon-size'));
        jQuery(document).trigger('popup:build');
 
      });
 
      jQuery('button[data-icon-align]').on('click', function() {
 
        jQuery('button[data-icon-align]').removeClass('active');
        jQuery(this).addClass('active');
 
        $icon_align.val(jQuery(this).data('icon-align'));
        jQuery(document).trigger('popup:build');
 
      });
 
      jQuery('ul.nav a').on('click', function() {
 
        if (! is_bootstrap) {
          jQuery('.tab-pane').hide();
          jQuery('ul.nav li.active').removeClass('active');
          jQuery(jQuery(this).attr('href')).show();
          jQuery(this).parent().addClass('active');
        }
 
        $icon_pack.val(jQuery(this).data('pack'));
        jQuery('.preview-box').removeClass('hide');
 
        jQuery(document).trigger('popup:reset');
 
      });
 
      jQuery('.btn-icon').on('click', function() {
        $icon_name.val(jQuery(this).data('icon-name'));
        jQuery(document).trigger('popup:build');
      });
 
      jQuery(document).on('popup:build', function() {
 
        var icon_pack  = $icon_pack.val(),
            icon_size  = $icon_size.val(),
            icon_align = $icon_align.val(),
            icon_name  = $icon_name.val();
 
        if (! icon_name) {
          return false;
        }
 
        var syntax = [ '{{' ];
 
        syntax.push(icon_pack);
        syntax.push('>' + icon_name);
 
        var icon_size_pixel = 0;
 
        switch (icon_size) {
          case 'small':
            icon_size_pixel = 24;
            break;
          case 'medium':
            icon_size_pixel = 32;
            break;
          case 'large':
            icon_size_pixel = 48;
            break;
        }
 
        if (icon_size_pixel) {
          syntax.push('?' + icon_size_pixel);
        }
 
        if (icon_align) {
          syntax.push('&align=' + icon_align);
        }
 
        syntax.push('}}');
 
        $output.val(syntax.join(''));
        $preview.text(syntax.join(''));
 
      });
 
      jQuery('#btn-reset').on('click', function() {
        jQuery(document).trigger('popup:reset');
      });
 
      jQuery(document).on('popup:reset', function() {
        jQuery('form').each(function(){
          jQuery(this)[0].reset();
        });
        $output.val('');
        $preview.text('');
      });
 
      jQuery('#btn-preview, #btn-insert').on('click', function() {
 
        if (jQuery(this).attr('id') === 'btn-insert') {
          opener.insertAtCarret('wiki__text', $output.val());
          opener.focus();
        }
 
      });
 
    });

Ссылка на решение проблеммы на форуме wiki

• загрузить измененный popup.php и файл popup_script.js
• распакуйте в папку /lib/plugins/icons/exe/ с заменой файлов.

jasonwch модифицировал этот плагин для поддержки последнего набора иконок Fontawesome 6.71.

P.S. Этот ZIP-архив содержит ТОЛЬКО измененные/добавленные файлы. ОБЯЗАТЕЛЬНО установите оригинальный плагин, а затем замените/добавьте эти файлы. dw_icons_fa6.zip

Что изменено в модифицированной версии:

• заменен набор иконок на Fontawesome 6.71. Поскольку 6.71 отделил иконки брендов, для таких иконок есть дополнительная вкладка/префикс
• (должно быть) совместимым с уже добавленными значками FA из предыдущей версии, поэтому старые страницы не нужно обновлять вручную
• добавить дополнительную вкладку руководства во всплывающем окне для более удобного использования тегов
• В сочетании с исправлением js defer, оригинальный скрипт расширения должен отключить defer JS со страницы конфигурации для работы. Из issue#26, «inbsp» предоставил исправление для разделения JS, чтобы исправить эту ошибку. Однако, когда всплывающее окно появляется, вам все равно нужно переключить страницу один раз, чтобы отобразить значки.

Техническое примечание:

1. Я использовал Node.js для извлечения нового имени значка в виде списка для замены оригинального list-font-awesome.php ( https://github.com/mackilroy007/font-awesome-v6 )

1. добавлены строки комментариев в измененных файлах, чтобы вам было легче проверить, какая строка была изменена.

Ссылка на оригинальный текст icons_plugens_new.rar

Для обновления удалите исходную папку lib/plugins/icons и установите новую версию, как указано выше.

• Плагин иконок icons

FortAwesome/Шрифт-Awesome Выпуск 6.7.2

• Fontawesome-free-6.7.2-desktop.zip
• Fontawesome-free-6.7.2-web.zip
• Исходный код (zip)
• Исходный код (tar.gz)
• https://github.com/FortAwesome/Font-Awesome/releases/tag/6.7.2

• Author: Giuseppe Di Terlizzi
• License: GNU GPL v2