javascript - 如何更改 Google Pagedown 编辑器以使用字体真棒图标？

Question

我们正在使用带有 AngularJS 指令的 pagedown 编辑器。我相信这与堆栈溢出中使用的相同：

angular.module("ui.pagedown", [])
.directive("pagedownEditor", function ($compile, $timeout, $window, $q) {
    var nextId = 0;
    var converter = Markdown.getSanitizingConverter();
    Markdown.Extra.init(converter, mdExtraOptions);

    converter.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    return {
        restrict: "E",
        scope: {
            content: "=",
            showPreview: "@",
            help: "&",
            insertImage: "&"
        },
        link: function (scope, element, attrs) {

            var editorUniqueId;

            if (attrs.id == null) {
                editorUniqueId = nextId++;
            } else {
                editorUniqueId = attrs.id;
            }

            // just hide the preview, we still need it for "onPreviewRefresh" hook
            var previewHiddenStyle = scope.showPreview == "false" ? "display: none;" : "";

            var newElement = $compile(
                '<div>' +
                    '<div class="wmd-panel">' +
                            '<div id="wmd-button-bar-' + editorUniqueId + '"></div>' +
                            '<textarea class="wmd-input" id="wmd-input-' + editorUniqueId + '" ng-model="content"></textarea>' +
                    '</div>' +
                    '<div id="wmd-preview-' + editorUniqueId + '" class="pagedown-preview wmd-panel wmd-preview" style="' + previewHiddenStyle + '"></div>' +
                '</div>')(scope);

            // html() doesn't work
            element.append(newElement);

            var help = angular.isFunction(scope.help) ? scope.help : function () {
                // redirect to the guide by default
                $window.open("http://daringfireball.net/projects/markdown/syntax", "_blank");
            };

            var editor = new Markdown.Editor(converter, "-" + editorUniqueId, {
                handler: help
            });

            var editorElement = angular.element(document.getElementById("wmd-input-" + editorUniqueId));

            //add watch for content
            if(scope.showPreview != "false") {
                scope.$watch('content', function () {
                    editor.refreshPreview();
                });
            }
            editor.hooks.chain("onPreviewRefresh", function() {
                // wire up changes caused by user interaction with the pagedown controls
                // and do within $apply
                $timeout(function() {
                    scope.content = editorElement.val();
                });
            });

            if (angular.isFunction(scope.insertImage)) {
                editor.hooks.set("insertImageDialog", function(callback) {
                    // expect it to return a promise or a url string
                    var result = scope.insertImage();

                    // Note that you cannot call the callback directly from the hook; you have to wait for the current scope to be exited.
                    // https://code.google.com/p/pagedown/wiki/PageDown#insertImageDialog
                    $timeout(function() {
                        if (!result) {
                            // must be null to indicate failure
                            callback(null);
                        } else {
                            // safe way to handle either string or promise
                            $q.when(result).then(
                                function success(imgUrl) {
                                    callback(imgUrl);
                                },
                                function error(reason) {
                                    callback(null);
                                }
                            );
                        }
                    });

                    return true;
                });
            }

            editor.run();
        }
    }
})
.directive("pagedownViewer", function ($compile, $sce) {
    var converter = Markdown.getSanitizingConverter();
    Markdown.Extra.init(converter, mdExtraOptions);

    return {
        restrict: "E",
        scope: {
            content: "="
        },
        link: function (scope, element, attrs) {
            var unwatch;
            var run = function run() {
                // stop continuing and watching if scope or the content is unreachable
                if (!scope || (scope.content == undefined || scope.content == null) && unwatch) {
                    unwatch();
                    return;
                }

                scope.sanitizedContent = $sce.trustAsHtml(converter.makeHtml(scope.content));
            };

            unwatch = scope.$watch("content", run);

            run();

            var newElementHtml = "<pre ng-bind-html='sanitizedContent'></pre>";
            var newElement = $compile(newElementHtml)(scope);

            element.append(newElement);
        }
    }
});

http://plnkr.co/edit/1Vxo5UfYpHQdjhWatimU?p=preview

我们想将其更改为使用 font-awesome 图标集而不是使用图标，但我们不确定如何执行此操作。

有没有人知道我需要做些什么才能使它使用 font-awesome 而不是默认图标。

谢谢，

Answer 1

目前，PageDown 编辑器不支持对按钮栏呈现进行任何自定义。

所以你有三个选择：

• 您只需创建自己的按钮图像文件并将其用于图标。但是在这种情况下，您将失去使用 font-awesome 的好处。
• 你分叉并添加必要的修改Markdown.Editor.js
• 您在渲染编辑器并删除旧按钮并添加新按钮后更改生成的 HTML，但某些功能将无法使用，稍后会详细介绍

解决方案 1：创建自定义按钮图像

PageDown 编辑器使用一个精灵图像来存储所有按钮及其悬停和禁用状态。所以你可以修改它来拥有你的自定义按钮。

然后你只需要改变你的 CSS 来使用图标（这里我使用了 SO 编辑器按钮）：

.wmd-button > span {
    background-image: url("http://cdn.sstatic.net/stackoverflow/img/wmd-buttons.svg");
}

普朗克

解决方案2：分叉Markdown.Editor.js：

本质上，您必须更改两种方法：

• makeButton生成 a并应用背景定位的函数span（PageDown 编辑器使用大图像来包含所有按钮及其状态）。在这里你只需要添加 FA 类
• 其中setupButton处理事件连接、悬停效果和禁用状态。在这里，您需要删除启用的状态处理或可选的悬停处理，因为这也可以在您的angular-pagedown.css

所以将的代码makeButton如下所示：

var makeButton = function (id, title, XShift, textOp, faclass) {
        var button = document.createElement("li");
        button.className = "wmd-button";
        button.style.left = xPosition + "px";
        xPosition += 25;
        var buttonImage = document.createElement("span");
        buttonImage.className = "fa " + faclass;
        button.id = id + postfix;
        button.appendChild(buttonImage);
        button.title = title;
        button.XShift = XShift;
        if (textOp)
            button.textOp = textOp;
        setupButton(button, true);
        buttonRow.appendChild(button);
        return button;
    };

setupButton看起来像这样：

    function setupButton(button, isEnabled) {

        var image = button.getElementsByTagName("span")[0];
        if (isEnabled) {
            image.style.color = "#000000"
            if (!button.isHelp) {
                button.onclick = function () {
                    doClick(this);
                    return false;
                }
            }
        }
        else {
            image.style.color = "#c5c5c5"
            button.onmouseover = button.onmouseout = button.onclick = function () { };
        }
    }

最后，您必须在创建按钮时修改 的调用站点makeButton以包含所需的 font-awesome 类：

buttons.bold = makeButton("wmd-bold-button", getString("bold"), "0px", bindCommand("doBold"), "fa-bold");
//...

在 CSS 方面，您需要添加悬停效果并移除背景：

.wmd-button > span {
    text-align: center;
    width: 20px;
    height: 20px;
    display: inline-block;
}
.wmd-button > span:hover {
  background: lightskyblue;
}

普朗克

解决方案3：更改生成的HTML：

此解决方案不需要更改 Markdown.Editor，但启用/禁用状态处理将不起作用。

基本上，您必须在生成span的 : 之后的 angular 指令中添加 font-awesome 类editor.run();：

 var icons = [
          {md: "wmd-bold-button", fa: "fa-bold"},
          //...
          ]

        icons.forEach(function(i) {
          var e = angular.element(document.getElementById(i.md + "-" + editorUniqueId));
          e.find("span").addClass("fa "+ i.fa);
        });

在这种情况下，您还需要稍微更改 CSS：

.wmd-button > span {
     width: 20px;
    height: 20px;
}

.wmd-button > span:hover {
    background: #99cafa;
    width: 20px;
    height: 20px;
}

普朗克

Answer 2

您可以使用字体超棒的 PageDown 库版本