JavaScript WYSIWYG Rich Text Editor

Question

What is the main method for styling text inside input fields? Can you show me the simplest example of how to change the text color separately?

Answer 1

Very simple:

window.document.designMode = "On";

document.execCommand(‘ForeColor’, false, ‘red’);

More details:

http://shakthydoss.com/javascript/html-rich-text-editor/

and then

http://shakthydoss.com/javascript/stxe-html-rich-text-editor/

Answer 2

There are 4 approaches you can take.

• Create a text box. Let the user change the content. When you press or press a key, click insertHtmlto preview the div. Trix uses the same approach, but programmatically.
• . , textarea.
• - Google, 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'
  ]
    })