простой редактор HTML и получить содержание HTML, используя div или textarea - PullRequest
Новая
       17

простой редактор HTML и получить содержание HTML, используя div или textarea

2 голосов
/ 09 марта 2019

Попытка создать простой редактор HTML.

$('#edit').on('input', function(e){
	console.log($(this).html());
});
.edit{
background:gold;
min-height:140px;
font-size:1.6em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='edit' id='edit' contenteditable></div>

введите его в div edit: 

lorem
ipsum

, затем поместите курсор в конец lorem- и нажмите spacebar и del на клавиатуре, чтобы получить это:

lorem ipsum

, и вы увидите проблему - ipsum имеет гораздо больший размер шрифта, чем lorem.

Это первый вопрос - как этого избежать?

Моя вторая попытка использовала textarea вместо contenteditable div, но в этом случае я не могу использовать document.execCommand, чтобы изменить некоторый текст на bold и т. Д.

Так как же это сделать?установить html-теги внутри textarea, как это делается здесь на stackoverflow, или на wordpress сайтах и ​​так далее?

Моя конечная цель - предоставить простому редактору всего несколько команд - bold, italic and align Пользователи должны иметь возможность печатать и стилизовать текст, а нажатие на кнопку должно получить HTML-контент.

Любая помощь?

Ответы [ 2 ]

1 голос
/ 09 марта 2019

Как отмечают многие разгневанные разработчики, contenteditable действительно ужасно - не ожидайте ничего хорошего, но давайте все равно попробуем.

Завершая редактируемый div внутри другого div и применяяCSS-шрифт для этой оболочки, текст не должен увеличиваться при выполнении процесса, описанного в вопросе.HTML все еще уродлив (бесполезные теги span с размером шрифта 1 мегабайт), но текстовое содержимое приемлемо. 

const editable = document.querySelector('div[contenteditable]');

editable.onkeyup = () => {
  document.querySelector('#html-log').innerText = editable.innerHTML;
  document.querySelector('#text-log').innerText = JSON.stringify(editable.innerText);
}
#wrapper {
  font-size: 1.2em;
}
div[contenteditable] {
  width: 100%;
  height: 100%;
  border: solid;
  font-size: 1em;
}

  


HTML content

Текстовое содержание

0 голосов
/ 09 марта 2019

.execCommand()

Попробуйте загрузить первый параметр динамически, назначив #id каждого <button> для соответствия команде. 

<button id="bold">B</button>
...
... var ID = this.id;
return document.execCommand(ID, false, null)

Демо 

$('#WYSINWYE').on('submit', function() {
  return false;
});
$('#edit').focus();
$('#edit').on('keyup', function() {
  $('#view').html($(this).text());
});
$('#ctrl button').on('click', function() {
  var ID = this.id;
  if (ID === 'HTML') {
    $('#view').slideToggle('750')
    return;
  }
  return document.execCommand(ID, false, null);
});
form {
  width: 100%;
  height: fit-content;
  font: 400 16px/1.25 Arial;
}

#view {
  background: gold;
  min-height: 100px;
  font: inherit;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

#ctrl {
  height: 20px;
}

#edit {
  font: inherit;
  font-family: Consolas;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

button {
  display: inline-block;
  font: inherit;
  width: 36px;
  height: 24px;
  line-height: 24px;
  margin: 0 -2px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 1px;
}

b:hover,
button:hover {
  color: rgba(205, 121, 0, 0.8);
}

#HTML {
  float: right
}

#ctrl button:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#ctrl button:nth-of-type(6) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#ctrl button:last-of-type {
  border-radius: 4px;
}
<link href="//use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<form id='WYSINWYE'>
  <fieldset id='view' class='text' contenteditable='false' style='display:none'>
  </fieldset>
  <fieldset id='ctrl'>
    <button id='bold' class="fas fa-bold"></button>
    <button id='italic' class="fas fa-italic"></button>
    <button id='underline' class="fas fa-underline"></button>
    <b>|</b>
    <button id='justifyLeft' class="fas fa-align-left"></button>
    <button id='justifyCenter' class="fas fa-align-center"></button>
    <button id='justifyRight' class="fas fa-align-right"></button>
    <button id='HTML' class="fas fa-code"></button>
  </fieldset>
  <fieldset id='edit' class='text' contenteditable='true'>
  </fieldset>
</form>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...