pnirtep Jul 4 at 06:38

Как я встраивал wysiwyg редактор в свой django проект

Easy

3 min

1.5K

Tutorial

Разрабатывая сервис генерации AI курсов, я столкнулся с тем, что мне захотелось решить вопрос с удобным редактированием уроков. В моем сервисе есть два режима создания курсов - AI режим, это когда ты пишешь промпт или прикладываешь список тем, а нейросеть генерирует контент. Это подходит для самообучения. А второй режим для авторов - ты можешь взять свои наработки, скормить их вместе с промптом модели, а та выдаст результат. Так вот чтобы поделиться с другими юзерами таким курсом, хотелось бы иметь возможность отредактировать ответ модели, дополнить самому, да еще и оформить это все красиво, с заголовками, отступами, списками и прочими украшательствами.

Почитав разные статьи про то, какие есть редакторы, я остановился на TinyMCE.

Моя задача, на данный момент довольно таки простая, это просто встроенный текстовый редактор. Поэтому другие варианты я пока что откинул, по причине дополнительной сложности и нюансов при внедрении.

Я скачал self-hosted версию, положил это все в проект и в шаблоне урока добавил ссылку на библиотеку

{% load static %}

<script src="{% static 'creator/tinymce/tinymce.min.js' %}"></script>

Моя форма до этого уже содержала <textarea>, которая отображалась в виде предзаполненного поля, то есть я уже мог там редактировать ответ от нейросети. А далее у меня была отдельная кнопка "Сохранить финальную версию урока", которая отправляла это содержимое из поля снова в модель с запросом на html форматирование. Полученный формат со всеми тегами и стилями я сохранял в отдельное поле модели урока content_html, а далее на страницах уроков именно из него шел рендер оформленного контента.

Но такой способ приводил к 2 неприятностям:

Трата лишних токенов – отправить 3-4 тысячи символов еще раз туда-сюда, чтобы получить html-версию. Просить html-версию сразу не вариант - тогда юзер будет видеть кучу тегов среди самого контента.
Форматирование от нейросети могло быть не таким, как хотелось бы. Никак особо не повлиять, какой бы промпт не был, всех кейсов не предусмотришь. То отступы лишние, то <hr> напихает.

В итоге появление wysiwyg редактора решало эти проблемы - я с первого раза получал ответ от нейросети в HTML форматировании, редактор это сразу видел и позволял внести правки и сохранить итоговую версию. Экономия токенов + улучшенный пользовательский опыт.

Что касается внедрения. Тут все просто, как они и пишут у себя на сайте.

<textarea id="content" name="content" class="form-control">{{ lesson.content|safe }}</textarea>

Есть нужная тебе textarea c определенным ID

Далее добавляем скрипт, в котором перечисляются плагины, которые будут отображены в toolbar, например, шрифты, заголовки, отступы, списки, таблица, код и т.д.

<script>
tinymce.init({
  selector: '#content',
  height: 600,
  menubar: false,
  plugins: 'code codesample table lists link fullscreen',
  toolbar: [
    'undo redo | blocks fontfamily fontsize bold italic underline strikethrough link',
    'table codesample code | align lineheight checklist numlist bullist indent outdent | removeformat fullscreen'
  ],
  toolbar_mode: 'wrap',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',

  // Настройка блоков
  block_formats: 'Абзац=p; Заголовок 1=h1; Заголовок 2=h2; Заголовок 3=h3; Заголовок 4=h4; Заголовок 5=h5; Заголовок 6=h6; Код=pre',

  // Настройка языков для подсветки кода
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'PHP', value: 'php' },
    { text: 'Python', value: 'python' },
    { text: 'Java', value: 'java' },
    { text: 'C#', value: 'csharp' },
    { text: 'C++', value: 'cpp' },
    { text: 'SQL', value: 'sql' },
    { text: 'JSON', value: 'json' },
    { text: 'Bash', value: 'bash' }
  ],
});
</script>

Всё. После этого на странице появляется редактор, в котором удобно править и форматировать ответ от нейросети перед публикацией урока.

Я не исключаю того, что со временем решу поменять редактор. Возможно, появятся потребности в чем-то более серьезном. Например, захочется создавать контент к урокам таким образом, чтобы встраивать файлы или изображения прямо по тексту повествования. Тогда тут надо будет смотреть, как именно решать эту задачу. А пока, я решил две мои проблемы, и этого достаточно.

Плюс, это решение отлично подойдет для небольших проектов, типа моего, когда надо решить проблему, затратив при этом минимум усилий.

Делитесь в комментариях, кто чем пользовался в связке с django templates

Hubs: