文章/答案/技术大牛

发布

社区首页 >问答首页 >如何检测可按下键可编辑的格式化文本(箭头键)

问如何检测可按下键可编辑的格式化文本(箭头键)
EN

Stack Overflow用户

提问于 2021-12-29 01:03:24

回答 1查看 102关注 0票数 0

祝您愉快，我希望使用箭头键检测div内容中的文本格式，并突出显示我的格式按钮。

例如:使用箭头键，我的光标在“这是我”这个词中。如果选定的字母/单词是格式化的，我希望自动突出显示粗体、删除和字体颜色按钮。我该怎么做？

我希望有人能帮忙。

谢谢!

        $(function () {
            $('#editor').on('keydown', function (event) {
                if (
                    event.keyCode == 37 // arrowLeft is clicked
                    || event.keyCode == 38 // arrowUp is clicked
                    || event.keyCode == 39 // arrowRight is clicked
                    || event.keyCode == 40 // arrowDown is clicked
                ) {
                    // code here ...

                }
          });
          
        });

ul li {
 display : inline-block;
}
.btn-decorations .btn-color {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    position: relative;
}
.btn-color-blue {
    background-color: blue;
}

.btn-color-red {
    background-color: red;
}

.btn-color-black {
    background-color: black;
}

.on {
    border: 3px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <p id="editor" contenteditable="true"><font><strike><b>This is me.</b></strike></font> Some test text for you to select</p>
    </div>
                        <div class="btn-area btn-area-center">
                            <ul class="btn-decorations">
                                <li>
                                    <button type="button" class="btn-ic on" id="addBold">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
                                            <g id="ic-bold" class="ic-bold" transform="translate(-5.5 -3.5)">
                                                <path id="path-1" class="path-1" data-name="path-1" d="M6,4h7.333A3.844,3.844,0,0,1,17,8a3.844,3.844,0,0,1-3.667,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                                <path id="path-2" class="path-2" data-name="path-2" d="M6,12h8.308A3.855,3.855,0,0,1,18,16a3.855,3.855,0,0,1-3.692,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                            </g>
                                        </svg>
                                    </button>
                                </li>
                                <li>
                                    <button type="button" class="btn-ic on" id="addStrike">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="16.5" viewBox="0 0 12.5 16.5">
                                            <g id="ic-strike" class="ic-strike" data-name="ic-strike" transform="translate(-13.46 -4.751)">
                                                <path id="path-1" data-name="path-1" d="M25.469,12.743H19.731a7.047,7.047,0,0,1-2.227-.827A3.9,3.9,0,0,1,16.28,10.8a3.047,3.047,0,0,1-.524-1.76,3.206,3.206,0,0,1,.32-1.406A3.651,3.651,0,0,1,17.521,6.1a4.188,4.188,0,0,1,2.119-.58,3.916,3.916,0,0,1,1.784.425,4.263,4.263,0,0,1,1.548,1.371.229.229,0,0,0,.336.05A.271.271,0,0,0,23.354,7h0a4.755,4.755,0,0,0-1.725-1.526A4.366,4.366,0,0,0,19.64,5a4.611,4.611,0,0,0-3.006,1.117,4.019,4.019,0,0,0-.983,1.277,3.757,3.757,0,0,0-.374,1.643,3.594,3.594,0,0,0,.616,2.065A4.869,4.869,0,0,0,18,12.743H13.95a.259.259,0,0,0,0,.516h5.739a6.91,6.91,0,0,1,2.267.832,3.794,3.794,0,0,1,1.2,1.112,3.1,3.1,0,0,1,.51,1.76,3.209,3.209,0,0,1-.32,1.406A3.651,3.651,0,0,1,21.9,19.9a4.188,4.188,0,0,1-2.119.58A3.916,3.916,0,0,1,18,20.06a4.264,4.264,0,0,1-1.548-1.371.229.229,0,0,0-.336-.05.271.271,0,0,0-.046.362,4.756,4.756,0,0,0,1.725,1.526A4.367,4.367,0,0,0,19.78,21a4.611,4.611,0,0,0,3.006-1.117,4.017,4.017,0,0,0,.983-1.277,3.756,3.756,0,0,0,.374-1.643,3.642,3.642,0,0,0-.6-2.06,4.742,4.742,0,0,0-2.092-1.644H25.47a.259.259,0,0,0,0-.516Z" fill="#777" stroke="#777" stroke-width="0.5"/>
                                            </g>
                                        </svg>
                                    </button>
                                </li>
                                <li>
                                    <button type="button" id="addColorBlack" class="btn-add-color on">
                                        <span class="btn-color btn-color-black "></span>
                                    </button>
                                </li>
                                <li>
                                    <button type="button" id="addColorBlue" class="btn-add-color">
                                        <span class="btn-color btn-color-blue"></span>
                                    </button>
                                </li>
                                <li>
                                    <button type="button" id="addColorRed" class="btn-add-color">
                                        <span class="btn-color btn-color-red"></span>
                                    </button>
                                </li>
                            </ul>
                        </div>

javascript

html

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-29 02:05:35

请考虑以下几点。

$(function() {
  $('#editor').on('keydown', function(event) {
    if (event.keyCode >= 37 && event.keyCode <= 40) {
      var el, active = [];
      if (document.selection) {
        el = document.selection.createRange().parentElement();
      } else {
        el = window.getSelection().anchorNode.parentNode;
      }
      while ($(el).prop("nodeName") != "P") {
        active.push($(el).prop("nodeName"));
        el = $(el).parent().get(0);
      }
      console.log(active.join(", "));
    }
  });
});

ul li {
  display: inline-block;
}

.btn-decorations .btn-color {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  position: relative;
}

.btn-color-blue {
  background-color: blue;
}

.btn-color-red {
  background-color: red;
}

.btn-color-black {
  background-color: black;
}

.on {
  border: 3px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="editor" contenteditable="true">
    <font><strike><b>This is me.</b></strike></font> Some test text for you to select</p>
</div>
<div class="btn-area btn-area-center">
  <ul class="btn-decorations">
    <li>
      <button type="button" class="btn-ic on" id="addBold">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
                                            <g id="ic-bold" class="ic-bold" transform="translate(-5.5 -3.5)">
                                                <path id="path-1" class="path-1" data-name="path-1" d="M6,4h7.333A3.844,3.844,0,0,1,17,8a3.844,3.844,0,0,1-3.667,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                                <path id="path-2" class="path-2" data-name="path-2" d="M6,12h8.308A3.855,3.855,0,0,1,18,16a3.855,3.855,0,0,1-3.692,4H6Z" transform="translate(0)" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
                                            </g>
                                        </svg>
                                    </button>
    </li>
    <li>
      <button type="button" class="btn-ic on" id="addStrike">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12.5" height="16.5" viewBox="0 0 12.5 16.5">
                                            <g id="ic-strike" class="ic-strike" data-name="ic-strike" transform="translate(-13.46 -4.751)">
                                                <path id="path-1" data-name="path-1" d="M25.469,12.743H19.731a7.047,7.047,0,0,1-2.227-.827A3.9,3.9,0,0,1,16.28,10.8a3.047,3.047,0,0,1-.524-1.76,3.206,3.206,0,0,1,.32-1.406A3.651,3.651,0,0,1,17.521,6.1a4.188,4.188,0,0,1,2.119-.58,3.916,3.916,0,0,1,1.784.425,4.263,4.263,0,0,1,1.548,1.371.229.229,0,0,0,.336.05A.271.271,0,0,0,23.354,7h0a4.755,4.755,0,0,0-1.725-1.526A4.366,4.366,0,0,0,19.64,5a4.611,4.611,0,0,0-3.006,1.117,4.019,4.019,0,0,0-.983,1.277,3.757,3.757,0,0,0-.374,1.643,3.594,3.594,0,0,0,.616,2.065A4.869,4.869,0,0,0,18,12.743H13.95a.259.259,0,0,0,0,.516h5.739a6.91,6.91,0,0,1,2.267.832,3.794,3.794,0,0,1,1.2,1.112,3.1,3.1,0,0,1,.51,1.76,3.209,3.209,0,0,1-.32,1.406A3.651,3.651,0,0,1,21.9,19.9a4.188,4.188,0,0,1-2.119.58A3.916,3.916,0,0,1,18,20.06a4.264,4.264,0,0,1-1.548-1.371.229.229,0,0,0-.336-.05.271.271,0,0,0-.046.362,4.756,4.756,0,0,0,1.725,1.526A4.367,4.367,0,0,0,19.78,21a4.611,4.611,0,0,0,3.006-1.117,4.017,4.017,0,0,0,.983-1.277,3.756,3.756,0,0,0,.374-1.643,3.642,3.642,0,0,0-.6-2.06,4.742,4.742,0,0,0-2.092-1.644H25.47a.259.259,0,0,0,0-.516Z" fill="#777" stroke="#777" stroke-width="0.5"/>
                                            </g>
                                        </svg>
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorBlack" class="btn-add-color on">
                                        <span class="btn-color btn-color-black "></span>
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorBlue" class="btn-add-color">
                                        <span class="btn-color btn-color-blue"></span>
                                    </button>
    </li>
    <li>
      <button type="button" id="addColorRed" class="btn-add-color">
                                        <span class="btn-color btn-color-red"></span>
                                    </button>
    </li>
  </ul>
</div>

这将扩展到来自How to detect when a child-element of a contenteditable DIV is edited via keyboard?的代码。

如果是箭头键，则需要检查父元素是否为P。如果不是，我们需要迭代每个父元素并记录哪些元素被应用到文本节点。

一旦有了这些按钮，就可以高亮显示相应的按钮。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70514143

复制

相似问题

问如何检测可按下键可编辑的格式化文本(箭头键)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测可按下键可编辑的格式化文本(箭头键)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测可按下键可编辑的格式化文本(箭头键)
EN