javascript-在contenteditable中插入自定义标签

2019-10-25 11:35:29 阅读：442 来源： 互联网

标签：contenteditable css html javascript

我有这个：

<input type="button" value="B" onclick="document.execCommand('bold', false, '');" />
<div contenteditable="true">Lorem Ipsum...</div>

document.execCommand可以正常工作.但是,如果要添加自定义标签(如< customtag>< / customtag>)怎么办？围绕所选文字？

该按钮需要将标签添加到选定的文本,或者如果已经包含标签,则将其删除.

是否有一个仅HTML的解决方案.如果没有,有没有纯Javascript解决方案？

解决方法:

您需要insertHTML命令：

基本用法：

<input type="button" value="html" onclick="document.execCommand('insertHTML', false, '<customtag>'+window.getSelection()+'</customtag>');" />

要打开和关闭自定义标签,需要更复杂的逻辑：

<input type="button" value="html" onclick="document.execCommand('insertHTML', false, toggle(window.getSelection());" />

function toggle(txt)
{
    return is_enclosed_within_a_customtag(txt)
         ? strip_custom_tag_off(txt)
         : "<customtag>"+txt+"</customtag>"
    ;   
}

更新资料

函数is_enclosed_within_a_customtag至少可以这样实现：

function is_enclosed_within_a_customtag(txt)
{
    return txt.startsWith("<customtag>") && txt.endsWith("</customtag>");
}

…,并通过传递window.getSelection().toString()作为参数来调用.

标签：contenteditable,css,html,javascript
来源： https://codeday.me/bug/20191025/1928463.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-在contenteditable中插入自定义标签