Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Помогите написать текстовый редактор (https://javascript.ru/forum/events/72942-pomogite-napisat-tekstovyjj-redaktor.html)

Devil198711 08.03.2018 22:46

Помогите написать текстовый редактор
 
Есть необходимость создать простой текстовый редактор на чистом js под chrome. При этом реализовать его надо без iframe а на div contenteditable.
потратил уже целый день на поиск решение как вернуть каретку в прежнее положение если кликаю по кнопке (ну к примеру bold)
Помогите ПЛИЗ!!!

j0hnik 09.03.2018 02:26

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#area{
			border: 1px solid gray;
			width: 500px;
			height: 100px;
			font-weight: 
		}

	</style>
</head>
<body>
	<div contenteditable id="area"></div>
	font-weight: <button>bold</button>
	<script>
		document.querySelector('button').addEventListener('mouseup', function(){
			document.querySelector('#area').focus();
		});

	</script>

рони 09.03.2018 08:53

j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него.

Devil198711 09.03.2018 13:18

Цитата:

Сообщение от j0hnik (Сообщение 480093)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#area{
			border: 1px solid gray;
			width: 500px;
			height: 100px;
			font-weight: 
		}

	</style>
</head>
<body>
	<div contenteditable id="area"></div>
	font-weight: <button>bold</button>
	<script>
		document.querySelector('button').addEventListener('mouseup', function(){
			document.querySelector('#area').focus();
		});

	</script>


Спасибо частично помогло:)

j0hnik 09.03.2018 16:14

Цитата:

Сообщение от рони (Сообщение 480096)
j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него.

Рони, это неудобно, а если вам нужен и жирный и курсив?
Можете редактор открыть (word например) и посмотреть как там.

рони 09.03.2018 16:34

Цитата:

Сообщение от j0hnik
Можете редактор открыть (word например)

есть куча плагинов текстовых редакторов, тут изобретается велосипед.

j0hnik 09.03.2018 18:47

Цитата:

Сообщение от рони (Сообщение 480096)
j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него.

Значит это как доп. задание?

рони 09.03.2018 21:06

Цитата:

Сообщение от j0hnik
Значит это как доп. задание?

это было моё предположение.

рони 09.03.2018 21:07

Devil198711,
на всякй случай 10 Best jQuery and HTML5 WYSIWYG Plugins

Devil198711 09.03.2018 23:38

У меня стоит задача написать редактор на чистом js, многое уже сделано, но вот вот при вызове модального окна для ввода данных о ссылкке происходит потеря фокуса выделенного текста. Вот мне и нужно после ввода данных вернуть фокус в прежнее место, как это работало с iframe


Часовой пояс GMT +3, время: 09:48.