繁体   English   中英

在RTF文本编辑器中的光标位置处以html字符串形式将文本或图像或文件插入/附加

Insert/Attach text or image or files as a html string in Rich text editor at the cursor position

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用RTF编辑器,并尝试在所需的光标位置插入文件或某些图像。 但是,没有在文本之间,两个文件之间或两个图像之间添加文件或图像,而是在图像/文件的末尾添加了文件或图像。

我该怎么做,以便将任何图像/文本/文件添加到所需的光标位置。

我正在尝试在ios移动应用程序和safari浏览器中实现此功能,但这也许不是特定于浏览器的问题。

<div id="editor" contenteditable="true"></div>

editor.js内

 var RTE = {};

RTE.editor = document.getElementById("editor");

RTE.insertFileComponent = function(fileId, fileName, fileSize, type, componentId) {
    var htmlTag = '<div contenteditable="false" class="attach"><div class="fileMetaData">'+ fileName +'</div>';
    document.getElementById('editor').focus();
    RTE.insertHTML(htmlTag);
    RTE.updateContentOffset();
    window.webkit.messageHandlers.general.postMessage("input");
    }

RTE.updateContentOffset = function() {
    var object = {
    caretYPosition: RTE.getCaretYPosition(),
    lineHeight: RTE.getLineHeight()
    };
    window.webkit.messageHandlers.offsetDidChange.postMessage(object);
    };


    RTE.insertHTML = function(html) {
         RTE.restorerange();
         document.getElementById('editor').focus();
         document.execCommand('insertHTML', false, html);
         RTE.updateHeight();
    };


    RTE.updateHeight = function() {
     var object = {
    clientHeight: document.getElementById('editor').clientHeight,
    relativeCaretYPosition: RTE.getRelativeCaretYPosition(),
    lineHeight: RTE.getLineHeight()
    };
     window.webkit.messageHandlers.heightDidChange.postMessage(object);
    };


RTE.restorerange = function() {
 var selection = window.getSelection();
selection.removeAllRanges();
 var range = document.createRange();
 range.setStart(RTE.currentSelection.startContainer, RTE.currentSelection.startOffset);
range.setEnd(RTE.currentSelection.endContainer, RTE.currentSelection.endOffset);
selection.addRange(range);
}
问题暂未有回复.您可以查看右边的相关问题.
1 在富文本框中的光标位置插入图像

我知道有这样的各种问题,但我问,因为我无法理解所有答案。 我有RichTextBox ,我希望用户能够在当前光标位置插入图像。 我尝试使用Clipboard设置图像,然后将其粘贴到富文本框中。 这有效,但我已被告知其不良做法,因为它在不通知用户的情况下更改cliboard中的数据。 ...

2 在tinyMCE富文本编辑器中的光标位置插入文本

我有几个下拉框,应该在tinyMCE富文本编辑器中的光标位置插入动态文本(根据选择)。 我发现很多与上述问题有关的帖子如下所示,目前我的代码无效,也没有在控制台中给出任何错误。 我想当我点击下拉框时,我在文本编辑器中放松了焦点,但我仍然无法解决这个问题。 任何帮助将不胜感激。 ...

5 在 wysihtml5 编辑器中的光标位置插入文本

我有一个带有一些值的文本区域和列表框。 当用户将光标放置在文本区域内的任何位置并从列表框中选择值时,应将其注入光标所在的特定位置。 我尝试了一些解决方案,其中文本总是附加在末尾。无法附加在光标位置。 ...

7 如何在Lotus Script中的富文本字段中的光标的当前位置处插入文本和可能的富文本?

首先,表单中有一个富文本字段,该文本字段已经输入了一个文本(对于这种情况-“ hello world”)。 我将光标放在“ hello”字母“ o”之后。 我有一个按钮,它将打开一个带有一个文本字段的对话框,我想知道如何将富文本字段中光标当前位置的对话框中来自该字段的文本插入到对话框中。 ...

8 如何在光标的编辑器中插入文本/ HTML

我正在使用textAngular 1.4.1,我无法弄清楚如何在当前光标位置的textAngular指令中插入文本。 我原以为这是一个简单的操作。 我有一个SELECT,其中包含要插入的选项列表。 当他们按下“插入”按钮时,我希望将文本插入到光标处的HTML中。 在我的控制器 ...

9 富文本编辑器需要游标插入表(自己的文本编辑器,没有使用插件)

我正在使用java脚本实现自己的测试编辑器。 因为我需要在插入符号位置插入表格,但我无法将光标始终放在可编辑的div中。 有没有选项将光标(插入符号)放在编辑器中。 我有样品小提琴 。 我的问题是: 我可以在光标显示的时间点击可编辑div内部。 但是当我点击表格按钮时,光 ...

10 如何在富文本框 C# 中的光标位置附加字符串?

我想在光标闪烁的那个位置的富文本框中添加字符串。 我还想更改我输入的文本颜色。 例如,如果预先输入的文本颜色为黑色,那么我输入了一个新字符串,则该字符串应为蓝色。 它应该是我输入字符串的所有时间。 我输入的字符串,它们应该保持蓝色。 谢谢 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM