从富文本字段内容创建列表项

Question

我想从这个div和输入标签中获取用户输入的文本：

<input id="title" placeholder="Title (Optional)">

<div class="editor" contenteditable></div>

div是一个富文本字段，我已将其替换为常规textarea标签

并在<ul>标记内创建一个列表项。

这是我所拥有的JavaScript，但无法正常使用...

（在常规文本区域中可以正常工作，但是在富文本格式中我什么也没得到）

/*------POST SUBMIT JS------*/

//target all necessary HTML elements
var ul = document.getElementById('list'),
    removeAll = document.getElementById('removeAll'),
    add = document.getElementById('add');

//make something happen when clicking on 'submit'
add.onclick = function(){
  addLi(ul)
};

//function for adding items
function addLi(targetUl){
  var inputText = document.getElementsByClassName('editor').value, //grab input text (the new entry)
      header = document.getElementById('title').value, //grab title text
      li = document.createElement('li'), //create new entry/li inside ul
      content = document.createElement('div'),
      title = document.createElement('div'),
      removeButton = document.createElement('button'); //create button to remove entries

  content.setAttribute('class','content')
  title.setAttribute('class','title')
  content.innerHTML = inputText;
  title.innerHTML = header;

  if (inputText.split(' ').join(' ').length === 0) {
    //check for empty inputs
    alert ('No input');
    return false;
  }


  removeButton.className = 'removeMe'; //add class to button for CSS
  removeButton.innerHTML = 'Delete'; //add text to the remove button
  removeButton.setAttribute('onclick', 'removeMe(this);'); //creates onclick event that triggers when entry is clicked

  li.appendChild(title); //add title textnode to created li
  li.appendChild(content); //add content textnode to created li
  li.appendChild(removeButton); //add Remove button to created li

  targetUl.appendChild(li); //add constructed li to the ul
}

//function to remove entries
function removeMe(item){
  var deleteConfirm = confirm('Are you sure you want to delete this entry?');
  if (deleteConfirm){var parent = item.parentElement;
  parent.parentElement.removeChild(parent)}
};

function checkRemoval(){
  var entryConfirm = confirm('Are you sure you want to delete all entries?');
  if (entryConfirm){
    ul.innerHTML = '';
  }
};

这是我正在做的演示

这是使用textarea标签的演示

Answer 1

getElementsByClassName('editor')将使用类editor返回元素数组，因此，您不仅可以执行.value ，还需要获取数组中的第一个元素。

另外，由于它是一个div，所以我认为您想使用textContent ，因此它看起来像这样

var inputText = document.getElementsByClassName('editor')[0].textContent

Answer 2

对于输入类型，您必须将以下内容写入javascript：

var input_val = getElementsByClassName('title').value;

对于div，您必须将以下代码写入javascript：

var div_val = getElementsByClass('editor').value;

我希望这会起作用