Используете ли вы HTML-редакторы WYSIWYG в своих проектах? Эти удобные инструменты становятся все более популярными среди веб-разработчиков и создателей контента, предлагая интуитивно понятный интерфейс для создания веб-контента без необходимости углубляться в необработанный HTML-код. Несмотря на то, что эти редакторы мощны сразу после установки, их истинный потенциал часто раскрывается посредством настройки.

Основные выводы

• Вы можете добавлять новые функции в HTML-редакторы WYSIWYG

• Пользовательские кнопки помогают пользователям легко форматировать контент

• Изменение внешнего вида редактора может соответствовать стилю вашего сайта

Зачем менять HTML-редакторы WYSIWYG?

Изменив HTML-редактор WYSIWYG, вы сможете:

1. Добавьте функции, необходимые вашему проекту

2. Облегчите использование пользователями

3. Сохраняйте одинаковое форматирование на своем сайте

Теперь давайте посмотрим, как это можно сделать на реальном примере.

Добавление удобной кнопки выделения

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

Затем мы можем добавить новую кнопку:

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

Этот код выполняет несколько функций:

1. Он создает новую иконку для нашей кнопки

2. Он сообщает редактору, что делать, когда кто-то нажимает кнопку

3. На панель инструментов добавляется наша новая кнопка

Чтобы выделенный текст выглядел красиво, добавим стиль:

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

Чтобы редактор выглядел хорошо

Вы также можете изменить внешний вид редактора. Вот простой способ сделать это:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

Это изменение влияет на несколько вещей:

• Настраивает кнопки для разных размеров экрана

• Добавляется текст, показывающий, куда вводить

• Отключает счетчик символов

• Панель инструментов перемещается вместе со страницей

• Используется готовая тема

Советы по изменению HTML-редакторов WYSIWYG

При смене этих редакторов имейте в виду следующие советы:

1. Начните с малого: сначала внесите небольшие изменения, прежде чем пробовать большие.

2. Используйте то, что есть: используйте встроенные инструменты редактора, когда можете.

3. Проверьте много: убедитесь, что ваши изменения работают в разных браузерах.

4. Думайте о скорости: Большие изменения могут замедлить процесс, поэтому тестируйте с большим количеством контента.

5. Будьте в курсе событий: следите за новыми функциями, которые могут вам помочь.

Использование измененных редакторов в разных платформах

Эти измененные редакторы можно использовать во многих веб-фреймворках. Вот как вы можете использовать наш изменённый редактор в React:

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

Этот компонент React оборачивает наш измененный редактор, что упрощает его использование в вашем приложении React.

Подведение итогов

Редакторы HTML WYSIWYG — отличные инструменты для создания контента. Более того, когда вы меняете их под свои нужды, они становятся еще лучше. Добавляя новые кнопки, изменяя их внешний вид и вписывая их в свой проект, вы можете создать идеальный инструмент для редактирования.

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

Итак, попробуйте! Измените свой HTML-редактор WYSIWYG и посмотрите, насколько он станет удобнее для ваших пользователей.

Этот пост первоначально был опубликован в блоге Фроалы.