texte riche avec un contenu non modifiable, angularjs

j'ai utiliser la directive textAngular pour formater mon texte de notification d'e-mail et coincé pendant que la tâche avec quand j'ai besoin d'ajouter html non modifiable à l'intérieur du texte riche. J'ai ajouté Ma directive personnalisée sur la directive textAngular. Avec l'aide de ma directive personnalisée je remplace les caractères spéciaux dans les balises string to html span avec param contenteditable='false', mais ce param ne fonctionne pas et le contenu reste modifiable.

Dans ce cas j'ai deux questions:

  1. Comment puis-je configurer non-modifiable html à l'intérieur du contenu textAngular directive?
  2. Comment puis-je concatter ma variable à la chaîne à desire place (actuellement elle concatte toujours à la fin de la chaîne)

j'apprécie toute l'aide.

Plunker mon problème

Mon 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>
18
demandé sur antonyboom 2017-08-14 17:33:01

1 réponses

1) Vous ne pouvez pas simplement utiliser contenteditable='false' attribut sur vos éléments, depuis textAngularbandes. Pour l'activer dans le passé nous avons dû télécharger textAngular-sanitize.min.js et éditez le tableau des attributs autorisés. Cela commence par J=f("abbr,align,, vous devez simplement ajouter contenteditable à cette liste de virgule séparée.

2) Pour insérer le modèle à la position du curseur, vous pouvez utiliser wrapSelection méthode au sein de l'éditeur de portée, quelque chose comme cela pourrait travail:

$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);
    }
};

Voici un travail plnkr.

P.S.:textAngular semble être un bon éditeur, mais il manque certaines fonctionnalités et personnellement, je n'aime pas sa documentation. Vous devez rassembler beaucoup d'informations à travers les problèmes sur le github. Droit maintenant passé à autre alternative d'éditeurs, mais peut-être y reviendrons dans l'avenir.

11
répondu Stanislav Kvitash 2017-08-16 16:32:55