rich text with non editable content, angularjs

Question

I use directive textAngular to format my email notification text and stuck for while with task when I need to add non editable html inside rich text. I added my custom directive over textAngular directive. With help my custom directive I replace special characters in the string to html span tags with param contenteditable='false', but this param doesn't work and content still editable.

In this case I have two questions:

How can I setup non-editable html inside content textAngular directive?
How can I concat my variable to the string to desire place (currently it always concats to the end of the string)

I appreciate any help.

Plunker with my 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>&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>

It seems the developers are very reluctant to add this feature. Apparently a good alternative is ckeditor. — Deckerz, Aug 16 '17 at 15:10

score 12 · Accepted Answer · answered Aug 16 '17 at 16:32

1) You can't simply use contenteditable='false' attribute on your elements, since textAngularstrips it. To enable it in the past we had to download textAngular-sanitize.min.js and edit the array of allowed attributes. This starts with J=f("abbr,align,, you have to simply add contenteditable to this comma separated list.

2) To insert the template to the cursor position you can use wrapSelection method within editor scope, something like this could 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 is a working plnkr.

P.S.: textAngular seems to be a good editor, but it lacks some of the functionality and personally, I don't like its documentation. You have to gather a lot of info through the issues on the github. Right now switched to the other alternative editors, but possibly will get back to it in the future.

@antonyboom glad it helped you. We had to move to [`CKEditor`](https://ckeditor.com/), since it has better font management from the box, also it has a lot of plugins (image uploading, toolbar dropdowns, etc), the documentation seems to be more clear to me (but this is only my opinion :)). The only problem here - is to find/implement a good directive wrapper to use it. — Stanislav Kvitash, Aug 16 '17 at 17:02

rich text with non editable content, angularjs

1 Answers1