prettifying innerHTML от Contenteditable div - PullRequest
Новая
       9

prettifying innerHTML от Contenteditable div

0 голосов
/ 25 января 2019

Я пытаюсь сделать редактор, используя contenteditible div (это div покажет визуализированный контент, но также позволит пользователю вносить изменения, печатая и другие инструменты панели инструментов, такие как жирный, курсив и т. Д.), Давайте вызовемэтот редактор renditor , я также хочу показать innerHTML contenteditible div в другом div, для которого я использую ace-editor для angular (https://github.com/fxmontigny/ng2-ace-editor) с режимом html (давайте назовем его coditor ), но проблема, с которой я сталкиваюсь, заключается в том, что я переключаюсь с renditor на coditor (я беру innerHTML из renditor div и подключаю его к coditor div) renditor изменяет внешний вид innerHTML по-своему таинственным образом, что приводит к переполнению coditor .

Я пытался использовать трубу под углом скод, полученный из этого ответа (https://stackoverflow.com/a/43794051/4961540), но это даже усугубляет проблему, нарушая HTML. Я также чувствую, что renditor div несет ответственность за это, потому что в прошлом я не использовал отдельные div нравится coditor вместо того, чтобы показывать код, я просто включил тот же div, используя теги, такие как pre и некоторые другие вспомогательные функции, даже тогда html выглядел так, как выглядит сейчас в coditor Также кажется, что renditor несет ответственность за это, потому что я наблюдал, когда я устанавливал innerHTML из renditor на полный источник HTML-страницы, он удаляет html теги и некоторые другие тегипоэтому он действительно вносит некоторые изменения в innerHTML, а также в его внешний вид.

 <div class="mat-typography textBox editable" style="margin: 16px;" 
  [hidden]="isSourceVisible" 
  (input)="mSimpleTask.html=$event.target.innerHTML"contenteditable="true">
  </div>

    <div class="ace_tooltip" [hidden]="!isSourceVisible" ace-editor 
    [(text)]="mSimpleTask.html" 
    [mode]="'html'"
    class="textBox ace-editor" 
    [theme]="'eclipse'"
    [readOnly]="false"
    [autoUpdateContent]="true"
    [durationBeforeCallback]="1000"
    (textChanged)="this.mSimpleTask.html=$event;"
    style="overflow-wrap: break-word;margin: 16px">

  </div>

Я хочу преобразовать / извлечь innerHTML из renditor таким образом, чтобы html выглядел аккуратно с правильными переносами строк и без переполнений в coditor ,Можете ли вы пролить свет на то, как я могу достичь этого или даже лучше, если вы могли предоставить код с вашей реализацией в прошлом?

...