2017-11-16 113 views
6

Yerel bir görüntü seçip editördeki geçerli konumdaki RAW (BASE64) resmi olarak eklemek için TinyMCE Düzenleyicisine özel/varsayılan düğmeyi nasıl ekleyebilirim?TinyMCE Editör'de yerel bir dosyayı geçerli konumda RAW görüntüsü olarak eklemek için düğme nasıl eklenir?

+0

Ne denediniz? Adımlar şöyle görünecektir: a) Bir düğme ekleyin; b) 'Yükleme dosyası' dizisini yürütmek için düğmeye; c) sunucuya dosya gönderilmesi; d) base64 sürümünü sunucudan al ve aktif editöre ekle. – pbuck

+0

Uygulamayı ve neden sunucuya yol açtığını bilmek istemiyorum. TinyMCE veya JS, istemci tarafını dönüştüremez mi? – STORM

+0

Kalay düğmeleri üzerindeki mevcut belgeler bol var. Sunucuya gönderilirken sorun, dosyayı yerel olarak okuyamazsınız. Ancak dosyayı bir web sunucusuna gönderebilirsiniz. – pbuck

cevap

3

Sadece bunu denedim this answer. Yukarıdaki URL'yi kullanarak

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;" />

(konsol bakın veya öğeyi denetle ve bulmak src) ve inserting an image at the current position ile, sen imlecinin bulunduğu dokümanın içindeki resim ekleyebilirsiniz.

İlgili konular