Question

我正在尝试使用Angular5创建具有 div 和 contenteditable 属性的“文本编辑器”，以便用户可以编写纯文本，但是允许用户选择随机文本的一部分，然后触发一个事件，该事件添加一个带有一些类和 ID 的 div 标记，所有标记都围绕所选文本，因为用户随后可以添加最近选择的文本的一些其他属性。

但是，用户不必看到标签，只需看到环绕的html标签的结果，然后我想用其html属性保存整个字符串。这是因为稍后用户可以再次调用此“ 模板”，而我必须显示用户所做的所有设置。

我已经尝试过[innerHtml]，但是此属性向后写入，因此可以进行多行div。

这是带有 appContentEditableModel 的HTML的简化版本，让我可以将其用作 ngModel 的等效项。

（点击）方法直到我找到在字符串中添加所有这些东西的方法之前都没有使用

<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'
    }
  }
]

Answer 1

您需要清理代码以便“执行”为html。

这可以帮助您， https://medium.com/@swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b

尽管不建议在没有任何手动状态检查的情况下使用它。您的代码可能容易受到XSS的攻击。

多行/内部HTML /内容可编辑角度挑战

1 个答案: