JavaScript 自定义文本编辑器按钮不起作用

Question

我想将此文本编辑器添加到我的网站，但是当我单击格式按钮时它不起作用。

我注意到如果我在onclick属性中添加加号行： $('#editor1').focus(); 然后按钮将起作用，但是当它聚焦在文本区域时，插入符号将被放置到行的开头而不是结尾，这令人沮丧。 知道为什么会出现这个错误吗？

编辑：为什么undo和redo按钮没有额外的$(...).focus() function

 // If you enable this, the button will work, but put the text to the start of the line which should be at the end of the line.... /* $('#setbold').click(() => { $('#editor1').focus(); document.execCommand('bold'); }); */

 .flex { display: flex; }.flex-row { flex-direction: row; }.flex-col { flex-direction: column; }.gap-2 { gap: 2rem; }.gap-1 { gap: 1rem; }.gap-05 { gap: .5rem; }.w-50 { width: 50%; } [contentEditable=true]:empty:not(:focus):before{ content:attr(data-text) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex flex-col w-50"> <div class="flex flex-col border-soft" style="border: 1px solid #E4E6EF;"> <div id="te__con" class="flex flex-row flex-align-c gap-2 padding-05" style="border-bottom: 1px solid #E4E6EF;"> <div class="flex flex-row flex-align-c gap-05"> <span class="te__ftstyle italic" onclick="document.execCommand('italic');"> <span>I</span> </span> <span class="te__ftstyle bold" id="setbold" onclick="document.execCommand('bold');" > <span>B</span> </span> <span class="te__ftstyle underline" onclick="document.execCommand('underline');"> <span>U</span> </span> <span class="te__ftstyle strikethrough" onclick="document.execCommand( 'strikethrough',false,null);" > <span>S</span> </span> </div> <div class="flex flex-row flex-align-c gap-05"> <span class="te__ftstyle redo-apply" onclick="document.execCommand( 'redo',false,null);"> <span>Redo</span> </span> <span class="te__ftstyle undo-apply" onclick="document.execCommand( 'undo',false,null);"> <span>Undo</span> </span> </div> <div class="flex flex-row flex-align-c gap-05"> <span class="te__ftstyle orderedlist" onclick="document.execCommand('insertOrderedList', false, null);"> <span>OL</span> </span> <span class="te__ftstyle unorderedlist" onclick="document.execCommand('insertUnorderedList',false, null)"> <span>UL</span> </span> </div> </div> <div id="editor1" class="small te__editor padding-1 outline-none text-secondary" style="height: 8rem; max-height: 8rem; overflow-y: scroll" contenteditable="true" data-text="Write here...."></div> </div> </div>

Answer 1

如果我使用已弃用的execCommand ，我会这样做

 $('button[data-func]').click(function(){ document.execCommand( $(this).data('func'), false); });

 .editor { border: 1px solid grey; height: 8rem; max-height: 8rem; overflow-y: scroll; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" data-func="bold">B</button> <button type="button" data-func="italic">I</button> <button type="button" data-func="underline">U</button> <div class="editor" contenteditable></div>