具有不可编辑内容的富文本，angularjs
具有不可编辑内容的富文本，angularjs
提问于 2017-08-14 22:33:01
我使用指令textAngular来格式化我的电子邮件通知文本，当我需要在富文本中添加不可编辑的html时，我会坚持使用任务。我在textAngular指令上添加了我的自定义指令。通过help我的自定义指令，我将字符串中的特殊字符替换为参数contenteditable='false'，但是这个参数不起作用，并且内容仍然可以编辑。
在这种情况下，我有两个问题：
- 如何在content 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> ");
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-17 00:32:55
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上的问题收集大量信息。现在切换到其他替代编辑器，但可能会在未来回到它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45676930
复制相关文章
相似问题