0

我正在使用 QuillJS 作为编辑器（https://github.com/KillerCodeMonkey/ngx-quill）在 Angular 中开发一个小论坛，我想给它添加一个“剧透”。现在，我有一个扰流组件，其中包含一个按钮来隐藏/显示视图页面中的一些内容，但我无法让它在编辑器中工作。

我没有成功添加一个按钮来在编辑器中隐藏/显示一些文本，所以我要使用类似代码块的东西。我的问题是我无法让它按我的意愿工作：我需要在我的编辑器中添加一个扰流组件标签（它不会包含按钮等，但没关系）。我检查了已经实现的代码块，当我成功模仿它时，它并没有按预期工作。

这是我使它工作的最后一次尝试：

首先，我需要弹出一个模式来询问剧透标题（要在切换按钮中显示的文本）。

我的羽毛笔印迹

import * as Quill from 'quill';

let Block = Quill.import('blots/block');

class SpoilerComponent extends Block {
  static create(value) {
    let spoiler = document.createElement('spoiler-component');
    spoiler.setAttribute('title', value.getAttribute('title')); // my angular component has a "title" attribute
    spoiler.textContent = '...';
    let node = super.create(value);
    node.appendChild(spoiler);
    node.setAttribute('title', value.getAttribute('title'));
    return node;
  }
}
SpoilerComponent['blotName'] = 'spoiler-component'; 
SpoilerComponent['className'] = 'spoiler-component-container';
SpoilerComponent['tagName'] = 'pre';

Quill.register({
  'formats/spoiler-component': SpoilerComponent
});

我添加扰流板组件的功能

const picker = this.dialog.open(SpoilerPickerComponent, { panelClass: 'spoiler-picker-box' });
    picker.afterClosed().subscribe(title => {
      let spoiler = document.createElement('spoiler-component');
      spoiler.setAttribute('title', title);
      this.quill.insertEmbed(this.index, 'spoiler-component', spoiler, 'user');
    });

这个结果

图片

在每一行，它都会创建一个新的 pre 标签。但作为代码块，我希望它在当前的扰流器组件中添加一个新行，如果连续有 3 个以上的空行，则退出它。此外，它不包含任何扰流组件标签，就好像我的 Quill 印迹根本不起作用。 图片

那么有没有办法实现我的目标？或者有没有类似的方法？

编辑 1

我已经取得了一些进展（我猜？？）。

我将摆脱“pre”标签，因为我意识到我不需要它。

这是我的最新代码：

import * as Quill from 'quill';
let Block = Quill.import('blots/block');
class SpoilerComponent extends Block {
  static create(value) {
    console.log('value')
    let node = super.create(value);
    node.setAttribute('title', value.getAttribute('title'));
    return node;
  }
}
SpoilerComponent['blotName'] = 'spoiler-component'; 
SpoilerComponent['className'] = 'spoiler-component-container';
SpoilerComponent['tagName'] = 'spoiler-component';

Quill.register({
  'formats/spoiler-component': SpoilerComponent
});

和

const picker = this.dialog.open(SpoilerPickerComponent, { panelClass: 'spoiler-picker-box' });
    picker.afterClosed().subscribe(title => {
      let spoiler = document.createElement('spoiler-component');
      spoiler.setAttribute('title', title);
      this.quill.insertEmbed(this.index, 'spoiler-component', spoiler, 'user');
    });

结果如下：

图像

对于以下 HTML

图像

现在的问题是：当我按“enter”时，它会在同一行上创建一个新的空扰流器组件。当我再次按“输入”时，它会在下面的行中创建一个新的空扰流器组件...

4

2 回答 2

0

当您从 Quill 获得 html 结果时，请尝试以下代码：

        html.replace(/<p><br><\/p>/g, '<br>')
            .replace(/<p>/g, '')
            .replace(/<\/p>/g, '<br>');

来自：https ://github.com/KillerCodeMonkey/ngx-quill/issues/357

于 2020-10-23T22:20:53.043 回答
-1

尽管我对这个特定问题没有答案，但您可能想查看 TinyMCE。根据我的经验，我发现 TinyMCE 比 QuillJs 更灵活一些。角度的 TinyMCE：https ://github.com/tinymce/tinymce-angular

于 2019-09-27T09:36:11.653 回答