使用 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

经过一番搜索，我偶然发现了this的文章。

还有这个代码笔。 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");