Форум

ekad · #1 (**permalink**) 14.12.2021, 11:03

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>

ksa · #2 (**permalink**) 14.12.2021, 11:35

Сообщение от ekad

и мигал курсор строкой ниже от картинки?

Курсор появляется в элементах для редактирования (по дефолту), таких как

<input />
<textarea></textarea>

У тебя их пока нет...

voraa · #3 (**permalink**) 14.12.2021, 12:06

Сообщение от ksa

Курсор появляется в элементах для редактирования (по дефолту), таких как
<input />
<textarea></textarea>

У тебя их пока нет...

И в элементах с contenteditable="true"
А там такой есть.

ksa · #4 (**permalink**) 14.12.2021, 12:11

Тогда, возможно будет достаточно, вставить картинку в еще один блок...

А "жирность" включать на весь box?
Или только на некоторую часть текста?

voraa · #5 (**permalink**) 14.12.2021, 12:15

Сообщение от ksa

А "жирность" включать на весь box?
Или только на некоторую часть текста?

Я так понял, что при нажатии на "жирность" весь текст, который должен печататься дальше должен быть жирным.

Я никогда не делал такие редакторы, так что ничего путного тут не скажу.

ekad · #6 (**permalink**) 14.12.2021, 12:26

Сообщение от ksa

Тогда, возможно будет достаточно, вставить картинку в еще один блок...

А "жирность" включать на весь box?
Или только на некоторую часть текста?

при нажатии дальше печатается жирным еще раз при нажатии нормальным

ksa · #7 (**permalink**) 14.12.2021, 12:42

ekad, вот вариант с курсором...
Но это вовсе упрощенно.

Вот почитай что пишут про позиционирование в таких редактируемых блоках
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>

ksa · #8 (**permalink**) 14.12.2021, 12:59

Сообщение от ekad

при нажатии дальше печатается жирным еще раз при нажатии нормальным

Нашел еще вот такую статейку по этому "редактору"...
https://snipp.ru/php/contenteditable

Может тебе поможет.

ekad · #9 (**permalink**) 14.12.2021, 13:24

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript