Çalışmayan input
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);
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (3)
Bu şekilde çalıştı hata olursa tekrar yazarı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" multiple />
<button type="submit" class="btn btn-primary mt-1">Ekle</button>
</form>
`
},
{
"id":2,
"name":"",
"icon":'fas fa-file-video',
"upload":true,
"content":`
<input type="file" name="test" class="form-control" />
`
}
]
let container = document.createElement("div")
container.style.background = "#fff"
container.style.padding = "7px 10px"
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) {
container.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: auto;
border: 1px solid #eee;
position: absolute;
left: 60px;
top: 80px;
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);
}
container.append(menuDiv)
container.append(content)
$(this).before(container)
$(this).hide()
}
})(jQuery);
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);