Каким образом можно создать якоря в вики?

Как сгенерировать список кликабельных якорей с помощью JavaScript для сайта, разделенного на 2 блока (вертикальных), где слева находятся якоря, а справа - сама статья, при использовании редактора TinyMCE для написания статьи и возможности добавления якорей?
  • 6 августа 2023 г. 7:17
Ответы на вопрос 3
Для генерации якорей на странице вики можно использовать JavaScript. Вот пример реализации с использованием jQuery:

1. Вставьте следующий код в ваш файл HTML, где отображается статья и редактор TinyMCE:

```html
<div class="anchors">
  <div class="anchors__list">
    <!-- Здесь будут отображаться якори -->
  </div>
  <div class="anchors__content">
    <!-- Здесь будет отображаться контент статьи -->
  </div>
</div>
```

2. Добавьте следующий код JavaScript после подключения jQuery:

```javascript
// Ожидаем загрузку страницы
$(document).ready(function() {
  // Получаем содержимое статьи
  var content = tinymce.activeEditor.getContent();

  // Парсим содержимое статьи с помощью jQuery
  var $content = $(content);

  // Создаем список якорей
  var anchors = [];
  $content.find(':header').each(function() {
    var headingText = $(this).text();
    var anchorId = headingText.toLowerCase().replace(/\s+/g, '-');
    
    // Создаем якорь с ссылкой на соответствующий заголовок
    var anchor = '<a href="#' + anchorId + '">' + headingText + '</a>';
    anchors.push(anchor);

    // Добавляем атрибут ID к заголовку соответствующему якорю
    $(this).attr('id', anchorId);
  });

  // Выводим список якорей
  $('.anchors__list').html(anchors.join('<br>'));

  // Выводим содержимое статьи
  $('.anchors__content').html(content);
});
```

3. Чтобы использовать эту функциональность в TinyMCE, убедитесь, что TinyMCE подключен на странице и инициализируйте его с помощью следующего кода:

```javascript
tinymce.init({
  selector: 'textarea',
  // Другие настройки плагина
});
```

Теперь статья в редакторе TinyMCE будет разделена на две колонки, слева будет отображаться список кликабельных якорей, а справа - сама статья с заголовками, которые являются якорями.

Обратите внимание, что вы должны подключить jQuery и библиотеку TinyMCE на вашу страницу, прежде чем использовать вышеуказанный код.
[href, text]
Переберите все ссылки на странице и для каждой ссылки выполните следующие действия:
1. Получите атрибут `href` ссылки и сохраните его в переменную `href`.
2. Если `href` начинается с текущего URL-адреса страницы, удалите текущий URL-адрес из `href`.
3. Если `href` начинается с пути текущего URL-адреса страницы, удалите путь текущего URL-адреса из `href`.
4. Если `href` не равно `#` и начинается с символа `#`, добавьте объект с свойствами `href` (измененный `href`) и `text` (текст ссылки) в массив `anchors`.

console.log(anchors);
Похожие вопросы