Как показать текстовый редактор в div и показать добавленное содержимое после нажатия кнопки? - PullRequest
Новая
       2

Как показать текстовый редактор в div и показать добавленное содержимое после нажатия кнопки?

0 голосов
/ 05 июля 2018

У меня есть окно типа div и кнопка ADD. Поэтому, когда я нажимаю кнопку add, должно появиться text editor, и я должен иметь возможность добавлять свой текст и содержимое, и, наконец, когда я нажимаю ok, оно должно отображать добавленное содержимое в div. Если я нажму cancel, он должен показать старый div с кнопкой ADD.

Какая должна быть логика для этого? Я постараюсь кодировать его сам.

Ответы [ 4 ]

0 голосов
/ 05 июля 2018

Предполагая, что текстовым редактором вы имеете в виду элемент с предварительно заполненным текстом, который можно редактировать, вы можете использовать атрибут contenteditable в div. При этом вы можете сохранить часть форматирования.

Как вы упомянули, я воздержусь от публикации точного кода. Вы можете взять подсказки из следующего:

Прикрепите прослушиватель событий к кнопке ADD, которая может добавить атрибут contenteditable к элементу текстового редактора в разметке

Если был <div id="text-editor">Some text here</div>

addButton.addEventListener('click', function() {
  document.getElementById('text-editor').setAttribute('contenteditable', 'true');
})

При нажатии на элемент с текстом «Некоторый текст здесь» можно редактировать, как вам нравится. Нажав OK, вы можете просто удалить атрибут contenteditable 

okButton.addEventListener('click', function() {
  document.getElementById('text-editor').removeAttribute('contenteditable');
})

Нажатие на отмену и возврат означает, что вы должны были кэшировать более раннее состояние текстового редактора до редактирования. Итак, измените слушатель кнопки добавления 

let oldState = '';
let textEditorElement = document.getElementById('text-editor');
addButton.addEventListener('click', function() {
  oldState = textEditorElement.innerHTML;
  textEditor.setAttribute('contenteditable', 'true');
})

А при отмене вы можете просто вернуться к oldState, 

cancelButton.addEventListener('click', function() {
  textEditor.innerHTML = oldState;
  textEditor.removeAttribute('contenteditable');
})

Для полноценного текстового редактора, посмотрите DraftJS

0 голосов
/ 05 июля 2018 

$('#add').on('click',function(){
  $('textarea').show();
  var text = $('textarea').val();  
  $('#content').text(text);
});

$('#cancel').on('click',function(){
  $('textarea').val("").hide();
  $('#content').text("Your div content here");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
 Your div content here
</div>
<textarea style="display:none"></textarea>
<button id="add">ADD</button> <button id="cancel">CANCEL</button>
0 голосов
/ 05 июля 2018

Моя логика следующая:

1, вам нужно свойство css display, чтобы скрыть ваш text editor, а затем вы можете использовать Javascript для управления вашим text editor сокрытием / показом display. Также вы можете использовать display, чтобы скрыть / показать каждый элемент, который вы хотите.

2, Другое дело, как получить и установить значение на text editor, Как только вы получите, вы можете добавить / отредактировать / удалить значение text editor.

Если у вас есть какие-либо вопросы, пожалуйста, дайте мне комментарий.

0 голосов
/ 05 июля 2018

Проверьте, отвечает ли он вашим потребностям или нет 

<!DOCTYPE html>
<html>
<body>
<style>
#myP{
height:200px;
width:200px;
border:1px dashed black;
}
</style>
<div id="myP" contenteditable="false">Click the try button to make me editable</div>

<button onclick="myFunction()">Try it</button>
<button onclick="myFunction1()">Add</button>

<div id="demo"></div>

<script>
function myFunction() {
    var x = document.getElementById("myP").contentEditable="true";

}
function myFunction1() {
    var x = document.getElementById("myP").contentEditable;
    var y = document.getElementById("myP").innerHTML;
    document.getElementById("demo").innerHTML ="hello";
}

</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...