富文本编辑器回显input框
时间: 2023-11-09 21:02:26 浏览: 165
富文本编辑框
5星 · 资源好评率100%
富文本编辑器一般是用textarea标签实现的,而input标签是单行输入框,不适合显示富文本。如果要回显富文本,可以把textarea的值设置为富文本内容,然后把textarea隐藏掉,使用一个div元素来显示富文本内容。
示例代码:
HTML:
<textarea id="editor" name="content" style="display:none;"></textarea>
<div id="content"></div>
JavaScript:
// 初始化富文本编辑器
var editor = new Editor({
// 配置选项...
});
editor.create(document.getElementById('editor'));
// 回显富文本内容
var content = document.getElementById('content');
content.innerHTML = editor.txt.html(); // editor.txt.text() 获取纯文本内容
// 提交表单时获取富文本内容
var form = document.getElementById('myform');
form.addEventListener('submit', function(e) {
var textarea = document.getElementById('editor');
textarea.value = editor.txt.html();
});
```
阅读全文