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. 創建一個textarea。 讓用戶修改內容。 在按鍵或按鈕上單擊insertHtml以預覽div。 Trix使用相同的方法，但以編程方式。
2. 添加一些textarea。 使用一些可以渲染textarea內容的降價處理器。
3. 處理閃爍光標的每個動作，並實現不使用execCommands的Google文檔。 我相信quilljs也不使用execCommands。
4. 您可以使用幾乎所有現代瀏覽器都支持的execCommands。 這是最簡單的例子 。 或者查看此示例， 該示例使用此小代碼運行一組execCommands以創建富文本編輯器。 您可以進一步簡化它。

例

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