[英]rich text with non editable content, angularjs
当我需要在富文本中添加不可编辑的html时,我使用指令textAngular来格式化我的电子邮件通知文本并坚持使用任务。 我在textAngular指令上添加了我的自定义指令。 在我的自定义指令的帮助下,我将字符串中的特殊字符替换为带有param contenteditable='false'
html span标签,但此参数不起作用且内容仍可编辑。
在这种情况下,我有两个问题:
我感谢任何帮助。
偷偷摸摸我的问题
我的自定义指令:
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)你不能简单contenteditable='false'
在你的元素上使用contenteditable='false'
属性,因为textAngular
剥离它。 要在过去启用它 ,我们必须下载textAngular-sanitize.min.js
并编辑允许的属性数组。 这开头是J=f("abbr,align,
,你必须简单地添加contenteditable
到这个逗号分隔列表。
2)要将模板插入光标位置,可以在编辑器范围内使用wrapSelection
方法 ,这样的方法可以工作:
$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);
}
};
这是一个有效的plnkr 。
PS: textAngular
似乎是一个很好的编辑器,但它缺乏一些功能和个人,我不喜欢它的文档。 你必须通过github上的问题收集大量信息。 现在转到其他替代编辑器,但将来可能会回到它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.