使用jQuery使选定的文本变为粗体/粗体

Question

我正在尝试使文本编辑器可以使用jQuery而不使用任何HTML的粗体，斜体和下划线文本

问题是我无法将所选文本设为粗体，控制台日志输出“ execCommand不是函数”，我做错了吗？ 我如何才能实现自己的目标？

这是我的代码：

(function ($) {
    $.fn.text_editor = function(options) {
        this.each(function() {
            var buttons = {
                buttons: ['bold', 'italic', 'underline']
            };
            var parametres = $.extend(buttons, options);
            // generated html 
                $("body").html("<div class=\"container\">");
                    $("body").append("<h1 style=\"padding-left:55px;\">text editor</h1>");
                    $("body").append("<textarea rows=\"10\" cols=\"50\"></textarea>");
                    $("body").append("<br>");
                        $("body").append("<div class=\"buttons\"");
                            $("body").append("<button id=\"bold\">gras</button>");
                            $("body").append("<button id=\"italic\">italic</button>");
                            $("body").append("<button id=\"barre\">underline</button>");

            // js
            $("bold").execCommand("bold");
            $("italic").execCommand("italic");
            $("underline").execCommand("underline");
            console.log($("bold"));
        });
    };
})(jQuery);

$(document).ready(function() {
    $("textarea").text_editor()
});

Answer 1

经过一番搜索，我发现了这篇文章。

还有这个密码笔 https://codepen.io/souporserious/pen/xBpEj

希望这可以帮助。

 $('.wysiwyg-controls a').on('click', function(e) { e.preventDefault(); document.execCommand($(this).data('role'), false); });

 $controls-color: #ADB5B9; $border-color: #C2CACF; * { box-sizing: border-box; } .wysiwyg-editor { display: block; width: 400px; margin: 100px auto 0; } .wysiwyg-controls { display: block; width: 100%; height: 35px; border: 1px solid $border-color; border-bottom: none; border-radius: 3px 3px 0 0; background: #fff; a { display: inline-block; width: 35px; height: 35px; vertical-align: top; line-height: 38px; text-decoration: none; text-align: center; cursor: pointer; color: $controls-color; } [data-role="bold"] { font-weight: bold; } [data-role="italic"] { font-style: italic; } [data-role="underline"] { text-decoration: underline; } } [class^="menu"] { position: relative; top: 48%; display: block; width: 65%; height: 2px; margin: 0 auto; background: $controls-color; &:before { @extend [class^="menu"]; content: ''; top: -5px; width: 80%; } &:after { @extend [class^="menu"]; content: ''; top: 3px; width: 80%; } } .menu-left { &:before, &:after { margin-right: 4px; } } .menu-right { &:before, &:after { margin-left: 4px; } } .wysiwyg-content { max-width: 100%; width: 100%; height: auto; padding: 12px; resize: both; overflow: auto; font-family: Helvetica, sans-serif; font-size: 12px; border: 1px solid $border-color; border-radius: 0 0 3px 3px; background: #F2F4F6; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wysiwyg-editor"> <div class="wysiwyg-controls"> <a href='#' data-role='bold'>B</a> <a href='#' data-role='italic'>I</a> <a href='#' data-role='underline'>U</a> <a href='#' data-role='justifyleft'><i class="menu-left"></i></a> <a href='#' data-role='justifycenter'><i class="menu-center"></i></a> <a href='#' data-role='justifyright'><i class="menu-right"></i></a> </div> <div class="wysiwyg-content" contenteditable> <b>Let's make a statement!</b> <br> <i>This is an italicised sentence.</i> <br> <u>Very important information.</u> </div> </div>

注意： 这不是我的代码 。

Answer 2

execCommand是一个实验性功能，它是文档功能，而不是html元素。 但是，您可以按以下方式调用此函数-

$("#bold").document.execCommand("bold");
$("#italic").document.execCommand("italic");
$("#underline").document.execCommand("underline");

Answer 3

现在这不是JQuery，而是标记了JavaScript，所以这是我从W3Schools修改的简单JavaScript。 这里的HTML只是粗体的文本。 您可以使用下划线和斜体

text-decoration: underline;

和

font-style: italic;

在.mystyle中。 无论如何，这里是加粗的代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
    font-weight: bold;
}
</style>
</head>
<body>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
text to bold.
</div>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("mystyle");
}
</script>

</body>
</html>

使用jQuery使选定的文本变为粗体/粗体

问题描述

3 个解决方案

解决方案1
0 2018-06-30 10:03:06

解决方案2
0 2018-06-30 10:10:20

解决方案3
0 2018-06-30 10:11:53

使用jQuery使选定的文本变为粗体/粗体

问题描述

3 个解决方案

解决方案1 0 2018-06-30 10:03:06

解决方案2 0 2018-06-30 10:10:20

解决方案3 0 2018-06-30 10:11:53

解决方案1
0 2018-06-30 10:03:06

解决方案2
0 2018-06-30 10:10:20

解决方案3
0 2018-06-30 10:11:53