Question

当我输入我的textarea时，一旦设定了超过4个字符，它就会启用预览标签。

如果我单击我的编辑器按钮示例按钮 - 粗体显示文本，如**strong text**，但即使有超过4个字符的预览选项卡也未启用。

目前仅在keyup

时启用

问题：如何确定是否点击了编辑器按钮设置了多少个字符，如果大于4则将启用标签。

$('#tab-preview').hide();

$("#textarea_message").on('keyup', function(e){
    if ($(this).val().length >= "4") {
        $('#tab-preview').show();
    }

    if ($(this).val().length < "4") {
        $('#tab-preview').hide();
    }
});

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <form id="form-ask">

        <div class="form-group">
          <button type="button" id="button-bold" class="btn btn-default" title="Bold"><i class="fa fa-bold" aria-hidden="true"></i></button>
          <button type="button" id="button-italic" class="btn btn-default" title="Italic"><i class="fa fa-italic" aria-hidden="true"></i></button>
          <button type="button" id="button-quote" class="btn btn-default" title="Quote"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
          <button type="button" id="button-code" class="btn btn-default" title="Code"><i class="fa fa-quote-left" aria-hidden="true"></i></button>
          <button type="button" id="button-insert-image" data-toggle="modal" data-target="#insert-image" class="btn btn-default" title="Insert Image URL"><i class="fa fa-code" aria-hidden="true"></i>
</button>
          <button type="button" id="button-upload" class="btn btn-default" title="Add Attachment: This can be image or file "><i class="fa fa-file" aria-hidden="true"></i>
 Attach File</button>
        </div>

        <div class="panel ask panel-default">
          <div class="panel-heading">
            <ul class="nav nav-tabs">
              <li class="active"><a data-target="#ask" id="tab-ask" data-toggle="tab"><i class="fa fa-code" aria-hidden="true"></i> Ask Question</a></li>
              <li><a data-target="#preview" id="tab-preview" data-toggle="tab"><i class="fa fa-eye" aria-hidden="true"></i> Preview</a></li>
            </ul>
          </div>
          <div class="panel-body">
            <div class="tab-content">
              <div class="tab-pane fade in active" id="ask">
                <div class="form-group">
                  <textarea id="textarea_message" class="form-control"></textarea>
                </div>
              </div>
              <div class="tab-pane fade" id="preview">
                <div class="preview-message"></div>
              </div>
            </div>
          </div>
        </div>
        <p class="text-muted">Preview Button will be enabled once your question has reached
          4 character or more.</p>


      </form>
    </div>
  </div>
</div>

Answer 1

一种解决方案是添加一个＆＃39;触发器＆＃39;用于按钮上的键盘事件

$('#button-bold').on('click', function(e) {
    markdown_syntax(this.id, "**", "**", 'strong text');
    $("#textarea_message").trigger('keyup');
});

按下编辑器按钮时，预览选项卡不显示

1 个答案: