How to change Google Pagedown editor to use fonts?

Question

We use the pagedown editor with the AngularJS directive. I think this is the same as when overflowing the stack:

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

We would like to change this to use a font — an awesome set of icons instead of icons, but we don’t know how to do this.

Does anyone have any ideas on what I need to do to use font-awesome instead of the default icons.

Thank,

Answer 1

PageDown does not currently support customizing the display of the button bar.

So, you have three options left:

• . - .
• fork Markdown.Editor.js
• HTML , ,

1:

PageDown - . , , .

CSS ( SO):

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

Plunker

2: Markdown.Editor.js:

:

• makeButton, 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, :

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;
}

Plunker

3: HTML:

Markdown.Editor, / .

, -awesome span: angular 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;
}

Plunker

Answer 2

font-awesome version PageDown