Question

我的项目遇到了问题。在我的项目中，我想要单击Facebook上传按钮后单击鼠标的位置。

例如

Problem Image

在此图像中，单击了Hello文本，我想单击Hello位置，然后单击facebook上传按钮，然后在文本后添加图像。与Hello Test情况类似。这是我一直在尝试的地方

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->

    </head>
    <body>
        <div id="container">
            <h1>Medium Editor</h1>

            <form action="{{ route('editor') }}" method="post">
                {{ csrf_field() }}
                <div class="editable">
                    <textarea class="form-control textarea" name="description_en" id="description_en" ></textarea>
                </div>
                <input type="submit" value="submit">
            </form>
            <button id="facebookUpload">Facebook Upload</button>
        </div>

        <script type="text/javascript" src="{{ asset('js/jquery.js') }}"></script>
        <script>


            jQuery(document).ready(function(){
                jQuery("#facebookUpload").focusin(function(e){
                    var posX = jQuery(this).prev().focusout().position().left;
                    var posY = jQuery(this).prev().focusout().position().top;


                    jQuery('.medium-editor-element').append('<img id="theImg" src="https://cdn.filestackcontent.com/jHNwCAMlTzujKkeLIyrq" style="width:100px;height:100px;left:'+ (e.pageY - posY) + ';top:'+ (e.pageX - posX) +'" />')

                    console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));
                });
            });
        </script>
    </body>
</html>

但这不起作用。在所有情况下，该图像都被添加到底部。

这里是例子

After Add Image

我没有找到解决方案。请帮我。谢谢。

Answer 1

下次，请提及有关您问题的所有相关详细信息。使用一个用<textarea>代替<div contentEditable>的插件非常重要。

您的尝试有两个问题：

您无法在<textarea>中添加图像。但是在<div contentEditable>中，是的。
您将无法基于x / y点击坐标添加任何内容。您需要定位一个元素以在其之前，之后或内部附加内容。

因此，这是一种使用event target来存储单击的元素的解决方案。

您必须检查该目标是否为<p>。因为如果它是<div>，则可能是编辑器的div ...并且在其后添加图像会很烦人。

因此，如果不是这种情况，请使用变量将该元素保留在内存中。

然后在FB按钮上单击，可以添加图像。

var editor = new MediumEditor('.editable textarea');

var clickedElement;

$(".medium-editor-element").on("click",function(e){
  
  // Making sure the click did not occured on the editor itself.
  if(e.target.tagName == "DIV" && $(e.target).hasClass("medium-editor-element")){
    return;
  }
  
  // Keep that clicked element in memory...
  clickedElement = $(e.target);
  
});

$("#facebookUpload").on("click",function(){
  if(typeof(clickedElement) != "undefined"){
    // Append an image after the last clicked element, if any.
    clickedElement.after("<img src='https://via.placeholder.com/80x80?text=IMG'>");
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/themes/beagle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>

<div id="container">
  <h1>Medium Editor</h1>

  <form action="" method="post">
    <div class="editable">
      <textarea class="form-control textarea" name="description_en" id="description_en" ></textarea>
    </div>
    <input type="submit" value="submit">
  </form>
  <button id="facebookUpload">Facebook Upload</button>
</div>

在单击“提交”按钮之前，如何检测我的位置

1 个答案: