富文本框

[ZhengXingchi]

参考文献

react-contenteditable React组件实现一个内容可编辑的div

仅用1行核心JS代码实现一个轻量级富文本编辑器 | 拓跋的前端客栈

[ZhengXingchi]

pell

the simplest and smallest WYSIWYG text editor for web, with no dependencies 一个短小精悍没有任何依赖的浏览器富文本编辑器 readme中有各个富文本编辑器的对比 jaredreich/pell的github地址

相关解析简单实现JavaScript 富文本编辑器的方法

[ZhengXingchi]

关于焦点

这篇文章很有启发意义javascript – focus()在边缘浏览器中不起作用

[ZhengXingchi]

关于评论框带微博表情

(仿多说留言、评论框，带微博表情) 仿多说留言、评论框，带微博表情。 查看演示

[ZhengXingchi]

楼中楼的评论系统

原贴 如何实现一个楼中楼的评论系统 如何实现一个楼中楼的评论系统

[ZhengXingchi]

在textarea指定位置插入内容

在 textarea中指定位置插入内容

[ZhengXingchi]

移动光标到末尾

/把光标移到末尾
msgTextLastPos(obj) {
// 解决浏览器的兼容问题，做如下条件判断
if (window.getSelection) {
obj.focus();
let range = window.getSelection();
range.selectAllChildren(obj);
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {
let range = document.selection.createRange();
range.moveToElementText(obj);
range.collapse(false);//光标移至最后
range.select();
}
}

参考自富文本中 移动光标到末尾

本来想参考 focus到文本框尾部上面趁你还年轻的答案，但是没有效果。

const el = document.getElementById('richTextEditor');
const range = document.createRange();
const sel = window.getSelection();
console.log(document.activeElement);
const tailIndex = el.childNodes.length;
const tailNode = el.childNodes[tailIndex - 1];
range.setStart(tailNode, tailNode.length);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

但是对于和经测试$(this).val($(this).val())在chrome下也是有效的 也可以用setSelectionRange<a href="https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/">参考使用方法</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ZhengXingchi"><img src="https://avatars.githubusercontent.com/u/31958613?v=4" />ZhengXingchi</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <h1>插入的image如何限定宽高</h1> <p><code>insertImage</code>这个命令只能指定路径，无法指定宽高，用<code>insertHTML</code></p> <pre><code>document.execCommand('insertHtml' , false , '<img src="'+src+'" width="20px" height="20px">');</code></pre> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>