Как сделать отступ при вставке картинки и печать жирным шрифтом в div
1. При нажатии вставляется картинка. Как добавить отступ от картинки вниз на один курсор, то есть чтобы при нажатии вставилась картинка и мигал курсор строкой ниже от картинки?
2. При нажатии на жирный шрифт, что бы курсор перешел в режим жирного шрифта?
var o=document.getElementById('box');
o.onclick = function() {
var img = new Image();
var div = document.getElementById('box');
div.appendChild(img);
img.src ='https://ru.wikipedia.org/static/images/project-logos/ruwiki.png';
img.className = "image";
}
<div onclick="bold();">жирный фрифт</div> <div contenteditable="true" style="height:200px;width:200px;" id="box"></div> |
Цитата:
<input /> <textarea></textarea> У тебя их пока нет... |
Цитата:
А там такой есть. |
Тогда, возможно будет достаточно, вставить картинку в еще один блок...
А "жирность" включать на весь box? Или только на некоторую часть текста? |
Цитата:
Я никогда не делал такие редакторы, так что ничего путного тут не скажу. |
Цитата:
|
ekad, вот вариант с курсором...
Но это вовсе упрощенно. :nono: Вот почитай что пишут про позиционирование в таких редактируемых блоках https://askdev.ru/q/kak-ustanovit-po...ent-div-13745/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
#box {
border: 1px solid;
padding: 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
const o = document.getElementById('box');
o.onclick = function() {
const d = document.createElement('div')
const b = document.createElement('br')
const img = new Image();
img.src ='https://ru.wikipedia.org/static/images/project-logos/ruwiki.png';
img.className = "image";
o.appendChild(img);
d.appendChild(b);
o.appendChild(d);
const range = document.createRange()
const sel = window.getSelection()
range.setStart(o.childNodes[1], 0)
range.collapse(true)
sel.removeAllRanges()
sel.addRange(range)
}
})
function bold() {
}
</script>
</head>
<body>
<div onclick="bold();">жирный фрифт</div>
<div contenteditable="true" style="height:200px;width:200px;" id="box"></div>
</body>
</html>
|
Цитата:
https://snipp.ru/php/contenteditable Может тебе поможет. |
Спасибо.
|
| Часовой пояс GMT +3, время: 13:52. |