Загрузите несколько ngx-редакторов на одной странице
Я пытаюсь показать несколько NgxEditor на одной странице, но только последний редактор загружается правильно с текстовым полем. Другие редакторы не загружают текстовое поле. Если я вношу изменения в меню других редакторов, это отражается в последнем редакторе.
Я не вижу ошибок в консоли.
Вот пример кода с двумя редакторами. Я не знаю, как их разделить, чтобы они работали независимо.
<div class = "NgxEditor__Wrapper">
<ngx-editor-menu [editor] = "editor"> </ngx-editor-menu>
<ngx-editor [editor] = "editor" [ngModel] = "htmlOne" [disabled] = "false" [placeholder] = "'Type here...'"></ngx-editor>
</div>
<div class = "NgxEditor__Wrapper">
<ngx-editor-menu [editor] = "editor"> </ngx-editor-menu>
<ngx-editor [editor] = "editor" [ngModel] = "htmlTwo" [disabled] = "false" [placeholder] = "'Type here...'"></ngx-editor>
</div>
Вот файл .TS:
import { Editor } from 'ngx-editor';
export class myIpComponent implements OnInit {
htmlOne = '';
htmlTwo = '';
public editor = new Editor()
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
118
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Нам просто нужно иметь два отдельных экземпляра Editor, у каждого редактора будет свой экземпляр.
При этом инициализируются они оба!
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { Editor, NgxEditorModule } from 'ngx-editor';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgxEditorModule, FormsModule],
template: `
<div class = "NgxEditor__Wrapper">
<ngx-editor-menu [editor] = "editor"> </ngx-editor-menu>
<ngx-editor [editor] = "editor" [ngModel] = "htmlOne" [disabled] = "false" [placeholder] = "'Type here...'"></ngx-editor>
</div>
<div class = "NgxEditor__Wrapper">
<ngx-editor-menu [editor] = "editor2"> </ngx-editor-menu>
<ngx-editor [editor] = "editor2" [ngModel] = "htmlTwo" [disabled] = "false" [placeholder] = "'Type here...'"></ngx-editor>
</div>
`,
})
export class App {
htmlOne = '';
htmlTwo = '';
public editor = new Editor();
public editor2 = new Editor();
}
bootstrapApplication(App);
Демо-версия Stackblitz
Другие вопросы по теме
Как я могу сделать параметры панели инструментов для «ngx-editor» динамически отформатированными в форме переменной или константы в Angular?
Как работает механизм ошибок типа "Модуль не найден: ошибка: не удается устранить ..."
Ngx-Editor в Microsoft Edge не сохраняет форматирование
Angular6 - значки ngx-editor не отображаются в продакшене
Ngx-редактор с потрясающим шрифтом 5+
Есть ли способ получить текст из ngx-редактора?
Angular ngx-editor аутсорсинг конфигурации из app.component.ts в другом файле components.ts
Угловая интерполяция, директива, ngModel не работает
Ngx-редактор "Выбери Imagen"
Похожие вопросы
Как прочитать массив в сигнале Angular, когда он меняется на входной сигнал?
Как загрузка и предоставление изображений работает в веб-приложении?
Отказаться от предотвращения кэширования HTTP-запросов, требующих авторизации
Как изменить порт сборки ng с помощью Angular 17
Передача данных обратно из cdkPortalOutlet ComponentPortal в родительский компонент
Как вернуть массив вложенных объектов с помощью сигнала в Angular/Typescript?
Как вызвать ngOnInit одного компонента из другого компонента
Angular 17 — Сигнал для ссылки на другой сигнал
Почему моя карусель начальной загрузки не загружается в Angular 17 SSR?
Новый синтаксис шаблона: if (first) внутри for не работает