html 富文本编辑器相关--输出选中文字和主动选择文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="app" contenteditable="true">
    <span id="content">12345675345</span>
    <p id="content2">12345675345</p>
</div>

<button id="btn">显示选中文字</button>
</body>
<script>
    selction = window.getSelection();
    const btn = document.querySelector(‘#btn‘);
    const app = document.querySelector(‘.app‘);
    const content = document.querySelector(‘#content‘);
    const content2 = document.querySelector(‘#content2‘);
    app.focus();
    btn.onclick = function () {
        let selction ,text;
        console.log(selction.toString());//输出选中文字
        alert(selction);
    }
    let range = selction.getRangeAt(0);
    range.setStart(selction.anchorNode,selction.anchorOffset);
    range.setEnd(selction.focusNode,selction.focusOffset+6);
    selction.removeAllRanges();
    selction.addRange(range);//主动添加选中文字
    console.log(selction);

</script>
</html>

时间: 2024-10-24 18:14:44

html 富文本编辑器相关--输出选中文字和主动选择文字的相关文章

富文本编辑器相关

平时我们在写一些可以发表文章的相关功能时,总会时不时会用到富文本编辑器,下面推荐几种开源的富文本编辑器: 1.UEditor 百度的. 优点:插件多,基本满足各种需求,类似贴吧中的回复界面. 缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢. 总结:小项目,可以用用,不推荐使用. 2.kindeditor 界面类似百度,效果很像 文档齐全但用例较少,使用还算方便. 缺点:总感觉样子不是很好看,没有现代那种风格,还是老式的

html 富文本编辑器相关--向编辑器内部插入文字图片等各种dom元素 通用方法

有问题的插入方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>#edit{height:500px;width:500px;border:1px solid red;}</style> </head> <body> <

html 富文本编辑器相关--中文状态下输入@的问题

如何支持输入@可以[@群内人]的功能? 常规思路是   监听keydown 事件  的shift+2 document.getElementById('input-content').addEventListener('keydown', function (e) { if (CHATOBJ.groupType != 2) {//不是群消息 return; } //if (e.keyCode === 16) return; console.log('没有弹出联系人?:',e); if (e.sh

html 富文本编辑器相关--常用selection range api

selection.setPosition(container,5); 设置光标位置--到尾端 selection.setPosition(container,0); 设置光标位置--到首端 container 为 编辑容器dom,5 为编辑器子元素的长度, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

Bootstrap富文本编辑器-bootstrap-wysiwyg

在进行英语试题的录入中,因为英语试题经常会有类似如下的试题: My friend watches dragon boat races at the Dragon Boat Festival.(对划线部分提问) ——_______ is the Double Ninth Festival? ——It is in October. 在上面的题目中,我们需要寻找一个能够对下划线进行编辑的富文本编辑器,同时为了能够加快编辑的速度,可以对在试题的录入中常用的几种模式进行预定义,比如——,_____符号的自

富文本编辑器 CKeditor 配置使用 (带附件)

Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.getData(); //获取带HTML的值 var stemTxt=CKEDITOR.instances.TextArea1.document.getBody().getText();//获取纯文本 CKEDITOR.instances.TextArea1.setData(data.content)

TinyMCE(富文本编辑器)

[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http://www.cnblogs.com/hahacjh/archive/2010/07/24/1784268.html TinyMCE 在Asp.Net中的使用方法其实挺简单的,从官方网站下载TinyMCE),然后将里面的jscripts目录拷到你的网站目录 假设你的aspx页面中某一个地方需要用到编辑器

轻量级富文本编辑器wangEditor源码结构介绍

1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.com/wangEditor/demo.html 下载(github):https://github.com/wangfupeng1988/wangEditor QQ群:164999061 从我发布wangEditor到现在,大概有七八个月了,随着近期增加的插入视频,表情,地图这三个功能,目前为止基本

WEB项目中使用UEditor(富文本编辑器)

Ueditor富文本编辑器是在很多项目里经常用到的框架,是百度开发团队开发的一款很好用的富文本编辑器 下面就是我在一个系统里用到的,有了富文本编辑器,管理员使用起来不是很方便? 所以本博客介绍这个富文本编辑器的使用哈!觉得写得不错的请点赞哈,有建议欢迎提哈!^V^ 下载链接:http://ueditor.baidu.com/website/download.html 具体的使用请看官网:http://ueditor.baidu.com/website/index.html 下载富文本编辑器后,我