Посмотрев 10 редакторов документов, я решил...

2. Несколько тем

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

1. темный

2. Светлый цвет

3. Поддержка импорта и экспорта в один клик

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

• экспортMarkdown
• экспортPDF
• Экспорт изображения плаката на основе статьи
• импортMarkdownдокумент
• Скачать статьюhtmlсодержание

Используйте скриншот ниже:

Предварительный просмотр загруженного html-контента выглядит следующим образом:Восстановление по-прежнему очень высокое~

4. Многорежимный предварительный просмотр

Многорежимный предварительный просмотр в основном находится в области предварительного просмотра справа, мы поддерживаем предварительный просмотр мобильного телефона иpcбоковой предварительный просмотр, как показано ниже:

5. Количество слов и строк

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

6. Управление статьями

Управление статьями в основном управляет контентом, написанным пользователями. Здесь, поскольку мы являемся онлайн-инструментом, идентификация пользователей в основном использует технологию распознавания отпечатков пальцев браузера, чтобы различать пользователей. Пользователи могут легко переключать статьи в списке статей редактора для редактирования. Эффект следующий:

Реализация основной технологии

1. Импорт и экспорт нескольких типов файлов

• Импорт файлов md/html

импортmdфайл, который мы в основном используемantизuploadкомпоненты иFileReaderAPI, конкретная реализация выглядит следующим образом:

{
  name: 'file',
  showUploadList: false,
  beforeUpload(file: any): any {
    const reader = new FileReader()
    reader.onload = function(e: Event) {
      const data = (e as any).target.result
      if (editor === 'richText') {
        // ...
      } else {
        // ...
      }
    }
    reader.readAsText(file)
  },
}

• скачать html

скачатьhtmlПринцип тоже очень простой, получаем отрендеренныйhtmlстрока, использоватьhtmlШаблон оборачивает его в полныйhtmlи, наконец, сохраняется какFileобъект, использованиеfile-saverРеализовать загрузку.Идея заключается в следующем:

Основной код выглядит следующим образом:

const doc = document.querySelector('.for-markdown-preview') as HTMLElement
const html = createMDHtml(doc.innerHTML, article)
file = new File([html], `${moment().format('YYYYMMDDHHmmss')}.html`, { type: 'text/html;charset=utf-8' })
// 下载文件
saveAs(file)

2. Идентификация пользователя на основе технологии идентификации браузера по отпечатку пальца

Знания об отпечатках пальцев браузера включают в себя многое, и автор кратко представит их здесь.canvasотпечаток пальца.

Холст отпечаток пальцаЭто технология распознавания отпечатков пальцев, реализованная с использованием различий в методах обработки, таких как механизмы рендеринга шрифтов, сглаживание, субпиксельный рендеринг и т. д. Мы используем холст для преобразования одного и того же текста в изображения, даже если мы используем Canvas. рисовать одни и те же элементы, но результаты, полученные из-за вышеперечисленных различий, также отличаются.

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

createFingerprint = () => {
  const canvas = document.getElementById('anchor-uuid') as HTMLCanvasElement
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  context.font = '18pt Arial'
  context.textBaseline = 'top'
  context.fillText('hello, user.', 2, 2)
  const fingerprint = canvas.toDataURL('image/jpeg')

  // hash
  const secret = 'nice'
  const hash = crypto.createHmac('sha256', secret)
    .update(fingerprint)
    .digest('hex')

  return hash
}

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

онлайн опыт:портал

наконец

Автор все еще обновляетсяH5редакторH5-Dooring, последние обновления следующие:

• Исправить ошибку выбора библиотеки изображений
• Добавьте провинциальные и муниципальные каскадные компоненты
• Добавьте возможность массового импорта данных Excel.
• Добавить пользовательскую проверку формы
• Аудиокомпоненты добавляют автоматическое управление воспроизведением, циклическое воспроизведение и другие элементы конфигурации.
• Добавить горизонтальный скользящий компонент

найти его полезным? Любимый, если хотите, кстатиотличныйЧто ж, ваша поддержка - моя самая большая поддержка! Поиск в WeChat »Интересный разговор о фронтенде», откройте для себя больше интересных игр H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацию данных на холсте и другие интерфейсные знания и реальный бой.