在 Pell 编辑器中粘贴 html 内容并使用 Striptags nodejs 包进行格式化

Question

在我们的项目中，我们使用 pell 所见即所得的文本编辑器，代码如下：

import { moduleInit } from 'gs-components/export/js/_utils';
import pell from 'pell';

class Wysiwyg {
  constructor (element) {
    this._element = element;

    this._store = this._element.querySelector('.input__input')
    this._placeholder = this._element.querySelector('.input__label');
    this._element.appendChild(this._placeholder);


    this._editor = pell.init({
      element: this._element.querySelector('.wysiwyg__editor'),
      defaultParagraphSeparator: 'p',
      onChange: html => this._store.value = html,
      actions: [
        {
          name: 'heading2',
          icon: '<b>Überschrift</b>',
          title: 'Überschrift'
        },
        {
          name: 'paragraph',
          icon: 'Text',
          title: 'Text'
        },
        'bold',
        'italic',
        'underline',
        'olist',
        'ulist'
      ],
      classes: {
        button: 'gs-btn gs-btn--xs gs-btn--bordered',
        selected: 'gs-btn--dark'
      }
    });

    this._editor.content.innerHTML = this._store.value;

    const pellContent = this._element.querySelector('.pell-content');
    pellContent.addEventListener('focus', (e) => {
      this._store.dispatchEvent(this._buildEvent('focus'));
    });

    pellContent.addEventListener('blur', (e) => {
      this._store.dispatchEvent(this._buildEvent('blur'));
    });

    this._store.dispatchEvent(this._buildEvent('blur'));
  }

  _buildEvent(type) {
    const event = document.createEvent('HTMLEvents');
    event.initEvent(type, true, true);
    return event;
  }
}

export const init = () => moduleInit('.input--wysiwyg', element => {
  new Wysiwyg(element);
});

并且我们必须实现粘贴事件和striptags功能：

Example

var striptags = require('striptags');

var html =
    '<a href="https://example.com">' +
        'lorem ipsum <strong>dolor</strong> <em>sit</em> amet' +
    '</a>';

striptags(html);
striptags(html, '<strong>');
striptags(html, ['a']);
striptags(html, [], '\n');

但是，如何以及在哪里？

Answer 1

这是答案：

pellContent.addEventListener('paste', (e) => {
  setTimeout(() => {
    this._editor.content.innerHTML = striptags(this._editor.content.innerHTML, ['h2', 'p', 'br', 'ul', 'ol', 'li']);
    this._store.value = this._editor.content.innerHTML;
  })
});

在 Pell 编辑器中粘贴 html 内容并使用 Striptags nodejs 包进行格式化

Paste html content in Pell Editor and format with Striptags nodejs package

javascript

wysiwyg

node.js

dom-events

gruntjs