JavaScript 所见即所得的富文本编辑器答案

【问题标题】：JavaScript WYSIWYG Rich Text EditorJavaScript 所见即所得的富文本编辑器
【发布时间】：2016-12-23 16:03:25
【问题描述】：

在输入框中设置文本样式的基本方法是什么？你能告诉我如何分别改变文本颜色的最简单的例子吗？

【问题讨论】：

你想从头开始创建一个吗？

【解决方案1】：

很简单：

window.document.designMode = “On”;

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

然后

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

【讨论】：

两个链接都坏了

【解决方案2】：

您可以采用 4 种方法

创建一个文本区域。让用户修改内容。在按键或按钮上单击insertHtml 预览 div。 Trix 使用相同的方法，但以编程方式。
添加一些文本区域。使用一些可以渲染 textarea 内容的 markdown 处理器。
处理闪烁光标的每一次移动，并实现不使用 execCommands 的 Google 文档之类的东西。我相信 quilljs 也不使用 execCommands。
您可以使用几乎所有现代浏览器都支持的 execCommands。这是最简单的example。或者查看this 示例，它使用这个小代码来运行一组 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'
  ]
    })

【讨论】：