Очень простой редактор Rich Text / WYSIWYG
Я ищу очень очень простой редактор для моего форума.
Меня интересуют только основные функции, такие как полужирный, курсив, подчеркивание, цитата - ни больше, ни меньше. Еще одна важная особенность - когда пользователь вставляет форматированный текст в область текста, все теги должны быть удалены.
Я знаком с TinyMCE, CKEditor и некоторыми другими "большими" редакторами, но я думаю, что излишне реализовывать такую большую "основу" для таких базовых функций.
Я просмотрел "Похожие вопросы", но ни один из предложенных редакторов не настолько прост, как мне кажется...
Ребята, вы знаете что-нибудь?
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'
]
})