带有非可编辑内容的丰富文本，angularjs

我使用指令textAngular来格式化我的电子邮件通知文本，并在需要添加不可编辑的html内部文本时停留在任务中。我通过textAngular指令添加了自定义指令。借助我的自定义指令，我将字符串中的特殊字符替换为参数contenteditable='false'的html span标签，但是此参数不起作用，并且内容仍然可编辑。带有非可编辑内容的丰富文本，angularjs

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

如何内容textAngular指令里面我设置不可编辑HTML？
我如何Concat的我的变量字符串到希望的地方（目前它总是concats到字符串的结尾）

我感谢所有帮助。

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>

来源

2017-08-14 antonyboom

看来开发人员非常不愿意添加此功能。显然，一个好的选择是ckeditor。 – Deckerz

1）您可以在过去，我们有没有simply use contenteditable='false'属性上的元素，因为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。

附注：textAngular似乎是一个很好的编辑器，但它缺乏一些功能和个人，我不喜欢它的文档。您必须通过github上的问题收集大量信息。现在切换到其他替代编辑，但可能会在未来回到它。

来源

2017-08-16 16:32:55

该死！你救了我，谢谢你，你是男人！ – antonyboom

你用什么编辑器代替TextAngular？ – antonyboom

@antonyboom很高兴它帮助你。我们必须转到['CKEditor']（https://ckeditor.com/），因为它具有更好的字体管理，还有很多插件（图片上传，工具栏下拉等），文档似乎对我更清楚（但这只是我的意见:)）。这里唯一的问题是找到/实现一个好的指令包装来使用它。 –

带有非可编辑内容的丰富文本，angularjs

回答

相关问题