因此，我制作了此网页，其中是一个伪RTF编辑器，可将数据插入数据库。 Insert into php the html in a div
在文本样式方面，从下拉列表中选择文本样式后键入的文本时遇到问题。我希望它像单词，其中在单击特定的文本样式后，它将开始使用该文本样式键入内容，但不会影响div中其余的文本。 Codepen
<style>
#fake_textarea {
width: 100%;
height: 200px;
border: 1px solid red;
}
<!-- Add css to modify the text -->
#jBold {
font-weigth: bold;
}
#jItalic{
font-style:italic;
}
#jUnderline{
text-decoration: underline;
}
#jLT{
text-decoration: line-through;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<body>
<!-- Put buttons here to modify the format -->
<div>
<select id="select_font" onchange="changeFont(this);">
<option value="Arial">Arial</option>
<option value="Sans Serif" selected>Sans Serif</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Impact">Impact</option>
<option value="Bookman">Bookman</option>
<option value="Garamond">Garamond</option>
<option value="Palatino">Palatino</option>
<option value="Georgia">Georgia</option>
</select>
<select id="select-size" onchange="changeSize(this);">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="28">28</option>
<option value="32">32</option>
<option value="36">36</option>
<option value="40">40</option>
<option value="44">44</option>
<option value="48">48</option>
<option value="52">52</option>
<option value="56">56</option>
<option value="58">58</option>
</select>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button><button id="jUnderline">U</button><button id="jSuperScript">A<sup>A</sup></button><button id="jSubScript">A<sub>A</sub></button>
<button id="jLT">A</button>
<div>
<!-- Add a form -->
<form method="post" action="postcontent.php" id="contentform">
<!-- Add some hidden input in order for the form to submit some sort of value -->
<input type="hidden" name="content" id="hiddeninput" />
<!-- Add a place to insert the content -->
<div id='fake_textarea' contenteditable>
Select some text and click the button to make it bold...
<br>Or write your own text
</div>
<!-- Add a submit button-->
<button id="submit">Submit</button>
</form>
<!-- Script to make a selected text bold-->
<script type="text/javascript">
$(document).ready(function() {
$('#jBold').click(function() {
document.execCommand('bold');
});
});
</script>
<!-- Script to make a selected text italic-->
<script type="text/javascript">
$(document).ready(function() {
$('#jItalic').click(function() {
document.execCommand('italic');
});
});
</script>
<!-- Script to make add an underline-->
<script type="text/javascript">
$(document).ready(function() {
$('#jUnderline').click(function() {
document.execCommand('underline');
});
});
</script>
<!-- Script to make make selected text a superscript-->
<script type="text/javascript">
$(document).ready(function() {
$('#jSuperScript').click(function() {
document.execCommand('superscript');
});
});
</script>
<!-- Script to make make selected text a subscript-->
<script type="text/javascript">
$(document).ready(function() {
$('#jSubScript').click(function() {
document.execCommand('subscript');
});
});
</script>
<!-- Script to add a line-through-->
<script type="text/javascript">
$(document).ready(function() {
$('#jLT').click(function() {
document.execCommand('strikeThrough');
});
});
</script>
<!-- Changes the font type -->
<script type="text/javascript">
function changeFont(font) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-family:' + font.value + ';';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}
</script>
<!-- Changes the font size -->
<script type="text/javascript">
function changeSize(size) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-size:' + size.value + 'px;';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}
</script>
<!-- Script to add value to the hidden input then submits it-->
<script type="text/javascript">
$( "#submit" ).click(function() {
var htmlString = $( "#fake_textarea" ).html();
$('#hiddeninput').val(htmlString);
// Submit the real form
$('#contentform').submit();
});
</script>
</body>
答案 0 :(得分：0)
这是必须完成的工作的一般性想法，这样您可以内联不同的样式。
您需要将div内的所有文本（即contenteditable包裹在另一个元素内，我选择了span。 span然后需要将您控制的所有样式都应用到它。然后，您需要侦听将文本输入到可编辑div中的所有方法。无论何时输入文本，都需要检查当前应用的样式过滤器是否与先前的文本元素匹配。您可以使用window.getSelection().anchorNode.parentNode获取前一个元素的父元素。如果匹配，则只需将新文本附加到上一个元素。如果不匹配，则使用适当的样式创建一个新元素。
这里是一个示例，其中可以控制font-size，font-family和color的链接。
https://jsfiddle.net/nrayburn/50uhdwfg/100/
该示例存在一些问题，但我想带您开始。键入时，插入记号不会随文本一起移动。这是因为调用了event.preventDefault()，因此移动它不会经历正常的过程。另一个问题是新元素没有插入正确的位置，您只需要找出插入正确位置的最佳方法即可。除上一个元素的末尾外，它也不处理在任何地方插入文本。编辑文本将需要检查样式是否更改。如果是这样，则需要使用旧格式将两侧的文本拆分为新的跨度，并使用当前格式在中间创建一个新的跨度。
答案 1 :(得分：0)
因此，我已经解决了即时更改字体样式的问题，但是当涉及到大于36的任何东西时，我仍然试图找出该问题。
我添加了
document.execCommand("fontName", false, font);
我的更改字体脚本结尾
function changeFont(font) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-family:' + font.value + ';';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
document.execCommand("fontName", false, font);
}
关于更改字体大小，我插入了
if(size=="8")
{
document.execCommand("fontSize", false, "1");
}
if(size=="10")
{
document.execCommand("fontSize", false, "2");
}
if(size=="12")
{
document.execCommand("fontSize", false, "3");
}
if(size=="14")
{
document.execCommand("fontSize", false, "4");
}
if(size=="18")
{
document.execCommand("fontSize", false, "5");
}
if(size=="24")
{
document.execCommand("fontSize", false, "6");
}
if(size=="36")
{
document.execCommand("fontSize", false, "7");
}
在它的结尾，这样就可以更改字体大小脚本
function changeSize(size) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-size:' + size.value + 'px;';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
if(size=="8")
{
document.execCommand("fontSize", false, "1");
}
if(size=="10")
{
document.execCommand("fontSize", false, "2");
}
if(size=="12")
{
document.execCommand("fontSize", false, "3");
}
if(size=="14")
{
document.execCommand("fontSize", false, "4");
}
if(size=="18")
{
document.execCommand("fontSize", false, "5");
}
if(size=="24")
{
document.execCommand("fontSize", false, "6");
}
if(size=="36")
{
document.execCommand("fontSize", false, "7");
}
}
我希望找到一种增加字体大小的方法或除在末尾添加document.execCommand("fontSize", false, "7");之外的其他方法。