[英]Create List Item From Rich Text Field Content
I want to take the user input text from this div and input tag I've got: 我想从这个div和输入标签中获取用户输入的文本:
<input id="title" placeholder="Title (Optional)">
<div class="editor" contenteditable></div>
The div is a rich text field that I've put in place of a regular textarea tag div是一个富文本字段,我已将其替换为常规textarea标签
and create a list item inside a <ul>
tag. 并在<ul>
标记内创建一个列表项。
Here is the javascript I've got, but is not working... 这是我所拥有的JavaScript,但无法正常使用...
(works just fine with regular text area, but I get nothing with the rich text form) (在常规文本区域中可以正常工作,但是在富文本格式中我什么也没得到)
/*------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 = '';
}
};
getElementsByClassName('editor')
is going to return an array of elements with the class editor
, so you can't just do .value
, you need to get the first element in the array. getElementsByClassName('editor')
将使用类editor
返回元素数组,因此,您不仅可以执行.value
,还需要获取数组中的第一个元素。
Also, since it's a div, I think you want to use textContent
, so it'll look like this 另外,由于它是一个div,所以我认为您想使用textContent
,因此它看起来像这样
var inputText = document.getElementsByClassName('editor')[0].textContent
for the input type you have to write following into your javascript: 对于输入类型,您必须将以下内容写入javascript:
var input_val = getElementsByClassName('title').value;
for the div you have to write following into your javascript: 对于div,您必须将以下代码写入javascript:
var div_val = getElementsByClass('editor').value;
I hope this will work 我希望这会起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.