Tinymce — первый в мире текстовый редактор с расширенным форматированием? [1]

внешний интерфейс
Tinymce — первый в мире текстовый редактор с расширенным форматированием? [1]

Tinymce

tinymceЭто богатый текстовый редактор с богатыми базовыми компонентами, который постоянно поддерживается и обновляется. в своемГитхаб проектВведение описывает себя следующим образом:

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

Вкратце: я редактор номер один во вселенной, и я поддерживаю три самых популярных фреймворка.

Я разделю его на 3 статьи, чтобы представить:

  1. Основное использование редактора и настройка некоторых простых плагинов
  2. Настройка некоторых сложных плагинов и интеграция Vue
  3. Пишите собственные плагины

Why Tinymce

  • Можно использовать богатые основные компоненты, простую конфигурацию;
  • У него есть платная версия и бесплатная версия, а его прибыльность обеспечивает его постоянное обслуживание и инновации, а версии для разработки на самом деле вполне достаточно;
  • Предоставленный API для разработки и расширения также относительно прост и подходит для непрерывной интеграции;
  • Хотя документация по разработке на английском языке, она краткая и исчерпывающая, с богатыми примерами и обновляется в режиме реального времени версией, которая намного лучше, чем у других редакторов на рынке.

начать использовать

Версия, используемая в этой статье,5.0.13

Установить

Основные файлы Tinymce отделены от плагинов, скинов, стилей темы и других файлов.При его использовании вам нужно только ввести основной файл (tinymce.js) в HTML.

<script src="https://fe.120yibao.com/common/tinymce/5.0.13/tinymce.min.js"></script>

При создании нового экземпляра редактора вам необходимо передать файл конфигурации, tinymce автоматически импортирует соответствующие плагины, скины и файлы тем в соответствии с конфигурацией, а относительный путь (относительно tinymce.js) используется по умолчанию.

const editor = Tinymce.init({
    //会自动引入link插件
    // https://fe.120yibao.com/common/tinymce/5.0.13/plugins/link/plugin.min.js
    plugins: ['link'],  
    //会自动引入silver主题
    // https://fe.120yibao.com/common/tinymce/5.0.13/themes/silver/theme.min.js
    theme: 'silver',
    //会自动引入oxide皮肤
    // https://fe.120yibao.com/common/tinymce/5.0.13/skins/ui/oxide/skin.min.css
    skin: "oxide"
})

Связь между этими относительными путями такая же, как и в пакете npm.

npm i tinymce

Давайте посмотрим на структуру каталогов пакета npm.

.
├── jquery.tinymce.js
├── jquery.tinymce.min.js
├── plugins
│   ├── advlist
│   │   ├── index.js
│   │   ├── plugin.js
│   │   └── plugin.min.js
│   ├── anchor
│   │   ├── index.js
│   │   ├── plugin.js
│   │   └── plugin.min.js
│   ├── autolink
│   │   ├── index.js
│   │   ├── plugin.js
│   │   └── plugin.min.js
├── skins
│   ├── content
│   │   ├── default
│   │   │   ├── content.css
│   │   │   └── content.min.css
│   │   ├── document
│   │   │   ├── content.css
│   │   │   └── content.min.css
│   │   └── writer
│   │       ├── content.css
│   │       └── content.min.css
│   └── ui
│       ├── oxide
│       │   ├── content.css
│       │   ├── content.inline.css
│       │   ├── content.inline.min.css
│       │   ├── content.min.css
│       │   ├── content.mobile.css
│       │   ├── content.mobile.min.css
│       │   ├── fonts
│       │   │   └── tinymce-mobile.woff
│       │   ├── skin.css
│       │   ├── skin.min.css
│       │   ├── skin.mobile.css
│       │   └── skin.mobile.min.css
│       └── oxide-dark
│           ├── content.css
│           ├── content.inline.css
│           ├── content.inline.min.css
│           ├── content.min.css
│           ├── content.mobile.css
│           ├── content.mobile.min.css
│           ├── fonts
│           │   └── tinymce-mobile.woff
│           ├── skin.css
│           ├── skin.min.css
│           ├── skin.mobile.css
│           └── skin.mobile.min.css
├── themes
│   ├── mobile
│   │   ├── index.js
│   │   ├── theme.js
│   │   └── theme.min.js
│   └── silver
│       ├── index.js
│       ├── theme.js
│       └── theme.min.js
├── tinymce.js
└── tinymce.min.js

CDN

Поэтому, если вы хотите использовать tinymce в качестве CDN, вы можете загрузить его прямо в этом формате каталога.

npm

Вы также можете использовать npm для импорта, но каждый плагин, тему и скин нужно импортировать отдельно, что неудобно и не рекомендуется.

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// A theme is also required
import 'tinymce/themes/silver';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

// Initialize the app
tinymce.init({
  selector: '#tiny',
  plugins: ['paste', 'link']
});

быстрый старт

<template>
	<div class="default-tinymce">
		<textarea id="editor"></textarea>
	</div>
</template>
<script>
import Tinymce from 'tinymce'
export default {
  name: 'DefaultTinymce',
  mounted () {
    Tinymce.init({
      selector: '#editor'
    })
  }
}
</script>

  • В этом примере настраивается только единственная необходимая конфигурацияselector,Прямо сейчасtextartaИдентификатор элемента, это значение параметра поддерживает что-то вродеCSSФормат параметра селектора.

  • В дополнение к использованию файла ввода (tinymce.js) в этом примере также импортируются файлы темы и обложки по умолчанию.

  • После успешной инициализации значение textarea будет привязано к iframe.Операция в области редактирования форматированного текста фактически является операцией в iframe, и содержимое будет автоматически синхронизировано с textarea.

три режима

У tinymce есть три режима на выбор: классический режим (классический, по умолчанию), встроенный режим (встроенный) и режим обновления (без отвлечения внимания).

Классический режим является наиболее распространенным, то есть панель инструментов сопоставляется с областью ввода, а содержимое вставляется, модифицируется и форматируется с помощью кнопок панели инструментов.Этот режим мы также выбираем в качестве основного режима работы.

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

несколько редакторов

Если вам нужно несколько редакторов на странице, есть два способа:

Один из них - объединить селектор className и использовать его один раз.tinymceизinitметод для создания нескольких экземпляров, и несколько экземпляров будут совместно использовать набор конфигураций;

Образец кода:

<template>
	<div class="default-tinymce">
        <h2>编辑器1</h2>
		<textarea class="editor"></textarea>
        <h2>编辑器2</h2>
		<textarea class="editor"></textarea>
	</div>
</template>
<script>
import Tinymce from 'tinymce'
export default {
  mounted () {
    Tinymce.init({
      selector: '.editor'
    })
  }
}
</script>

Во-вторых, если вам нужно несколько редакторов, вы можете использоватьtinymceизinitМетод генерирует несколько экземпляров, сгенерированные экземпляры не зависят друг от друга

Образец кода:

<template>
	<div class="default-tinymce">
        <h2>编辑器1</h2>
		<textarea class="editor1"></textarea>
        <h2>编辑器2</h2>
		<textarea class="editor2"></textarea>
	</div>
</template>
<script>
import Tinymce from 'tinymce'
export default {
  mounted () {
    Tinymce.init({
      selector: '.editor1'
    })
    Tinymce.init({
      selector: '.editor2'
    })
  }
}
</script>

Конфигурация редактора

язык конфигурации

Язык редактора можно настроить на китайский.

tinymce.init({
    selector: '#myTextarea',
    language: 'zh_CN'
})
  • можно установитьlanguage_url, переопределяя адрес по умолчанию.
tinymce.init({
    selector: '#myTextarea',
    language_url: 'https://fe.120yibao.com/common/tinymce/5.0.13/langs/zh_CN_01.js'
})
  • Языковые файлы также можно настроить в проекте:
import Language from './language'
Tinymce.addI18n('zh_CN_01', Language)

tinymce.init({
    selector: '#myTextarea',
    language: 'zh_CN_01'
})

Прикрепил:Официальный многоязычный адрес загрузки файлов

Базовая конфигурация

Следующая конфигурация примерно охватывает базовую конфигурацию tinymce, и я объясню ее в следующих главах.

tinymce.init({
    selector: '#myTextarea',
    // 编辑器的皮肤，有 oxide oxide-dark
    skin: 'dark',
    // 编辑器宽高
    width: 600,
    height: 300,
    // 用到的插件
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste textcolor'
    ],
    // 编辑区域内容样式
    content_css: 'css/content.css',
    // 工具栏的配置项
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });

Используйте плагины

В дополнение к конфигурации по умолчанию, если вы хотите расширить функциональность редактора, tinymce предоставляет плагин.

Официальных плагинов очень много, а документация очень подробная, в большинстве случаев мне нужны только официальные плагины.

Активировать плагин тоже очень просто, нужно только сделать соответствующую настройку.

Например, если мы хотим расширить функцию просмотра исходного кода HTML содержимого редактора, нам потребуется только следующая конфигурация:

tinymce.init({
  selector: '#editor',
  plugins: 'code'
})

существуетmenubarместо, еще одинToolгруппировка, имеющаяsource code, щелкните, чтобы просмотреть исходный код

Если мы не привыкли использоватьmenubar, но привык использоватьtoolbar, нам нужна только следующая конфигурация:

tinymce.init({
  selector: '#editor',
  toolbar: 'code',
  plugins: 'code'
})

toolbarНа локации есть иконка для просмотра исходного кода, та же функция по нажатию

Иногда эти основные функции могут не соответствовать нашим потребностям, и мы можем настроить эти плагины.

tinymce.init({
  selector: '#editor',
   toolbar: "numlist bullist",
  plugins: 'lists'
})

В примере мы настраиваемlistКомпонент, он поддерживает функции неупорядоченного (ul) списка и упорядоченного списка, но стиль списка исправлен, мы можем ввести новые плагиныadvlistи настроить

tinymce.init({
  selector: '#editor',
  toolbar: 'bullist numlist',
  plugins: 'lists advlist'
})

На этом этапе мы обнаружили, что можем выбрать стиль. У нас есть много стилей на выбор. Если мы хотим исправить определенный стиль, мы можем настроить его следующим образом:

tinymce.init({
  selector: '#editor',
  toolbar: 'bullist numlist',
  plugins: 'lists advlist',
  advlist_number_styles: 'lower-alpha'
})

Мы обнаружили, что есть только один вариант

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

Пользовательский интерфейс редактора

themeа такжеskinМы можем использовать значение по умолчанию напрямую, не отбрасывая.

Из приведенного выше примера мы также знаем, что в основном все, что мы можем настроить, например, скрытие неиспользуемыхmenubar, кнопка регулировки естьtoolbarрасположение и т. д.

tinymce.init({
  selector: '#editor',
  // 隐藏menubar
  menubar: false,
  // 隐藏 statusbar
  statusbar: false,
  // 隐藏品牌标识
  branding: false,
  // 设置最大宽高
  max_height: 500,
  max_width: 500,
  // 设置最小宽高
  min_height: 100,
  min_width: 400
})

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

Конфигурация плагина

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

Advanced Code Editor

Этот плагин платный

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

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "advcode",
  toolbar: "code"
});

AutoLink

Этот плагин можно ввести в виде "Ссылка "www.qq.com", автоматически преобразует текст в гиперссылку, могут быть активированы как пробелы, так и разрывы строк

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autolink"
});

nonbreaking

клавиатураTabключ, по умолчанию переключается на следующий элемент. Это может изменить поведение по умолчанию.

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

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "nonbreaking",
  // 此配置会改变默认行为，会在光标之后添加三个空格。
  nonbreaking_force_tab: true
});

autosave

Этот плагин автоматически сохранит содержимое редактора вlocalStorage. Одновременно будут храниться два поля: одно — содержимое, а другое — время хранения.

Вы можете настроить временной интервал для автоматического сохранения, как правило, в секундах, а также время истечения срока хранения контента, как правило, в минутах.По истечении этого времени данные будут сохраняться изlocalStorageочищается.

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "autosave",
  // 自动保存的时间间隔
  autosave_interval: '30s',
  // 自动保存的数据存储的最大时间
  autosave_retention: '30m'
});

powerpaste

Этот плагин платный

Этот плагин сохраняет стиль, структуру документа содержимого буфера обмена.

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "powerpaste",
  /**
   * 粘贴前是否保留文本样式
   * @param 'clean' 不保留
   * @parma 'merge' 保留
   * @parma 'prompt' 询问用户
   */
  powerpaste_word_import: 'prompt',
  powerpaste_html_import: 'prompt',
  /**
   * 在粘贴到富文本之前,可以修改粘贴的内容。内容已经DOM格式化
   * @param plugin
   * @param args
   * @returns {Promise<void>}
   */
  paste_postprocess (plugin, args) {}
});

Следующий:Tinymce — первый в мире текстовый редактор с расширенным форматированием? [2]

Ссылаться на

  1. официальная документация тинимсе
Категории