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:

1. How can I setup non-editable html inside content textAngular directive?
2. 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>

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:

1. How can I setup non-editable html inside content textAngular directive?
2. 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>

• javascript
• html
• angularjs
• textangular

• It seems the developers are very reluctant to add this feature. Apparently a good alternative is ckeditor. – Deckerz Commented Aug 16, 2017 at 15:10

1 Answer 1

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 ma 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.