javascript - print - ng-bind-html angularjs

texto enriquecido con contenido no editable, angularjs

Question

Utilizo la directiva textAngular para dar formato al texto de notificación de mi correo electrónico y quedé atascado durante la tarea cuando necesito agregar html no editable en texto enriquecido. He añadido mi directiva personalizada sobre la directiva textAngular. Con la ayuda de mi directiva personalizada, sustituyo los caracteres especiales de la cadena por las etiquetas html span con param contenteditable=''false'' , pero este parámetro no funciona y el contenido aún es editable.

En este caso tengo dos preguntas:

1. ¿Cómo puedo configurar un HTML no editable dentro de la directiva textAngular del contenido?
2. ¿Cómo puedo concatear mi variable con la cadena que deseo? (Actualmente, siempre concatena hasta el final de la cadena)

Aprecio cualquier ayuda.

Plunker con mi problema

Mi directiva personalizada:

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>

Answer 1

1) No puede simplemente usar contenteditable=''false'' atributo contenteditable=''false'' en sus elementos, ya que textAngular lo textAngular . Para habilitarlo en el pasado, tuvimos que descargar textAngular-sanitize.min.js y editar la matriz de atributos permitidos. Esto comienza con J=f("abbr,align, simplemente debe agregar contenteditable a esta lista separada por comas.

2) Para insertar la plantilla en la posición del cursor, puede usar el método wrapSelection dentro del alcance del editor , algo como esto podría funcionar:

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

Aquí hay un plnkr de trabajo .

PD: textAngular parece ser un buen editor, pero carece de algunas funcionalidades y personalmente, no me gusta su documentación. Tienes que reunir mucha información a través de los temas en el github. Ahora se cambió a otros editores alternativos, pero posiblemente volveremos a hacerlo en el futuro.