Есть 4 подхода, которые вы можете принять
- Создать текстовую область. Позвольте пользователю изменять контент. При нажатии клавиши или нажатии кнопки
insertHtml для предварительного просмотра div. Trix использует тот же подход, но программно.
- Добавьте немного текстовой области. Используйте какой-нибудь процессор уценки, который может визуализировать содержимое textarea.
- Обрабатывать каждое движение мигающего курсора и реализовывать что-то вроде Google docs, в котором не используются команды execCommands. Я считаю, что quilljs также не использует execCommands.
- Вы можете использовать execCommands, которые поддерживаются практически всеми современными браузерами. Вот самый простой пример . Или проверьте этот пример, который использует этот небольшой код для запуска набора 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'
]
})