Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

rich text with non editable content, angularjs

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>
like image 538
antonyboom Avatar asked Aug 14 '17 14:08

antonyboom


People also ask

How to get started with Syncfusion angular rich text editor?

To get start quickly with Angular Rich Text Editor using CLI and Schematics, refer to the video below. To get started with Syncfusion Angular UI Components, make sure that you have compatible versions of Angular and TypeScript. Angular provides an easiest way to setup project using Angular CLI Angular CLI tool.

How to add rich text editor to a div element?

The Rich Text Editor’s content is placed in an iframe and isolated from the rest of the page. Initialize the Rich Text Editor on div element and set the enable field iframeSettings property to true.

How to retrieve rich text editor content in Java?

To retrieve the editor contents, use the value property of Rich Text Editor. Or, you can use the getHtml public method to retrieve the Rich Text Editor content. To fetch the Rich Text Editor’s text content, use getText method. To get the maximum number of characters in the Rich Text Editor’s content, use getCharCount


1 Answers

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.

like image 76
Stanislav Kvitash Avatar answered Nov 02 '22 22:11

Stanislav Kvitash