我正在尝试使编辑器使用内容可编辑的div（此div将显示渲染的内容，但也将允许用户通过键入以及其他工具栏工具（如粗体，斜体等）进行更改。 ），让我们将此编辑器称为 renditor ，我还想在另一个div中显示内容可编辑div的innerHTML，为此我将ace-editor用于angular（https://github.com/fxmontigny/ng2-ace-editor）模式html（让我们称它为 coditor ），但是我面临的问题是当我从renditor切换到coditor时（我使用了 renditor div的innerHTML并将其插入变成 coditor div）， renditor 会以自己的神秘方式更改innerHTML的外观，从而导致 coditor 。
我尝试使用带有此答案（https://stackoverflow.com/a/43794051/4961540）提供的代码的斜角管道，但是通过破坏html甚至使问题变得更糟。我还觉得 renditor div是造成这种情况的原因，因为过去我没有像 coditor 那样使用单独的div来显示代码，而我只是使用div之类的标签和其他一些辅助功能在同一pre中切换，即使html看起来现在在 coditor 中也是如此。另外，感觉是 renditor 对此负责，因为我观察到当我将 renditor 的innerHTML设置为完整的html页面源代码时，它会剥离{{1} }标签和其他一些标签，因此它确实对html及其外观做了一些更改。
innerHTML我正在寻求从 renditor 转换/提取 <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>
的方式，以使html看起来很整洁，带有适当的换行符，并且 coditor 中没有溢出。您能否说明一下我如何实现这一目标，或者如果您过去可以在实现中提供代码，那么我还能做到更好？