时间戳

首页 > 解决方案 > 如何通过考虑光标的位置来添加包含图像和一些输入的 div 块

javascript - 如何通过考虑光标的位置来添加包含图像和一些输入的 div 块

问题描述

单击按钮时，我们可能会转到该行，然后添加函数get_div_img()返回的块。我面临的一个问题是，insert_at_cusor_pos()当我只用文本更改其第二个参数div_text_img并且添加文本的位置id="str_area"是文本区域时，该函数起作用。contentEditable为什么即使设置为div 这也不适用于 div true？第二个问题是我想div通过单击按钮添加整体及其图像和输入。

// Add div block
function insert_at_cusor_pos(areaId, div_text_img) {
    var div_area = document.getElementById(areaId);
    if (!div_area) {
    return;
    }

    var scrollPos = div_area.scrollTop;
    var strPos = 0;
    var br = ((div_area.selectionStart || div_area.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));
    if (br == "ie") {
    div_area.focus();
    var range = document.selection.createRange();
    range.moveStart('character', -div_area.value.length);
    strPos = range.div_text_img.length;
    } else if (br == "ff") {
    strPos = div_area.selectionStart;
    }

    //New line
    var new_line = document.createElement("br");
    to_new_line = div_area.appendChild(new_line);

    var front = (div_area.value).substring(0, strPos);
    var back = (div_area.value).substring(strPos, div_area.value.length);
    div_area.value = front + to_new_line + div_text_img + to_new_line + back;

    strPos = strPos + div_text_img.length;
    if (br == "ie") {
    div_area.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character', -div_area.value.length);
    ieRange.moveStart('character', strPos);
    ieRange.moveEnd('character', 0);
    ieRange.select();
    } else if (br == "ff") {
    div_area.selectionStart = strPos;
    div_area.selectionEnd = strPos;
    div_area.focus();
    }
    div_area.scrollTop = scrollPos;
}


//set image on div block
function get_div_img() {
    var div_img = document.createElement("Div");
    var input_img = document.createElement('img');
    input_img.id = "id_input_img"; 
    input_img.src = 'https://q-xx.bstatic.com/xdata/images/hotel/max500/99454893.jpg?k=bee17fc3b075cdd0bd4b055f10567efb4f4b6269d98d20d56d362b37b612b767&o=';
    input_img.height = "150";
    input_img.width = "200";
    div_img.appendChild(input_img);

    //New line
    var new_line = document.createElement("br");
    div_img= div_area.appendChild(new_line);

    //Add input caption
    var input_img_caption = document.createElement("INPUT");
    input_img_caption.setAttribute("type", "text");
    div_img.appendChild(input_img_caption );
    return div_img;
}

这是html内容。目标是get_div_img()考虑光标的实际位置来设置块。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="container" contentEditable="true">
            <div id="str_area">Start point.</div>
            <button onclick="insert_at_cusor_pos("str_area", get_div_img());return false;">
                Write text and insert images. 
            </button> 
        </div>
    </body>
</html>

标签： javascripthtml

解决方案

所以你想根据用户鼠标坐标创建 div，我为你做了这个简单的例子，双击文档上的任意位置以激活可编辑内容的 div，这应该给你一个想法，你可以在它之上构建让事情变得有趣！

document.ondblclick = function(e) {
  document.body.innerHTML += `<div class="widget" style="top:${e.pageY  - 50}px;left:${e.pageX - 50}px;" contentEditable><div>`;
}
.widget {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: absolute;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>some title</title>
  <meta charset="utf-8">
</head>
  <body>
  </body>
</html>

推荐阅读