Очень простой редактор Rich Text / WYSIWYG - PullRequest
Новая
       30

Очень простой редактор Rich Text / WYSIWYG

0 голосов
/ 05 октября 2011

Я ищу очень очень простой редактор для моего форума.

Меня интересуют только основные функции, такие как полужирный, курсив, подчеркивание, цитата - ни больше, ни меньше. Еще одна важная особенность - когда пользователь вставляет форматированный текст в область текста, все теги должны быть удалены.

Я знаком с TinyMCE, CKEditor и некоторыми другими «большими» редакторами, но я думаю, что это слишком много, чтобы реализовать такой большой «каркас» для таких основных функций.

Я просмотрел "Похожие вопросы", но ни один из предложенных редакторов не настолько прост, как мне кажется ...

Ребята, вы что-нибудь знаете?

1 Ответ

0 голосов
/ 22 декабря 2016

Трудно определить «простоту».

Существует множество расширенных текстовых редакторов , которые предоставляют возможность отображения кнопок на панели инструментов.

Посмотрите на этот самый маленький пример редактора тестов с основными функциями: полужирный, курсив и подчеркивание с помощью горячих клавиш.

Или посмотрите другой пример 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'
  ]
    })
...