Question

我在一个有Quill JS texteditor的网站上工作，另外我使用了交互式JS在网站上放置一个图像并使其可以调整大小/可拖动。

这个想法是用户可以将图像拖到页面的任何位置，它会补充文本。

但问题是，当我允许将图像放在页面的任何位置时，它会“阻止”用户输入任何文本到QuillJS编辑器。

     var quill = new Quill('#editor', {
                modules: { toolbar: toolbarOptions},
                theme: 'snow'
            });

    #drag-1{
            width: 100px;
            height: 100px;
            min-height: 6.5em;
            padding: 0.1%;
            -webkit-transform: translate(0px, 0px);
            
            border:2px solid;
            z-index:1;
        }
    #editor {
        z-index:0;
    }
    
    .draggable{
        z-index:1;
    }
    #imageCanvas
    {
    height:600px;
    width:96%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    transform: translate(-8%, -80%);
    float: right;
    z-index:-1;
    
    
    }

 <div id="container">
                    <div id="editor">
                       </div>
  
            <div id = "imageCanvas">
                <img src = <?php echo '"data:image/png;base64,' . base64_encode($imgData['image']) . '"'; ?>  alt="Image preview..." target = "self" id ="drag-1" class ="draggable"/>
               
                </div>

互动JS有一吨代码所以我不会粘贴它 - 我不确定它在这里有多相关？！我试图在编辑器类/ id中直接输入图像，图像在文本编辑器后面“。”

我已经尝试更改每个元素的z索引，例如当我创建图像1的z索引和编辑器-1时，如果我重新加载页面，图像将闪烁几分之一秒然后编辑掩盖它。

任何帮助都会非常感谢欢呼！

Answer 1

我需要将Image CSS位置设置为绝对值，以使其显示在顶部！

我将图像类的位置设置为绝对，使文本框的其余部分无效。

文本编辑器中的可拖动图像，可防止文本输入

1 个答案: