javascript - 在 Pell 编辑器中粘贴 html 内容并使用 Striptags nodejs 包进行格式化
问题描述
在我们的项目中,我们使用pell WYSIWYG 文本编辑器,代码如下:
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功能:
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');
但是,如何以及在哪里?
解决方案
这是答案:
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;
})
});
推荐阅读
- php - 如何在 PHP 中检查 5 个空变量
- swift - Swift 4 vCard on touch 添加到联系人
- node.js - 如何在 NodeJS 中保存和显示使用 Multer 包保存的图片?
- ios - 如何实现自定尺寸 UITableView?
- angular - 找不到模块'./app/server.app.module.ngfactory'
- bash - Ansible,从剧本加载 /etc/profile
- python - 如何在 Python 类中创建乘法函数
- batch-file - 使用批处理列出任何环境路径中的所有可执行文件
- c# - ASP.Net Core 2.1 上的 Azure 移动后端连接问题
- ruby-on-rails - 对如何在 RSpec 测试中评估变量感到困惑