很難定義「簡單」。
有很多rich text editors哪些按鈕你想要顯示在工具欄中。
看看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'
]
})