开发者

Very very simple Rich Text / WYSIWYG Editor

开发者 https://www.devze.com 2023-04-11 12:57 出处:网络
Im looking for a very very simple editor for my forum. Im only interested in basic functions such as bold, italic, underline, blockquote - nothing more, nothing less.

Im looking for a very very simple editor for my forum.

Im only interested in basic functions such as bold, italic, underline, blockquote - nothing more, nothing less. Another important feature is when the user is pasting formatted text into the textarea all tags should be stripped.

Im familiar with TinyMCE, CKEditor an开发者_开发知识库d a some of the other "big" editors, but I think its overkill to implement such a big "framework" for such basic functions..

Ive looked through the "Similar questions" but none of the suggested editors are simple enough i think..

Do you guys know any?


It is difficult to define the "simplicity".

There are many rich text editors which give the facility of what buttons you want to display in the toolbar.

Have a look on this smallest test editor example with basic features: bold, italic, and underline via hot keys.

Or check another example of execCommands that you can use to make your own simplified minified text editor. You can control the design of buttons toolbar etc. It has list of commands and this very small code to turn them into rich text editor.

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'
  ]
    })
0

精彩评论

暂无评论...
验证码 换一张
取 消