javascript - rich text with non editable content, angularjs -
i use directive textangular format email notification text , stuck while task when need add non editable html inside rich text. added custom directive on textangular directive. custom directive replace special characters in string html span tags param contenteditable='false'
, param doesn't work , content still editable.
in case have 2 questions:
- how can setup non-editable html inside content textangular directive?
- how can concat variable string desire place (currently concats end of string)
i appreciate help.
plunker problem
my custom directive:
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 label.label 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) can't simply use contenteditable='false'
attribute on elements, since textangular
strips it. enable it in past had download textangular-sanitize.min.js
, edit array of allowed attributes. starts j=f("abbr,align,
, have add contenteditable
comma separated list.
2) insert template cursor position can use wrapselection
method within editor scope, work:
$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); } };
here working plnkr.
p.s.: textangular
seems editor, lacks of functionality , personally, don't documentation. have gather lot of info through issues on github. right switched other alternative editors, possibly in future.
Comments
Post a Comment