我们正在使用带有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而不是默认图标。
谢谢，
答案 0 :(得分：6)
目前，PageDown编辑器不支持按钮栏渲染的任何自定义。
所以你有三个选择：
Markdown.Editor.js PageDown编辑器使用一个精灵图像来存储所有按钮及其悬停和禁用状态。因此，您可以修改它以使用自定义按钮。
然后你只需要改变你的CSS来使用图标（这里我使用了SO编辑器按钮）：
.wmd-button > span {
background-image: url("http://cdn.sstatic.net/stackoverflow/img/wmd-buttons.svg");
}
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;
}
此解决方案不需要更改Markdown.Editor，但启用/禁用状态处理将不起作用。
基本上你必须在span之后的角度指令中为生成的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;
}
答案 1 :(得分：1)
您可以使用PageDown库的font-awesome version