TinyMCEエディタにボタンを挿入してローカルファイルをRAWイメージとして現在の位置に挿入する方法はありますか？

TinyMCEエディタにカスタム/デフォルトボタンを追加すると、ローカルイメージを選択してRAW（BASE64）イメージとしてエディタの現在の位置に挿入できますか？TinyMCEエディタにボタンを挿入してローカルファイルをRAWイメージとして現在の位置に挿入する方法はありますか？

出典

2017-11-16 STORM

何を試しましたか？手順は次のようになります：a）ボタンを追加します。 b）「ファイルのアップロード」シーケンスを実行するためのボタンが表示されます。 c）サーバーにファイルを送信する。 d）サーバからbase64のバージョンを取得し、アクティブエディタに挿入します。 – pbuck

私はそれを実装する方法とサーバーに送信する理由を考えていませんか？ TinyMCEまたはJSはそれをクライアント側に変換できませんか？ – STORM

多くの既存のドキュメントはボタンにあります。サーバーへの送信に関しては、ファイルをローカルに読み取ることができないという問題があります。あなたは、Webサーバーにファイルを送信することができます。 – pbuck

私はこれをthis answerから試しました。上記のURLを使用して

window.onload = function() { 
 
    document.getElementById("fileName").onchange = function() { 
 
    var reader = new FileReader(); 
 
    reader.readAsDataURL(this.files[0]); 
 
    reader.onload = function() { 
 
     console.log(reader.result); 
 
     document.getElementById("img").src = reader.result; 
 
    }; 
 
    reader.onerror = function (error) { 
 
     console.log('Error: ', error); 
 
    }; 
 
    }; 
 
};

<input type="file" name="fileName" id="fileName" /><br /> 
 
<img src="https://dummyimage.com/250x75/000/fff.png&text=Select+an+Image" id="img" style="max-width: 250px; max-height: 75px;" />

（コンソールを参照するか、要素を検査し、見つけるsrcを）とinserting an image at the current positionで、あなたはキャレットの現在の位置に文書内の画像を挿入することができます。

出典

2017-11-27 14:23:42

TinyMCEエディタにボタンを挿入してローカルファイルをRAWイメージとして現在の位置に挿入する方法はありますか？

答えて

関連する問題