Инструкция объясняет, как использовать функцию Bookmark в редакторе CKEditor для создания якорей (внутренних ссылок) внутри страницы. Руководство показывает, как добавлять закладки, создавать ссылки на них и организовывать удобную навигацию в длинных статьях, при создании и написании собственных инструкций и документации.
Кнопка Bookmark в редакторе CKEditor
Назначение, принцип работы и практическое руководство
Оглавление
Введение
Функция CKEditor Bookmark предназначена для создания внутренних якорей (anchors) внутри текста документа. Якорь — это специальная точка в тексте, на которую можно создать ссылку и быстро перейти к нужному месту страницы.
Такая возможность широко используется:
- в длинных статьях
- в документации
- в инструкциях
- в FAQ
- в оглавлениях
- в учебных материалах
С помощью Bookmark можно организовать навигацию внутри одной страницы, позволяя пользователю переходить к нужным разделам без прокрутки.
Назначение функции Bookmark
Кнопка Bookmark создаёт якорную метку в выбранном месте текста. После создания этой метки можно:
- создать ссылку, ведущую на неё
- использовать её в оглавлении
- ссылаться на неё с других страниц
Фактически редактор создаёт HTML-элемент с уникальным id.
Пример HTML, создаваемого редактором:
<h2 id="installation">Installation</h2>
или
<span id="example-anchor"></span>
Теперь можно создать ссылку:
<a href="en/usersblog/bookmark-ckeditor-rukovodstvo#installation">Go to installation section</a>
При нажатии на такую ссылку браузер прокрутит страницу к нужному месту.
Когда используется Bookmark
Функция особенно полезна для:
1. Создания оглавления
В начале статьи можно создать список разделов:
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#install">Installation</a></li>
<li><a href="#usage">Usage</a></li>
</ul>
2. Длинных инструкций
- Установка
- Настройка
- Использование
- Решение проблем
3. FAQ и справочных разделов
Можно создать список вопросов в начале страницы и ссылки на ответы ниже.
Как пользоваться кнопкой Bookmark
Шаг 1. Определить место для якоря
Выберите место в тексте, куда должен вести переход.
- заголовок раздела
- начало блока
- важная часть текста
Шаг 2. Установить курсор
- в начале строки
- перед заголовком
- или выделите слово
Шаг 3. Нажать кнопку Bookmark
Нажмите кнопку bookmark в панели инструментов редактора.
Откроется окно создания якоря.
Шаг 4. Ввести имя якоря
В поле Bookmark name нужно ввести уникальное имя.
installation
section-install
- использовать латинские буквы
- не использовать пробелы
- можно использовать дефисы
intro
install
usage
faq
api-reference
chapter-1
Шаг 5. Сохранить якорь
Нажмите OK. Редактор создаст невидимый якорь в тексте.
Как создать ссылку на Bookmark
После создания якоря можно сделать ссылку.
Шаг 1. Выделить текст ссылки
Пример: Go to installation
Шаг 2. Нажать кнопку Link
Нажмите кнопку link.
Шаг 3. Указать адрес
Введите ссылку:
#installation
Знак # означает ссылку на якорь внутри страницы.
Шаг 4. Сохранить ссылку
После сохранения ссылка будет вести к нужному разделу.
Практический пример
Исходная статья
Introduction
Installation
Usage
Шаг 1. Добавляем якоря
Introduction → bookmark: intro
Installation → bookmark: install
Usage → bookmark: usage
Шаг 2. Создаём оглавление
<h2>Contents</h2>
<ul>
<li><a href="#intro">Introduction</a></li>
<li><a href="#install">Installation</a></li>
<li><a href="#usage">Usage</a></li>
</ul>
Результат
При клике на ссылки пользователь автоматически перейдёт к нужному разделу страницы.
Использование Bookmark между страницами
Якорь можно использовать и из другой страницы.
https://site.com/article#installation
При открытии страницы браузер сразу прокрутит её к разделу installation.
Как выглядит Bookmark в HTML
<h2 id="install">Installation</h2>
или
<span id="install"></span>
Рекомендации по использованию
Используйте короткие имена
install
intro
faq
Плохо:
this-is-the-installation-section-of-the-article
Используйте уникальные имена
#install
#install
Это может вызвать ошибки навигации.
Используйте логическую структуру
intro
install
config
usage
faq
Типичные ошибки
Использование пробелов
installation section
Правильно:
installation-section
Дублирование имён
intro
intro
Использование кириллицы
Лучше избегать:
установка
Предпочтительно:
installation
Когда Bookmark не нужен
- статья короткая
- нет внутренней навигации
- нет оглавления
Заключение
Функция Bookmark в CKEditor позволяет создавать внутренние якорные точки внутри документа. Это простой, но мощный инструмент для организации навигации в длинных текстах.
- технической документации
- учебных материалов
- длинных инструкций
- справочных разделов
- страниц FAQ
Правильное использование якорей значительно улучшает удобство чтения и навигации по материалу.
Владельцам сайтов на Cotonti
почему у обычных пользователей HTML Purifier «вырезает» id из текстов, а у админов всё работает.
1️⃣ Проблема в настройках Attr.EnableID
В пресете для обычных пользователей:
'Attr.EnableID' => нет,
То есть id вообще не разрешён. HTML Purifier при такой конфигурации автоматически удаляет все атрибуты id, чтобы не допустить потенциально опасные якоря или скрипты.
В пресете для администраторов:
'Attr.EnableID' => true,
Здесь id разрешён, поэтому ваши якоря, <h2 id="..."> и т.п., проходят через фильтр без изменений.
2️⃣ Разница в доверии к вводу
'HTML.Trusted' => false,
Фильтр строгий, запрещает даже потенциально безопасные, но необычные атрибуты.
'HTML.Trusted' => true,
Фильтр допускает больше тегов и атрибутов, включая <span id="">, <h2 id=""> и т.д.
3️⃣ Как исправить для обычных пользователей
Если хотите, чтобы обычные пользователи могли использовать якоря, нужно включить разрешение id:
'Attr.EnableID' => true,
Возможно, при этом стоит оставить HTML.Trusted => false, чтобы не давать им доступ к <script> и другим опасным вещам.
Например, минимально безопасная настройка:
'Attr.EnableID' => true,
'HTML.Trusted' => false,
'HTML.ForbiddenElements' => ['script'],
Так они смогут создавать якоря и ссылки на них, но не смогут вставлять JS.
Пресет обычных пользователей лежит в
/plugins/htmlpurifier/presets/htmlpurifier.default.preset.php
Пресет Администратора
/plugins/htmlpurifier/presets/htmlpurifier.group_5.preset.php
еще может кому пригодиться, фикс, если через одну, чередованием сбрасывается
<script>
document.addEventListener('DOMContentLoaded', function() {
const path = window.location.pathname.replace(/^\//, ''); // текущий путь без начального слеша
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.href = path + link.getAttribute('href');
});
});
</script>
