v2.5.2
Giriş yap

Çalışmayan input

webdevyusuf
760 defa görüntülendi

Arakadaşlar aşağıda verdiğim fonksiyonda oluşan input nedense tıklanınca ekrana resim seçmem için gelen yeri açmıyor.

(function($){
    $.fn.editor = function() {
        let menuDiv = document.createElement("div"), textarea = this;
        menuDiv.style.padding = "9px"
        menuDiv.style.borderBottom = "1px solid #eee"
        menuDiv.style.background = "#fff"
        
        let menus = [
            {
                "name":"bold",
                "icon": "fas fa-bold"
            },
            {
                "name":"italic",
                "icon": "fas fa-italic"
            },
            {
                "name":"underline",
                "icon": "fas fa-underline"
            },
            {
                "name":"justifyLeft",
                "icon": 'fas fa-align-left'
            },
            {
                "name":"justifyCenter",
                "icon": 'fas fa-align-center'
            },
            {
                "name":"justifyRight",
                "icon": 'fas fa-align-right'
            },
            {
                "name":"justifyFull",
                "icon": 'fas fa-align-justify'
            },
            {
                "name":"",
                "icon":"fas fa-image",
                "upload":true,
                "content":`
                <form action="" method="post">
                    <input type="file" name="test" class="form-control" />
                </form>
                `
            },
            {
                "name":"",
                "icon":'fas fa-file-video',
                "upload":true,
				"content":`
                    <input type="file" name="test" class="form-control" />
				`
            }
        ]

        
        let content = document.createElement("div");

        content.setAttribute("contenteditable", "true");
        content.style.outline = 'none'
        content.style.padding = '12px'
        content.style.margin = '8px'
        content.style.border = '1px solid #eee'
        content.style.background = "#fff"
        content.style.height = "300px"
        content.style.overflow = "auto"
        content.addEventListener("keyup", () => {
            setTimeout(() => {
                textarea[0].value = content.innerHTML;
            }, 1)
        });

        for (let i = 0; i < menus.length; i++) {
            let menu = document.createElement("a");
            menu.setAttribute("href", "#")
            menu.innerHTML = `<i class='${menus[i].icon}'></i>`
            menu.style.padding = "3px 7px"
            menu.style.textDecoration = "none"
            menu.style.border = "1px solid #999"
            menu.style.marginRight = "5px"
            menu.style.color = "#333"
            menu.style.position = "relative"
            menu.className = "hideng";
            if (menus[i].upload) {
                menu.innerHTML += `
                <div style="
                    display: none;
                    background: #fff;
                    box-shadow:
                        0 0  0 2px rgb(255,255,255),
                        0.3em 0.3em 1em rgba(0,0,0,0.3);
                    width: 250px;
                    padding: 5px;
                    height: 200px;
                    border: 1px solid #eee;
                    position: absolute;
                    right: 0;
                    top: 70px;
					cursor: default;
                ">
                ${menus[i].content}
                </div>
                `
                menu.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (e.target != menu && e.target != menu.querySelector("i"))
                        return false;
                    if (menu.classList.contains("hideng")) {
                        menu.classList.remove("hideng");
                        menu.querySelector("div").style.display = 'block'
                    } else {
                        menu.classList.add("hideng");
                        menu.querySelector("div").style.display = 'none'
                    }
                    return false;
                });
            } else {
                menu.addEventListener('click', function(e) {
                    e.preventDefault();
                    let args;
                    document.execCommand(menus[i].name, false, args);
                    content.focus()
                    return false;
                });
            }
            menuDiv.append(menu);
        }

        let container = document.createElement("div")
        container.style.background = "#fff"
        container.style.padding = "7px 10px"
        container.append(menuDiv)
        container.append(content)

        $(this).before(container)

        $(this).hide()
    }
})(jQuery);
webdevyusuf
1455 gün önce

Bu şekilde çalıştı. (ama demin neden çalışmadığını anlamadım)

(function($){
    $.fn.editor = function() {
        let menuDiv = document.createElement("div"), textarea = this;
        menuDiv.style.padding = "9px"
        menuDiv.style.borderBottom = "1px solid #eee"
        menuDiv.style.background = "#fff"
        
        let menus = [
            {
                "name":"bold",
                "icon": "fas fa-bold"
            },
            {
                "name":"italic",
                "icon": "fas fa-italic"
            },
            {
                "name":"underline",
                "icon": "fas fa-underline"
            },
            {
                "name":"justifyLeft",
                "icon": 'fas fa-align-left'
            },
            {
                "name":"justifyCenter",
                "icon": 'fas fa-align-center'
            },
            {
                "name":"justifyRight",
                "icon": 'fas fa-align-right'
            },
            {
                "name":"justifyFull",
                "icon": 'fas fa-align-justify'
            },
            {
				"id":1,
                "name":"",
                "icon":"fas fa-image",
                "upload":true,
                "content":`
                <form action="" method="post">
                    <input type="file" name="test" class="form-control" />
                </form>
                `
            },
            {
				"id":2,
                "name":"",
                "icon":'fas fa-file-video',
                "upload":true,
				"content":`
                    <input type="file" name="test" class="form-control" />
				`
            }
        ]

        
        let content = document.createElement("div");

        content.setAttribute("contenteditable", "true");
        content.style.outline = 'none'
        content.style.padding = '12px'
        content.style.margin = '8px'
        content.style.border = '1px solid #eee'
        content.style.background = "#fff"
        content.style.height = "300px"
        content.style.overflow = "auto"
        content.addEventListener("keyup", () => {
            setTimeout(() => {
                textarea[0].value = content.innerHTML;
            }, 1)
        });

        for (let i = 0; i < menus.length; i++) {
            let menu = document.createElement("a");
            menu.setAttribute("href", "#")
            menu.innerHTML = `<i class='${menus[i].icon}'></i>`
            menu.style.padding = "3px 7px"
            menu.style.textDecoration = "none"
            menu.style.border = "1px solid #999"
            menu.style.marginRight = "5px"
            menu.style.color = "#333"
            menu.style.position = "relative"
            menu.className = "hideng";
            if (menus[i].upload) {
                content.innerHTML += `
                <div class="modal${menus[i].id}" style="
                    display: none;
                    background: #fff;
                    box-shadow:
                        0 0  0 2px rgb(255,255,255),
                        0.3em 0.3em 1em rgba(0,0,0,0.3);
                    width: 250px;
                    padding: 5px;
                    height: 200px;
                    border: 1px solid #eee;
                    position: absolute;
                    left: 30px;
                    top: 70px;
					cursor: default;
                ">
                ${menus[i].content}
                </div>
                `
                menu.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (menu.classList.contains("hideng")) {
                        menu.classList.remove("hideng");
                        document.querySelector(".modal" + menus[i].id).style.display = 'block'
                    } else {
                        menu.classList.add("hideng");
                        document.querySelector(".modal" + menus[i].id).style.display = 'none'
                    }
                    return false;
                });
            } else {
                menu.addEventListener('click', function(e) {
                    e.preventDefault();
                    let args;
                    document.execCommand(menus[i].name, false, args);
                    content.focus()
                    return false;
                });
            }
            menuDiv.append(menu);
        }

        let container = document.createElement("div")
        container.style.background = "#fff"
        container.style.padding = "7px 10px"
        container.append(menuDiv)
        container.append(content)

        $(this).before(container)

        $(this).hide()
    }
})(jQuery);