具有不可编辑内容的富文本，angularjs

Question

我使用指令 textAngular 来格式化我的电子邮件通知文本，当我需要在富文本中添加不可编辑的 html 时，我在执行任务时卡住了。我在 textAngular 指令上添加了我的自定义指令。在自定义指令的帮助下，我用参数 contenteditable='false' 将字符串中的特殊字符替换为 html span 标签，但此参数不起作用，内容仍然可编辑。

在这种情况下，我有两个问题：

如何在内容 textAngular 指令中设置不可编辑的 html？
如何将我的变量连接到想要放置的字符串（目前它总是连接到字符串的末尾）

感谢任何帮助。

Plunker 我的问题

我的自定义指令：

app.directive('removeMarkers', function () {

return {
    require: "ngModel",
    link: function (scope, element, attrs, ngModel) {

       element.bind('click', function (e) {
                var target = e.target;
                var parent = target.parentElement;
                if (parent.classList.contains('label-danger')){
                    parent.remove()
                }
            });

        function changeView(modelValue){
            modelValue= modelValue
                .replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 14px;'>")
                .replace(/\}}/g, "<span contenteditable='false' class='remove-tag fa fa-times'></span></span>&nbsp;");
            ngModel.$modelValue= modelValue;

            console.log(ngModel)
            return modelValue;
        }
        ngModel.$formatters.push(changeView);
        }
    }
});

Html

  <select class="form-control pull-right"
                style="max-width: 250px"
                ng-options="label.name as label.label for label in variables"
                ng-change="selectedEmailVariables(variable)"
                ng-model="variable">
            <option value="">template variables</option>
   </select>

  <div text-angular remove-markers name="email" ng-model="data.notifiation"></div>

Answer 1

1) 你不能 simply use contenteditable='false' attribute on your elements, since textAngularstrips it. To enable it 过去我们必须下载 textAngular-sanitize.min.js 并编辑允许的属性数组。这以 J=f("abbr,align, 开头，您只需将 contenteditable 添加到此逗号分隔列表。

2) 要将模板插入到光标位置，您可以 use wrapSelection method within editor scope，像这样的方法可以工作：

$scope.selectedEmailVariables = function (item) {
    if (item !== null) {
          var editorScope = textAngularManager.retrieveEditor('editor1').scope;
          editorScope.displayElements.text[0].focus();
          editorScope.wrapSelection('insertHtml', 
          " <span class='label label-danger' contenteditable='false' style='color: #FFFFFF; font-size: 14px;'>" + item + "<span contenteditable='false' class='remove-tag fa fa-times'></span></span> ", true);
    }
};

这里是working plnkr。

P.S.: textAngular 似乎是一个不错的编辑器，但它缺少一些功能，而且我个人不喜欢它的文档。您必须通过 github 上的问题收集大量信息。现在切换到其他替代编辑器，但将来可能会重新使用它。

具有不可编辑内容的富文本，angularjs

rich text with non editable content, angularjs

html

javascript

angularjs

textangular