QuillJS создает новую строку в тегах <pre> - PullRequest
Новая
       45

QuillJS создает новую строку в тегах <pre>

0 голосов
/ 27 сентября 2019

Я разрабатываю небольшой форум на Angular с использованием QuillJS в качестве редактора (https://github.com/KillerCodeMonkey/ngx-quill),) и хочу добавить к нему «спойлер». На данный момент у меня есть спойлер-компонент, содержащий кнопку, чтобы скрыть /показать некоторое содержимое на странице просмотра, но я не могу заставить его работать в редакторе.

Мне не удалось добавить кнопку, чтобы скрыть / показать некоторый текст в редакторе, поэтому я собираюсьдля чего-то вроде блока кода. Моя проблема в том, что я не могу заставить его работать так, как я хочу: мне нужно добавить тег спойлера-компонента в мой редактор (он не будет содержать кнопки и т. д., но это нормально).Я проверил уже реализованный кодовый блок, и когда я успешно имитирую его, он не работает должным образом.

Вот моя последняя попытка заставить его работать:

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

Мое пятно Quill 

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');
    });

Результат этого

image

На каждомновая строка, он создает новый предварительный тег.Но как блок кода я хочу добавить новую строку в текущий спойлер-компонент и выйти из нее, если в строке более 3 пустых строк.Кроме того, он не содержит никаких тегов спойлерных компонентов, как если бы мое пятно Quill не работало вообще.image

Так есть ли способ достичь моей цели?Или есть способ получить что-то подобное?

Редактировать 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');
    });

В результате получается следующее:

img

Для следующего HTML

img

Проблема сейчасв том, что: когда я нажимаю «ввод», он создает новый пустой спойлер-компонент на той же линии.Когда я снова нажимаю «ввод», он создает новый пустой спойлер-компонент в строке ниже ...

1 Ответ

0 голосов
/ 27 сентября 2019

Хотя у меня нет ответа на этот конкретный вопрос, вы можете проверить TinyMCE.По моему опыту, TinyMCE немного более гибок, чем QuillJ.TinyMCE для угловых: https://github.com/tinymce/tinymce-angular

...