使用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");

Answer 3

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

下划线和斜体

String key = datasnapshot.getKey();
    String name = datasnapshot.child('display_name').getValue().toString();
    User user = new User(name, key);

＆

text-decoration: underline;

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

font-style: italic;