DIV 内容上的 getSelection 可编辑

发布于 2024-08-29 22:24:20 字数 1503 浏览 2 评论 0原文

我正在尝试实现项目，我必须用 JavaScript 做一个所见即所得的编辑器。我无法使用现有编辑器，因为我需要使用我的插件（例如 colorPicker 或 imagePicker）。

现在我有这个 HTML：

<div class="K_editor" id="idExample">
   <div class="K_links">
      <div class="K_editor_link K_editor_linkBold">B</div>
      <div class="K_editor_link K_editor_linkItalic">I</div>
      <div class="K_editor_link K_editor_linkUnderline">U</div>
   </div>
   <iframe width="696" height="212" frameborder="0" src="js/myEditor_iFrame.php">
      <html>
         <head/>
         <body>
            <div id="contentIframe" contenteditable="true">
               This is a test code, with <strong>bold</strong> text and  <em>italic</em> text.
            </div>
         </body>
      </html>
   </iframe>
   <input type="submit"/>
</div>

在事件上单击 .K_editor_link，将使用参数打开一个函数：

tagStart （例如，或 )
tagEnd （例如或 )
id （此处为 idExample）

我知道在 Textarea 上进行选择，但是 setSelectionRange()、.selectionStart 和 .selectionEnd 仅适用于 textbox (XUL)、input (XHTML)或textarea (XHTML)。

我能做些什么来做到这一点？

原文

I am trying to achieve project and I must do a WYSIWYG editor in JavaScript. I can't use an existing editor because I need use my plugins (for example a colorPicker or imagePicker).

For now I have this HTML:

<div class="K_editor" id="idExample">
   <div class="K_links">
      <div class="K_editor_link K_editor_linkBold">B</div>
      <div class="K_editor_link K_editor_linkItalic">I</div>
      <div class="K_editor_link K_editor_linkUnderline">U</div>
   </div>
   <iframe width="696" height="212" frameborder="0" src="js/myEditor_iFrame.php">
      <html>
         <head/>
         <body>
            <div id="contentIframe" contenteditable="true">
               This is a test code, with <strong>bold</strong> text and  <em>italic</em> text.
            </div>
         </body>
      </html>
   </iframe>
   <input type="submit"/>
</div>

On event click on .K_editor_link, a function is open with arguments:

tagStart (example <u>, or <span style="color:#AB1;">)
tagEnd (example </u>, or </span>)
id (here idExample)

I know get a Selection on Textarea but setSelectionRange(), .selectionStart and .selectionEnd are only for textbox (XUL), input (XHTML) or textarea (XHTML).

What can I do for do that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清音悠歌 2024-09-05 22:24:20

这是我使用的代码。我不能把它归功于它，因为我几个月前在 SO 上发现了它。不记得在哪里了。希望它对你有用。

function getSelectionHtml() 
{
    var html = "";

    if (typeof window.getSelection != "undefined") 
        {
        var sel = window.getSelection();
        if (sel.rangeCount) 
            {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;

}

代码来自这个问题： window.getSelection 返回 html

This is the code I use. I can not take credit for it since I found it here on SO a couple of months ago. Don't remember where. Hope it works out for you.

function getSelectionHtml() 
{
    var html = "";

    if (typeof window.getSelection != "undefined") 
        {
        var sel = window.getSelection();
        if (sel.rangeCount) 
            {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;

}

Code is from this question: window.getSelection return html

回复收藏 0 原文

~没有更多了~