Çok Gelişmiş Javascript WYSIWYG editörü

3 Cevap php

Ben bir kullanıcı benim sistemde bir web sayfasının URL'sini girmek olabilecek bir çözüm gerekir. Sayfa yük olur, ve sonra kullanıcı o değiştirmek istediği belirli bir bölümünü tıklayınız olabilir. Yani temelde ne gerek benim app içinde bir web sayfasını görüntülemek için bir yolu, kullanıcıların bir metin bloğunu seçmek izin için başka bir yol daha sonra (muhtemelen çerçeveler ile yapılabilir ama ben bir yatay kaydırma çubuğu olmasını tercih ediyorum), ve, bir ya da bir sayfa öğesi.

Yani metin bir blok ise bir div, metnin üzerinde gezinip bir soluk yeşil renk (uzağa gezinip bu sınır / anahat kaldırmak olurdu) kullanarak div sıralayabileceğimiz ve metni tıklayarak yeşil bir katı çizmek istiyorum Onun seçilmiştir, ve sonra benim sayfada bazı içerik div id göstermek ve kullanıcı i gereken bazı diğer bilgileri belirlemenizi sağlayacak göstermek için onun etrafında sınır.

Yani muhtemelen tüm <div>s, <table>s, <span>s, <p>s ve diğer herhangi bir 'konteyner' etiketleri almak için bir yol gerekir, ve daha sonra style.border özelliğini değiştirmek için onları gezinip / tıklayarak neden yeteneği ve onların kimliği / adı almak için yeteneği var,

Bir metin bloğu için sınır muhtemelen çalışır, ama ne görüntü ve hakkında böyle olabilir? Ayrıca, bir <div> Kimlik / İsim yok, nasıl ne belirtilmiş olabilir eğer?

3 Cevap

Bunu ayarlamak sonra, <iframe> etiketleri kullanabilirsiniz contentEditable = on. Bu şekilde, tarayıcı WYSIWYG özellikleri sağlar. Sınırları, vb olsa, çalışmayabilir. Bazı kod:

var idno = 0;

function addEditor(parent, url) {
    parent.innerHTML += '<iframe src="' + url + '" id="edit' + idno + '"></iframe>';
    var el = document.getElementById("edit" + idno);
    el.contentEditable = true;
    return el;
}

addEditor(document.body, "http://google.com").innerHTML += "Hello!";

Çalışmalıdır.

Onlar bağlam uyuyorsanız, Adobe Flex veya Microsoft Silverlight ile ya bu yaptığını düşünebilirsiniz. Hem Windows, Mac ve Linux arasında birkaç tarayıcıları ile sürekli çalışmak gerekir, özellikle, javascript veya bir çerçeve ile gerçekleştirmek daha zor kontrol işlevsellik ve düzeyi sağlamak.

Flex programlama dili için javascript geliştirilmiş bir versiyonunu kullanıyor. Sürüm 2 ile sadece. NET dillerini destekleyen rağmen Silverlight, sürüm 1 ile benzer yaptım (sizin ihtiyaçlarınıza bağlı olarak daha iyi olabilir, kötü ya da kayıtsız.)

Hem RIA (Rich Internet Applications) için araç olarak kendilerini tanımlamak.

Bu very genel bir sorudur. Böyle bir şey sağlar etrafında içerik yönetim sistemleri, çok sayıda bulunmaktadır.

Ayrıca, bir <div> Kimlik / İsim yok, nasıl ne belirtilmiş olabilir eğer?

Bir XPath yolunun DOM bir düğüm tespit edebilirsiniz. Yolunu oluşturmak için parentNode ile yukarı doğru hareket.

Bir metin bloğu için sınır muhtemelen çalışır, ama ne görüntü ve hakkında böyle olabilir?

Eğer html hemen hemen tüm elemanların sınır özelliğini ayarlayabilirsiniz.

etiketler