contenteditable div内の画像の後ろにカーソルを設定

私はスペースバーのテキストをクリックすると絵文字に変換できるfacebookのチャットウィンドウの入力ボックスのようなものを実装しようとしています。私のコードでは、変換が行われるたびに、キャレットはdivの先頭に戻ります。また、関数convert（）は、div内にテキストが存在する限り呼び出されることが必要です。しかし、変換の後にコードが機能しなくなり、変換のためにテキストボックス内をクリックしてからテキストボックス内をクリックする必要があります。これらのことを正しく実装するにはどうしたらいいですか？contenteditable div内の画像の後ろにカーソルを設定

var data={ 
 
    "value":":)", 
 
    "image":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-AhA" 
 
}; 
 
$(document).ready(function(){ 
 
    convert(); 
 
    
 
    
 
    
 
    function getWord(text){ 
 
     var word=text.split(" ").pop(); 
 
     return word; 
 
    } 
 
    
 
    
 
    function setCursor(i){ 
 
    i++; 
 
    console.log(i); 
 
    var el = document.getElementById("image"); 
 
     var range = document.createRange(); 
 
     var sel = window.getSelection(); 
 
     range.setStartAfter(el); 
 
     range.collapse(true); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
    } 
 
    
 
    function convert(){ 
 
    document.body.onkeyup=function(e){ 
 
     var contenteditable = document.querySelector('[contenteditable]'); 
 
    text = contenteditable.textContent; 
 
    if(e.keyCode==32){ 
 
     var word=getWord(text); 
 
     if(word.includes(data.value)){ 
 
     var i=0; 
 
     var img = "<img id='image'"+i+" src='" + data.image +"' class='image' /> "; 
 
     
 
     console.log(img); 
 
     $("#text-box").html(function (_, html) { 
 
      return html.replace(data.value , img); 
 
     }); 
 
      setCursor(i);  
 
     //$("#text-box").html(text.(replace(data.value,img)); 
 
     //document.getElementById('textbox').replaceChild(data.value,img); 
 
     } 
 

 
    } 
 
    } 
 
    } 
 
    });

<html> 
 
<head> 
 
\t <style type="text/css"> 
 
\t \t .image{ 
 
\t \t \t position: relative; 
 
\t \t \t max-height: 1.4em; 
 
\t \t \t max-width: 1.4em; 
 
\t \t } 
 

 
\t \t [contenteditable]{ 
 
\t \t \t -webkit-appearance:textfield; 
 
\t \t \t appearance:textfield; 
 
\t \t \t border: 1px solid black; 
 
\t \t \t line-height:1.4em; 
 
\t \t \t min-height: 20px; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
<div contenteditable="true" id='text-box'> \t 
 
</div> 
 

 

 
\t <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
\t <script type="text/javascript" src="emoji.js"></script> 
 
\t <script type="text/javascript" src="data.json"></script> 
 

 
</body> 
 
</html>

出典

2017-05-12 Aayushi

のみスクリプト変更。コメントを参照してください。

var data={ 
    "value":":)", 
    "image":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-AhA" 
}; 
$(document).ready(function(){ 

    convert(); 



    function getWord(text){ 
     var word=text.split(" ").pop(); 
     return word; 
    } 


    function setCursor(i){ 

    var el = document.getElementsByClassName("image")[i]; // Use cannot use more than one Id in HTML. Modify your HTML. Now the selector will be classnames 
     var range = document.createRange(); 
     var sel = window.getSelection(); 
     range.setStartAfter(el); 
     range.collapse(true); 
     sel.removeAllRanges(); 
     sel.addRange(range); 

    } 

    function convert(){ 
    var i = 0; // Set the scope of i correctly. It wasnt incrementing in the code. 
    document.body.onkeyup=function(e){ 
     var contenteditable = document.querySelector('[contenteditable]'); 
    text = contenteditable.textContent; 
    if(e.keyCode==32){ 
     var word=getWord(text); 
     if(word.includes(data.value)){ 

     var img = "<img id='image'"+i+" src='" + data.image +"' class='image' />"; 

     console.log(img); 

     $("#text-box").html(function (_, html) { 
      html = html.replace(/&nbsp;/g,''); // Trim extra &nbsp; 
      return html.replace(data.value, img); 
     }); 
     setCursor(i); 
     i++;  
     //$("#text-box").html(text.(replace(data.value,img)); 
     //document.getElementById('textbox').replaceChild(data.value,img); 
     } 

    } 
    } 
    } 
    });

出典

2017-05-12 08:14:12

ありがとうございました！しかし、カーソルはまだ設定されていません。毎回コンバージョン後のcontentedit divの最初に行く@Tanvi – Aayushi

その作業。あなたのためにフィドルを試してみましょう。私はChromeでチェックインしています。 –

これを確認してください、https://jsfiddle.net/yws3s6r9/ クロスブラウザの問題ですが。 Chrome - ok | Firefox - そうではありません。 –

contenteditable div内の画像の後ろにカーソルを設定

答えて

関連する問題