精华内容
下载资源
问答
  • 获取编辑器光标
    千次阅读
    2020-09-22 10:47:40

    vue 编辑器tinymce获取光标

    this.$refs.editorRef.editor.editorManager.get(“editorId”).focus()

    更多相关内容
  • 本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法。分享给大家供大家参考,具体如下: <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"&...
  • 当我们console.log(domUtils)的时候,可以在控制台中,看见很多domUtils下的方法,这些方法都是用于操作节点的,findParentByTagName()顾名思义,获取的是节点,当我们的光标编辑器内容处,而我们要获取相应内容...
  • 主要介绍了js公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标的方法,,需要的朋友可以参考下
  •  前段时间发了一个编辑器的插件,忙完后自己再次进行了详细的测试,然后心里冒出一句:“这谁写的这么奇葩的插件?完全没什么luan用啊!” 自己做了让自己不满意的事,咋整?男人不怕累,花了时间重写(为世界上...
  • 类似于fontSize的命令,添加face=id的font元素,再通过此id定位到当前元素:var id="execCommandTest"document.execCommand('fontName',null,id)$(elem).find("font[face='"+id+"']")document.execCommand('undo',...

    类似于fontSize的命令,添加face=id的font元素,再通过此id定位到当前元素:

    var id="execCommandTest"

    document.execCommand('fontName',null,id)

    $(elem).find("font[face='"+id+"']")

    document.execCommand('undo',null)//取到元素后去除标记,简直毫无痕迹

    demo:

    44444444

    click

    $("button").click(function(){

    var id="execCommandTest"

    document.execCommand('fontName',null,id)

    console.log($('div').find("font[face='"+id+"']").html())

    document.execCommand('undo',null)

    })

    效果:

    eb885f430e3269120bc417bd21d3a3fa.png

    展开全文
  • 主要介绍了vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 没有考虑浏览器兼容性,暂时只考虑了...div获取光标位置比较复杂,如果是textarea和input框,内部是纯文本,比较好处理。 div中输入的时候,第一行输入的内容是div的第一个文本元素。换行之后,每一行都会自动被一个d

    没有考虑浏览器兼容性,暂时只考虑了Chrome。
    效果
    效果
    在div中输入的时候,底下的蓝色部分(span)跟随光标变化而变化,而且内容为光标前的所有文本。
    红色的部分是一个|,用来模拟光标。所以只要获得|的相对像素位置,以及div的位置,就可以计算出光标的绝对像素位置。还有个前提是蓝色部分的样式要和div文字的样式相同。
    div获取光标位置比较复杂,如果是textarea和input框,内部是纯文本,比较好处理。
    div中输入的时候,第一行输入的内容是div的第一个文本元素。换行之后,每一行都会自动被一个div包裹起来。如果该行为空,默认里面会有一个br标签,如果有内容,则br标签会消失。
    select对象的anchorNode,是一个#text,通过它可以找到光标作用在div内部某一个div,也就是某一行,记作y坐标。而anchorOffset,记录了光标在这个#text的偏移量,记作x坐标。
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="inputBox" contenteditable="true" oninput="handleInput(this)"></div>
    <span style="background: #409EFF;" id="fakeContent"></span><!--
    两个span之间用注释隔开,消除空隙(不能用浮动)
    --><span style="background: crimson;" id="fakeCursor">|</span>
    <br/>
    </body>
    </html>
    <script>
        let fakeContent = document.querySelector('#fakeContent');
    
        /**
         * 输入事件
         * */
        function handleInput(that) {
            let cursorCoordinate = getCursorCoordinate(that);
            //文本数组,div每一行都是一个string
            let  contentStrList = getNodeList(that).map(node => node.textContent);
            let spanContent = '';
            //光标y坐标也就是contentStrList的索引
            let y = cursorCoordinate.y;
            for (let i = 0; i < y; i++) {
                //添加内容和换行
                spanContent += contentStrList[i]+'<br/>';
            }
            if(contentStrList.length > 0) {
                //如果长度为0,表示编辑框没有内容,y会是-1,contentStrList[y]会是undefined
                //按照光标偏移量截取字符串
                spanContent += contentStrList[y].substr(0,cursorCoordinate.x);
            }
            fakeContent.innerHTML = spanContent;
        }
    
        /**
         * 获取div内容并转为Node数组
         * @param elem
         * @returns {ChildNode[]}
         */
        function getNodeList(elem) {
            return Array.from(elem.childNodes);
        }
    
        /**
         * 获取光标的坐标
         * @param elem
         * @returns {{x: number 光标偏移量, y: number 光标在div子元素数组中的索引}}
         */
        function getCursorCoordinate(elem) {
            const selection = window.getSelection();
            const cursorIndex = getNodeList(elem).findIndex(node =>
                node.firstChild === selection.anchorNode|| node === selection.anchorNode);
            const cursorOffset = selection.anchorOffset;
            return {
                x: selection.anchorOffset,
                y: cursorIndex
            }
        }
    
    </script>
    
    展开全文
  • 文本编辑器实现光标定位的功能

    千次阅读 2020-03-20 15:17:53
    文章目录1 文本编辑器实现光标定位的功能 1 文本编辑器实现光标定位的功能 问题:如何计算编辑框中光标的位置? 思路: 文本框对象的内部包含了QTextCursor对象。 通过position()成员函数获取当前光标的字符位置。...

    1 文本编辑器实现光标定位的功能

    问题:如何计算编辑框中光标的位置?

    在这里插入图片描述
    思路:

    • 文本框对象的内部包含了QTextCursor对象。
    • 通过position()成员函数获取当前光标的字符位置。
    • 根据光标的字符位置计算横纵坐标。
    • 当光标位置发生变化时进行计算。

    算法流程描述:

    思想:

    1. 通过’\n’字符的个数计算所在行。
    2. 通过最后一个’\n’字符的下标计算所在行。
      在这里插入图片描述
      关键代码如下:
    bool MainWindow::initMainEditor()
    {
        bool ret = true;
    
        mainEditor.setParent(this);
    
        connect(&mainEditor, SIGNAL(textChanged()), this, SLOT(onTextChanged()));
        connect(&mainEditor, SIGNAL(copyAvailable(bool)), this, SLOT(onCopyAvailable(bool)));
        connect(&mainEditor, SIGNAL(redoAvailable(bool)), this, SLOT(onRedoAvailable(bool)));
        connect(&mainEditor, SIGNAL(undoAvailable(bool)), this, SLOT(onUndoAvailable(bool)));
        connect(&mainEditor, SIGNAL(cursorPositionChanged()), this, SLOT(onCursorPositionChanged()));
    
        setCentralWidget(&mainEditor);
    
        return ret;
    }
    
    void MainWindow::onCursorPositionChanged()
    {
        int pos = mainEditor.textCursor().position();	// 注意,这里的返回的位置从0开始,比如当前有输入框内有字符abc,光标停在a前面返回0,a后面返回1,b后面返回2,c后面返回3
        QString text = mainEditor.toPlainText();
        int col = 0;
        int ln = 0;
        int flag = -1;
    
        for(int i=0; i<pos; i++)
        {
            if( text[i] == '\n' )
            {
                ln++;
                flag = i;
            }
        }
    
        flag++;
    
        col = pos - flag;
    
        statusLbl.setText("Ln: " + QString::number(ln + 1) + "    Col: " + QString::number(col + 1));
    }
    

    参考资料:

    1. QT实验分析教程
    展开全文
  • 项目需求: 输入某个字符时,弹出一个弹框 弹框位置跟随光标处 经查找和亲测,下面记录一下代码:... let bk_start = instance.selection.getRange().createBookmark().start // 创建一个临时dom,用于获取当前光...
  • 写法一:quill.getSelection().index; 写法二:quill.selection.savedRange.index
  • 在CKEditor富文本编辑器中成功上传的视频,如果视频前后没有任何内容,视频无法使用退格键正常删除并且无法获取鼠标编辑状态光标。 修复办法 在创建的Video标签后添加一个换行标签即可 代码如下 <div class="ck-...
  • 大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的。当然,如果要严谨的,用像ueditor那种只有很少部分实现是...
  • 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍,有需求的朋友可以参考
  •  做富文本编辑器时候遇到一个奇葩问题   经过本人多(丧)番(心)对(病)比(狂)调查 终于发现。是游览器内核的问题。 实验结果在   版本光标高度是有问题的, 再    光标表现正常   ...
  • 主要介绍了C语言实现文本编辑器系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • NULL 博文链接:https://canlynet.iteye.com/blog/2340751
  • 一、制作一个简单的编辑器会有几种方式? 文本框 input 文本域 textarea 使用属性contenteditable,让一个div可编辑。 二、简单的编辑器涉及到复制、粘贴的问题 复制、粘贴的东西来自于剪切板Clipboard。 Clipboard...
  • 初始化 $('#summernote').summernote({ ...在点击事件获取其他条件中调用 插入元素 $('#summernote').summernote('editor.insertText', '_________') 附上管网地址 : https://summernote.org/deep-dive/#basic-ap ...
  • 在近期项目中,需要在一个实时通信软件中,在发送消息时支持发送加粗的...需要加粗消息,就需要使用到加粗b标签,所以一般的输入框input,textarea无法满足,经查询最后选择使用可编辑的div。将div设置属性contentEdita
  • 在 showdow内使用Monaco编辑器时存在鼠标点击换行位置光标不会跟随问题。 解决方法: function shadowCaretRangeFromPoint(shadowRoot, x, y) { const range = document.createRange(); // Get the element ...
  • 编辑部同事想在富文本中编辑新闻时,直接将所需的图片全部上传后,在文本的指定位置添加指定的图片,所以就有了这篇文章,添加图片的操作过程如下: 鼠标在富文本中需要插入图片的位置点击一下,就可以选择需要插入的图片,...
  • 本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下: 首先要让DIV启用编辑模式 代码如下:”divTest”> 通过设定contenteditable=true...
  • 业务场景:首先在ueditor编辑器中插入一段文本,然后我想在文本的某个位置(光标停留处)插入一个字符串,这个字符串是从页面的其他地方选择得来的。
  • 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的...
  • 获取编辑器Text Edit的光标行文本,本来很简单,可是搜索了半天竟然无果。 有一贴子,看到回复人批评提问者不看帮助,于是我第一次打开帮助搜索Text Edit与QTextCursor,并得到结果。 我从不怀疑所有问题都在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,638
精华内容 19,055
关键字:

获取编辑器光标