JavaScript WYSIWYG Rich Text Editor

Question

Quelle est la méthode de base pour styliser le texte dans les boîtes de saisie? Pouvez-vous me montrer l'exemple le plus simple de la façon de changer la couleur du texte séparément?

Answer 1

Très simplement:

window.document.designMode = “On”; 

document.execCommand(‘ForeColor’, false, ‘red’); 

Pour plus de détails:

http://shakthydoss.com/javascript/html-rich-text-editor/

puis

http://shakthydoss.com/javascript/stxe-html-rich-text-editor/

Answer 2

Il y a 4 approches que vous pouvez adopter

1. Créez une zone de texte. Laissez l'utilisateur modifier le contenu. Appuyez sur la touche ou sur le bouton insertHtml pour prévisualiser div. Trix utilise la même approche mais par programmation.
2. Ajouter un textarea. Utilisez un processeur markdown qui peut rendre le contenu de textarea.
3. Gérez chaque mouvement de curseur clignotant et implémentez quelque chose comme Google docs qui n'utilise pas execCommands. Je crois que quilljs n'utilise pas execCommands.
4. Vous pouvez utiliser execCommands qui sont pris en charge par presque tous les navigateurs modernes. Voici le plus simple example. Ou vérifiez l'exemple this qui utilise ce petit code pour exécuter un ensemble de execCommands pour créer un éditeur de texte enrichi. Vous pouvez le simplifier plus.

Exemple

angular.module("myApp", []) 
    .directive("click", function() { 
     return { 
      restrict: "A", 
      link: function (scope, element, attrs) { 
       element.bind("click", function() { 
        scope.$evalAsync(attrs.click); 
       }); 
      } 
     }; 
    }) 
    .controller("Example", function ($scope) { 
     $scope.supported = function (cmd) { 
      var css = !!document.queryCommandSupported(cmd.cmd) ? "btn-succes" : "btn-error" 
      return css 
     }; 
     $scope.icon = function (cmd) { 
      return (typeof cmd.icon !== "undefined") ? "fa fa-" + cmd.icon : ""; 
     }; 
     $scope.doCommand = function (cmd) { 
      if ($scope.supported(cmd) === "btn-error") { 
       alert("execCommand(“" + cmd.cmd + "”)\nis not supported in your browser"); 
       return; 
      } 
      val = (typeof cmd.val !== "undefined") ? prompt("Value for " + cmd.cmd + "?", cmd.val) : ""; 
      document.execCommand(cmd.cmd, false, (cmd.val || "")); 
     } 
     $scope.commands = commands; 
     $scope.tags = [ 
    'Bootstrap', 'AngularJS', 'execCommand' 
    ] 
    })