richtextbox - 非常非常简单的富文本/所见即所得编辑器

Question

我正在为我的论坛寻找一个非常简单的编辑器。

我只对粗体、斜体、下划线、块引用等基本功能感兴趣——仅此而已。另一个重要功能是当用户将格式化文本粘贴到文本区域时，所有标签都应该被剥离。

我熟悉 TinyMCE、CKEditor 和其他一些“大”编辑器，但我认为为这些基本功能实现如此大的“框架”有点矫枉过正..

我已经查看了“类似问题”，但我认为没有一个建议的编辑器足够简单。

大家知道吗？

Answer 1

很难定义“简单”。

有许多富文本编辑器可以方便您在工具栏中显示哪些按钮。

看看这个最小的测试编辑器示例，它具有基本功能：粗体、斜体和通过热键加下划线。

或者查看另一个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'
  ]
    })