JavaScript WYSIWYGリッチテキストエディタ

Question

入力ボックス内のテキストをスタイリングする基本的な方法は何ですか？テキストの色を別々に変更する方法の最も単純な例を私に教えてください。

Answer 1

非常に単純：詳細については

window.document.designMode = “On”; 

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

：

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

、その後

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

Answer 2

あなたが

を採用することができます4つのアプローチがあります。

1. テキストエリアを作成します。ユーザーがコンテンツを変更できるようにします。キーを押すかボタンを押してinsertHtmlをクリックしてdivをプレビューします。 Trixは同じアプローチを使用しますが、プログラム的には使用します。
2. 一部のテキストエリアを追加してください。テキストエリアの内容をレンダリングできるマークダウンプロセッサを使用します。
3. 点滅カーソルが動くたびに処理し、execCommandsを使用しないGoogleドキュメントのようなものを実装します。私はquilljsもexecCommandsを使用しないと信じています。
4. ほとんどの最新のブラウザーでサポートされているexecCommandsを使用できます。ここでは最も簡単なexampleです。または、小さなコードを使用してexecCommandsのセットを実行してリッチテキストエディタを作成する例を確認するthisをチェックしてください。あなたはもっと簡単にすることができます。

例

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' 
    ] 
    })