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</title>
    <style>
        #app{
            width:300px;
            height:100px;
            border: 1px solid red;
        }
        img{
            width: 20px;

        }
    </style>
</head>
<body>
<!--<div contenteditable="true" id="app">
    <img src="a.jpg" alt=""> 123

</div>-->
<div contenteditable="true" id="app">
   11<img src="a.jpg" alt=""><img src="a.jpg" alt=""> 00 <span class="sp">123</span>

</div>

</body>
<script>

    let app = document.querySelector(‘#app‘);
    app.focus();
    let selection = getSelection();
    selection.setPosition(app,5);

</script>
</html>

时间: 2024-10-16 20:01:03

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

富文本编辑器相关

平时我们在写一些可以发表文章的相关功能时,总会时不时会用到富文本编辑器,下面推荐几种开源的富文本编辑器: 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 富文本编辑器相关--输出选中文字和主动选择文字

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

如何做一个富文本编辑器

很久以前就想做一个富文本编辑器,但是感觉比较难,一直没有实现.直到了解了html5的contenteditable属性可以设置一个div为可编辑状态,利用这个特性做富文本编辑器就比较简单了 首先 认识一下 contenteditable 它是一个属性 可以这样使一个DIV的编辑状态被激活 <div contenteditable="true"></div> 然后这个div就可以被编辑了 而我们要想获得它的html源码可以使用innerHTML来取得 举个例子如下

Bootstrap富文本编辑器-bootstrap-wysiwyg

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

重构wangEditor(web富文本编辑器),欢迎指正!

1. 前言 (下载源码.使用说明.demo,请参见:https://github.com/wangfupeng1988/wangEditor) 前段时间做过一个基于bootstrap的富文本编辑器--wangEditor,并发布到github上(https://github.com/wangfupeng1988/wangEditor),在博客园写了篇文章(http://www.cnblogs.com/wangfupeng1988/p/4088229.html)也受到了不少关注. 之所以有这次重构

【JavaScript】富文本编辑器

这是js写的富文本编辑器,还存在一些bug,但基本功能已经实现,通过这个练习,巩固了js富文本编辑方面的知识,里面包含颜色选择器.全屏.表情.上传图片等功能,每个功能实际对应的就是一个小插件啦 部分程序: var RichEditor = function(container, params) { params = params || {}; var options = { width: 900, height: 500, borderColor: "#ddd", buttons: {

在网站中使用UEditor富文本编辑器

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点. 官网链接 进入到下载页面,选择相应的版本下载 这里我们使用ASP.NET开发,所以选择.NET版本. 将文件解压后,目录结构如下: 将外部js引入到页面中 <script src="Assets/js/ueditor/ueditor.config.js" type="text/javascript"></script> <s