我正在制作笔记应用程序,用于输入我正在使用tinymce和Firebase.问题是我无法在tinymce文本区域中检索数



我正在制作notes应用程序,用于输入,我使用tinymce,用于数据库,我使用Firebase。我可以将数据保存到firebase,但问题是我无法在tinymce文本区域检索数据进行编辑。如果我使用默认的文本区域,我可以检索,但文本并不丰富。数据库部分js

firebase.auth().onAuthStateChanged(function(user) {
var user = firebase.auth().currentUser;
if (user) {
var uid = user.uid;
var reviewForm = document.getElementById('reviewForm');
var fullName = document.getElementById('fullName');
var message = document.getElementById('message');
var hiddenId = document.getElementById('hiddenId');
reviewForm.addEventListener('submit', (e) => {
e.preventDefault();
if (!fullName.value || !message.value) return null
var id = hiddenId.value || Date.now()
db.ref(uid + '/notes/' + id).set({
fullName: fullName.value,
message: message.value
});
fullName.value = '';
message.value = '';
hiddenId.value = '';
});
// READ REVEIWS
var x = document.createElement("HR");
var reviews = document.getElementById('reviews');
var reviewsRef = db.ref(uid + '/notes/');
reviewsRef.on('child_added', (data) => {
var li = document.createElement('li')
li.id = data.key;
li.innerHTML = reviewTemplate(data.val())
reviews.appendChild(li);
});
reviewsRef.on('child_changed', (data) => {
var reviewNode = document.getElementById(data.key);
reviewNode.innerHTML = reviewTemplate(data.val());
});
reviewsRef.on('child_removed', (data) => {
var reviewNode = document.getElementById(data.key);
reviewNode.parentNode.removeChild(reviewNode);
});
reviews.addEventListener('click', (e) => {
var reviewNode = e.target.parentNode
// UPDATE REVEIW
if (e.target.classList.contains('edit')) {
fullName.value = reviewNode.querySelector('.fullName').innerText;
message.value = reviewNode.querySelector('.message').innerText;
hiddenId.value = reviewNode.id;
}
// DELETE REVEIW
if (e.target.classList.contains('delete')) {
var id = reviewNode.id;
db.ref(uid + '/notes/' + id).remove();
}
});
function reviewTemplate({ fullName, message }) {
return `
<div class='fullName' style="font-size: 12px;  color: black; font-weight: bold; background: rgba(204, 204, 204, 0); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;">${fullName}</div>
<div class='message' style=" font-size: 12px; color: #111111; background: rgba(204, 204, 204, 0); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">${message}</div>
<button class='delete' style="width: 50px; color: white; background-color: #aa3343; border: 0; font-size: 13px;">Delete</button>
<button class='edit' style="width: 50px; color: black; background-color: #5a83da; border: 0; font-size: 13px;">Edit</button>
<hr>
`
};
} else {
// No user is signed in.
}
});

Html

<script>
tinymce.init({
selector: '#message'
});
</script>
<form id='reviewForm' style="background-color: #EAEAEA">
<input type="hidden" id='hiddenId' />
<input type="text" id='fullName' placeholder="Add Title" style="background-color: #EAEAEA; "/>
<br/>
<textarea id='message' placeholder="Add Content" style="background-color: #EAEAEA;"></textarea>
<br/>
<button id="sbutton" type='submit' style="color:rgb(255, 255, 255);  height:50px; align-self: center;">Save</button>
</form>
</div>
</div>**
TinyMCE的工作原理是用包含Tiny编辑器的<iframe>替换标准的<textarea>HTML元素。这意味着类似的代码
var message = document.getElementById('message');

在TinyMCE中找不到数据。相反,它将找到原始的、隐藏的(空的(<textarea>

从TinyMCE获取数据:

如果提交了包含TinyMCE的<form>,Tiny的内容就像任何HTML表单一样是POST-ed。此外,可以使用.getContent()方法从TinyMCE中检索内容。这将返回一个包含Tiny内容的HTML字符串:

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getcontent

相关内容

最新更新