我正在尝试编写一个简单的Web文本编辑器。 我想要做的是让用户在textarea(或类似textarea的输入)上键入并使用鼠标或Shift键选择文本,然后单击按钮以应用基于颜色的效果。 我的问题是这样的:
P.S。我不想要一个完整的富文本编辑器。我只需要一个效果
感谢
答案 0 :(得分:2)
如何以单击按钮时不丢失的方式捕获选择
如何保存文字和选择
我完全相信@TimDown's answer to a different question here。它用另一个字符串替换当前选择。
我们通过获取颜色选择器的值并将其放入span标签并插入当前选定的文本来创建字符串。
- 如何制作WYSIWYG
使用contenteditable
div并在表单提交时将输出汇集到隐藏的textarea。
这一切都在一起。同样,第一个函数replaceSelection()
不是我的代码。
document.getElementById('color').onchange = function() {
var replace = document.createElement('span');
replace.style.color = this.value;
replace.textContent = window.getSelection().toString();
replaceSelection(replace.outerHTML, true);
}
document.getElementById('wysiwyg').onsubmit = function() {
document.getElementById('result').textContent = document.getElementById('#input').innerHTML;
}
// @TimDown
function replaceSelection(html, selectInserted) {
var sel, range, fragment;
sel = window.getSelection();
// Test that the Selection object contains at least one Range
if (sel.getRangeAt && sel.rangeCount) {
// Get the first Range (only Firefox supports more than one)
range = window.getSelection().getRangeAt(0);
range.deleteContents();
// Create a DocumentFragment to insert and populate it with HTML
// Need to test for the existence of range.createContextualFragment
// because it's non-standard and IE 9 does not support it
if (range.createContextualFragment) {
fragment = range.createContextualFragment(html);
} else {
// In IE 9 we need to use innerHTML of a temporary element
var div = document.createElement("div"), child;
div.innerHTML = html;
fragment = document.createDocumentFragment();
while ( (child = div.firstChild) ) {
fragment.appendChild(child);
}
}
var firstInsertedNode = fragment.firstChild;
var lastInsertedNode = fragment.lastChild;
range.insertNode(fragment);
if (selectInserted) {
if (firstInsertedNode) {
range.setStartBefore(firstInsertedNode);
range.setEndAfter(lastInsertedNode);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
}
#input {
min-height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 1px;
}
#result {
display: none;
}
#wysiwyg input[type="submit"] {
height: 2em;
float: right;
}
<form action="" method="post" id="wysiwyg">
<div id="input" contenteditable="true"></div>
<textarea name="result" id="result"></textarea>
<input type="color" id="color" />
<input type="submit" value="submit" />
</form>
答案 1 :(得分:0)
如何以单击按钮时不会丢失的方式捕获选区
您可以使用window.getSelection
方法获取所选文字。
如何保存文字和选择
将其保存在变量中。
例如:var selection = window.getSelection().toString();
如何制作WYSIWYG
您可以使用window.execCommand
方法执行不同的操作,例如粗体,下划线或缩小文本(以及许多其他操作)。
我创建了一个简单的所见即所得编辑器,它使用粗体,下划线和斜体显示所选文本。