Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.03.2018, 22:46
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Помогите написать текстовый редактор
Есть необходимость создать простой текстовый редактор на чистом js под chrome. При этом реализовать его надо без iframe а на div contenteditable.
потратил уже целый день на поиск решение как вернуть каретку в прежнее положение если кликаю по кнопке (ну к примеру bold)
Помогите ПЛИЗ!!!
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2018, 02:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2018, 08:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него.
Ответить с цитированием
  #4 (permalink)  
Старый 09.03.2018, 13:18
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Сообщение от j0hnik Посмотреть сообщение
<!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>

Спасибо частично помогло
Ответить с цитированием
  #5 (permalink)  
Старый 09.03.2018, 16:14
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони Посмотреть сообщение
j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него.
Рони, это неудобно, а если вам нужен и жирный и курсив?
Можете редактор открыть (word например) и посмотреть как там.
Ответить с цитированием
  #6 (permalink)  
Старый 09.03.2018, 16:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от j0hnik
Можете редактор открыть (word например)
есть куча плагинов текстовых редакторов, тут изобретается велосипед.
Ответить с цитированием
  #7 (permalink)  
Старый 09.03.2018, 18:47
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони Посмотреть сообщение
j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него.
Значит это как доп. задание?
Ответить с цитированием
  #8 (permalink)  
Старый 09.03.2018, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от j0hnik
Значит это как доп. задание?
это было моё предположение.
Ответить с цитированием
  #9 (permalink)  
Старый 09.03.2018, 21:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Devil198711,
на всякй случай 10 Best jQuery and HTML5 WYSIWYG Plugins
Ответить с цитированием
  #10 (permalink)  
Старый 09.03.2018, 23:38
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите написать условия совершения события wingsfury Events/DOM/Window 1 21.12.2016 23:03
Ребят помогите, не знаю как написать скрипт с проверкой файлов на присутствие sergera0 Ваши сайты и скрипты 1 16.07.2016 13:35
Помогите написать скрипт! tema1508 Общие вопросы Javascript 1 01.03.2013 01:05
Онлайновый текстовый редактор html/js. Нужны советы. elf2002 Javascript под браузер 9 03.01.2012 03:48
Помогите плисс написать скрипт Gnusmus Events/DOM/Window 6 17.08.2011 15:51