Multiline / innerHtml / contentEditable Angular Challenge - PullRequest
0 голосов
/ 19 октября 2018

Я пытаюсь сделать с Angular5 своего рода «текстовый редактор» со свойствами div и contenteditable , чтобы пользователь мог писать простой текст, но также это позволяетпользователь выбирает часть произвольного текста и затем запускает событие, которое добавляет тег div с некоторыми классами и ID , все окружающие выделенный текст, потому что пользователь затем может добавить некоторые другие свойства кэтот недавно выделенный текст.

Однако пользователю не нужно видеть теги, только результат HTML-тегов suroundings, а затем я хочу сохранить всю строку с ее свойствами html.Это потому, что позже пользователь может снова вызвать этот « шаблон », и мне нужно показать все настройки, которые пользователь установил.

Я пробовал [innerHtml], но этосвойство записывает задом наперед, и я могу сделать многострочное деление.

Метод (щелчок) Я не буду его использовать, пока не найду способ добавить все эти вещи в строку

<div *ngFor="let item_drag of items_drag; let idx = index">
    <div [(appContenteditableModel)]="item_drag.data.content" 
         contenteditable="true"
         (mouseup)="setSelectedVariableText(item_drag)"
          style="min-width:100px; max-width: 599px; padding: 2px 0;border: 1px dashed gray; cursor: text; white-space: pre-wrap;"></div>
    </div>

Этообъект, в который я сохраняю данные

items_drag = [
  {data:{
      type: 'whatEver,
      content: 'string'
    }
  }
]

1 Ответ

0 голосов
/ 19 октября 2018

Вам нужно будет санировать код, чтобы «выполнить» в виде HTML.

Это может помочь, https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

Хотя использовать его не рекомендуется без какой-либо проверки работоспособности вручную.Ваш код может быть уязвим к XSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...