这个社区对于像我这样的初学者继续我一直在做的元素非常有帮助，我为此感谢大家。不过，今天我要再碰碰运气。
我有一个自己无法解决的问题，并且无法真正在网络上搜索具体内容，因为我不知道我需要什么魔法词。介绍完毕，让我继续我的问题。
好的，还有一些。我正在本地 html 文件中创建一个文本/HTML 编辑器，我可以与我的团队共享该编辑器，这对于像我们这样的内容编辑器非常有用，以便我们可以从头开始构建 XML 标签(我将替换其中的 HTML 标签)一旦我拥有了所需的所有资源和代码，我将在一段时间内展示)。
以下是其外观的快速浏览:
所以，简单地解释一下，我的问题主要是关于两件事和一些小问题，请告诉我哪里错了，我愿意接受任何建议。
1) 当我单击
标记时，它应该出现在我的光标当前单击的位置，而不是位于其上方所有文本的下方。但现在，这就是正在发生的事情。我知道我的剧本缺少一些东西，这就是原因。因此，我可以请求初学者容易理解的建议或指导吗？请原谅我在这里要求如此之高。
2)当我点击编辑器上方的某个标签按钮时，它是否可以以粗体格式显示，例如this而不是这个<b>this</b> ？
我在某处读到下面的框是一个文本区域，不允许使用粗体、斜体和下划线等格式，但是，有没有办法用一些 HTML、CSS 和 JS 来做到这一点？ (因为这是我唯一能理解的语言，尽管我是个新手。)
无论如何，我至少需要能够增强一些标签，例如，以便当内容遍布各处时可以轻松识别。如果不可能，您能否向我建议一种我应该学习的语言，或者至少为我指出一些方向？
如果仍然无法做到这一点，至少有没有办法突出显示标签？
现在有一些小问题......
3)我相信有一个特定的enter like <br/> in HTML或space like ( ) in HTML对于 JavaScript？如果我的猜测是正确的，是不是类似 \n ？
4) 最后，现在我是否需要将所有不同的脚本合并到一个 <script></script> 中标签还是可以根据它们的功能将它们分开？
对于这么长的帖子和问题，我既感激又抱歉。我确实希望我能让它更加简洁，但我现在真的不知道如何提出我的问题。
顺便说一句，我将附上我当前的完整代码(因为我不确定需要裁剪什么)。再次感谢大家。我希望我能通过这次考验!
<html>
<center><title>EDEN Editor</title></center>
<div align="center">
<h1>EDEN Editor</h1>
</div>
<hr>
<br/>
<style>
.button {
padding: 10px 20px;
font-size: 15px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #e5e59b;
border: none;
border-radius: 15px;
}
.button:hover {background-color: #f5f5d8}
.button:active {
background-color: #e5e59b;
transform: translateY(1px);
}
</style>
<script language="JavaScript">
helpstat = false;
stprompt = false;
basic = true;
function thelp(swtch){
if (swtch == 1){
basic = false;
stprompt = false;
helpstat = true;
}
else if (swtch == 0) {
helpstat = false;
stprompt = false;
basic = true;
}
else if (swtch == 2) {
helpstat = false;
basic = false;
stprompt = true;
}
}
function treset(){
if (helpstat){
alert("Clears the current editor.");
}
else {
clear = prompt("Are you sure? (y/n)",'');
clear = clear.toLowerCase();
if(clear == 'y') {
document.editor.reset();
document.editor.value = "";
}
}
}
function start(){
if (helpstat){
alert("Elements that appear at the beginning of the document, including TITLE.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<html>\n<head>\n<title></title>\n</head>\n<body>\n";
}
else if (stprompt) {
for(;;){
twrite = prompt("Title?",'');
if (twrite != "" && twrite != null){
break;
}
else {
prompt("You must enter a title.",'Ok, sorry.');
}
}
document.editor.area.value = document.editor.area.value + "<html>\n<head>\n<title>" + twrite + "</title>\n</head>\n<body ";
twrite = prompt("Background color? (blank if none)",'');
if (twrite != "" && twrite != null){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + "bgcolor=" + twrite + " ";
}
twrite = prompt("Background image? (blank if none)",'');
if (twrite != "" && twrite != null){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + "background=" + twrite + " ";
}
twrite = prompt("Text color? (blank if none)",'');
if (twrite != "" && twrite != null){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + "text=" + twrite + " ";
}
twrite = prompt("Link color? (blank if none)",'');
if (twrite != "" && twrite != null){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + "link=" + twrite + " ";
}
twrite = prompt("Visited link color? (blank if none)",'');
if (twrite != "" && twrite != null){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + "vlink=" + twrite + " ";
}
document.editor.area.value = document.editor.area.value + ">\n";
}
}
function end(){
if (helpstat){
alert("Adds the the final elements to a document.");
}
else {
document.editor.area.value = document.editor.area.value + "\n</body>\n</html>\n";
}
}
function preview(){
if (helpstat) {
alert("Preview/save the document.");
}
else {
temp = document.editor.area.value;
preWindow= open("", "preWindow","status=no,toolbar=n,menubar=y");
preWindow.document.open();
preWindow.document.write(temp);
preWindow.document.close();
}
}
function bold() {
if (helpstat) {
alert("Bold text.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<b></b>";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<b>" + twrite + "</b>";
}
}
}
function italic() {
if (helpstat) {
alert("Italicizes text.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<i></i>";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<i>" + twrite + "</i>";
}
}
}
function underline(){
if (helpstat) {
alert("Underlines text.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<u></u>";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<u>" + twrite + "</u>";
}
}
}
function pre(){
if (helpstat) {
alert("Sets text as preformatted.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<pre></pre>";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<pre>" + twrite + "</pre>";
}
}
}
function center(){
if (helpstat) {
alert("Centers text.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<StatCode Law Text>\n\n\n\n</Statcode> Random123\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<center>" + twrite + "</center>";
}
}
}
function hbar(){
if (helpstat) {
alert("Creates a horizontal bar.");
}
else {
document.editor.area.value = document.editor.area.value + "<hr>\n";
}
}
function lbreak(){
if (helpstat) {
alert("Makes a new line, the equivalent of return or enter.");
}
else {
document.editor.area.value = document.editor.area.value + "<br />\n";
}
}
function pbreak(){
if (helpstat) {
alert("Makes two new lines, the equivalent of two returns or enters.");
}
else {
document.editor.area.value = document.editor.area.value + "<p>\n";
}
}
function image(){
if (helpstat) {
alert("Inserts an image.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<img src=""></img>\n';
}
else if (stprompt) {
twrite = prompt("Image location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<img src=' + twrite + '>\n';
}
}
}
function aleft(){
if (helpstat) {
alert("Inserts an image with align left.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<img src="" align=left></img>\n';
}
else if (stprompt){
twrite = prompt("Image location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=left>\n';
}
}
}
function aright(){
if (helpstat) {
alert("Inserts an image with align right.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<img src="" align=right></img>\n';
}
else if (stprompt) {
twrite = prompt("Image location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=right></img>\n';
}
}
}
function atop(){
if (helpstat) {
alert("Inserts an image with align top.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + 'how to add tables in sites\n';
}
else if (stprompt) {
twrite = prompt("Image location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=top></img>\n';
}
}
}
function amid(){
if (helpstat) {
alert("Inserts an image with align middle.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<img src="" align=middle></img>\n';
}
else if (stprompt) {
twrite = prompt("Image location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=middle></img>\n';
}
}
}
function abottom(){
if (helpstat) {
alert("Inserts an image with align bottom.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<img src="" align=bottom></img>\n';
}
else if (stprompt) {
twrite = prompt("Image location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<img src=' + twrite + ' align=bottom></img>\n';
}
}
}
function head1(){
if (helpstat) {
alert("Creates a header, size 1 (largest size).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<h1></h1>\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<h1>" + twrite + "</h1>\n";
}
}
}
function head2(){
if (helpstat) {
alert("Creates a header, size 2 (slightly smaller than 1).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<h2></h2>\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<h2>" + twrite + "</h2>\n";
}
}
}
function head3(){
if (helpstat) {
alert("Creates a header, size 3 (slightly smaller than 2).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<h3></h3>\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<h3>" + twrite + "</h3>\n";
}
}
}
function head4(){
if (helpstat) {
alert("Creates a header, size 4 (slightly smaller than 3).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<h4></h4>\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<h4>" + twrite + "</h4>\n";
}
}
}
function head5(){
if (helpstat) {
alert("Creates a header, size 5 (slightly smaller than 4).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<h5></h5>\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<h5>" + twrite + "</h5>\n";
}
}
}
function head6(){
if (helpstat) {
alert("Creates a header, size 6 (smallest size).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<h6></h6>\n";
}
else if (stprompt) {
twrite = prompt("Text?",'');
if (twrite != null && twrite != ""){
document.editor.area.value = document.editor.area.value + "<h6>" + twrite + "</h6>\n";
}
}
}
function linkopen(){
if (helpstat) {
alert("Begins a link.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<a href=""></a>';
}
else if (stprompt) {
twrite = prompt("File location?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<a href=' + twrite + '>';
for(;;){
twrite = prompt("Text?",'');
if (twrite != "" && twrite != null){
break;
}
else {
prompt("You must enter the link text.",'Ok, sorry.');
}
}
document.editor.area.value = document.editor.area.value + twrite + '</a>\n';
}
}
}
function linktext(){
if (helpstat) {
alert("Inserts the text for a link.");
}
else if (basic) {
for(;;){
twrite = prompt("Text?",'');
if (twrite != "" && twrite != null){
break;
}
else {
prompt("You must enter the link text.",'Ok, sorry.');
}
}
document.editor.area.value = document.editor.area.value + twrite + '\n';
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function linkclose(){
if (helpstat) {
alert("Closes a link.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "</a>\n";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function anchor(){
if (helpstat) {
alert("Sets an anchor (e.g. #here).");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '<a name=""></a>\n';
}
else if (stprompt) {
twrite = prompt("Anchor name?",'');
if (twrite != null && twrite != ""){
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '<a name=' + twrite + '>\n';
}
}
}
function orderopen(){
if (helpstat) {
alert("Starts an ordered list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<ol></ol>\n";
}
else if (stprompt) {
for(i=1;;i++){
twrite = prompt("Item " + i + "? (Blank entry stops.)",'');
if (twrite == "" || twrite == null){
break;
}
if (i == 1){
document.editor.area.value = document.editor.area.value + "<ol>\n";
okeydokey = 1;
}
document.editor.area.value = document.editor.area.value + "<li>" + twrite + "\n";
}
if (okeydokey) {
document.editor.area.value = document.editor.area.value + "</ol>\n";
}
}
}
function li(){
if (helpstat) {
alert("Creates an item in a list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<li>";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function orderclose(){
if (helpstat) {
alert("Closes an ordered list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "</ol>\n";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function unorderopen(){
if (helpstat) {
alert("Starts an unordered list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<ul></ul>";
}
else if (stprompt) {
for(i=1;;i++){
twrite = prompt("Item " + i + "? (Blank entry stops.)",'');
if (twrite == "" || twrite == null){
break;
}
if (i == 1){
document.editor.area.value = document.editor.area.value + "<ul>\n";
okeydokey = 1;
}
document.editor.area.value = document.editor.area.value + "<li>" + twrite + "\n";
}
if (okeydokey) {
document.editor.area.value = document.editor.area.value + "</ul>\n";
}
}
}
function unorderclose(){
if (helpstat) {
alert("Closes an unordered list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "</ul>\n";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function defopen(){
if (helpstat) {
alert("Starts a definition list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<dl>";
}
else if (stprompt) {
for(i=1;;i++){
twrite = prompt("Term " + i + "? (Blank entry stops.)",'');
if (twrite == "" || twrite == null){
break;
}
if (i == 1) {
document.editor.area.value = document.editor.area.value + "<dl>\n";
okeydokey = 1;
}
document.editor.area.value = document.editor.area.value + "<dt>" + twrite + "</dt>\n";
twrite = prompt("Definition" + i + "? (Blank entry stops.)",'');
if (twrite == "" || twrite == null){
break;
}
document.editor.area.value = document.editor.area.value + "<dd>" + twrite + "<dd>\n";
}
if (okeydokey){
document.editor.area.value = document.editor.area.value + "</dl>\n";
}
}
}
function defterm(){
if (helpstat) {
alert("Creates the term in a definition.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<dt>";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function define(){
if (helpstat) {
alert("Creates the definition.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<dd>";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function defclose(){
if (helpstat) {
alert("Closes a defeinition list.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "</dt>";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function font(){
if (helpstat) {
alert("Sets the font.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '';
}
else if (stprompt) {
twrite = prompt("Font?",'');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '';
}
}
}
function fontcolor(){
if (helpstat) {
alert("Sets the font color.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + '';
}
else if (stprompt) {
twrite = prompt("Color? (hex or name)",'');
if (twrite != null && twrite != "") {
twrite = '"' + twrite + '"';
document.editor.area.value = document.editor.area.value + '';
}
}
function formtr(){
if (helpstat) {
alert("Creates a table row.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<tr></tr>";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
function formtd(){
if (helpstat) {
alert("Creates a standard table cell.");
}
else if (basic) {
document.editor.area.value = document.editor.area.value + "<td></td>";
}
else if (stprompt) {
alert("Not used in prompt mode.");
}
}
</script>
<form name="editor">
<center>
<table border=1>
<td align=center>
<b>Choose Mode:</b><br>
<input type="radio" name="mode" value="help"onClick="thelp(1)">Guide
<input type="radio" name="mode" value="prompt" onClick="thelp(2)">Prompt
<input type="radio" name="mode" value="basic" checked onClick="thelp(0)">Write
</td>
</table>
<br>
<table border=1>
<tr>
<td align=center>
<input type="button" value="Preview" onClick="preview()">
<input type="button" value=" Start " onClick="start()">
<input type="button" value=" End " onClick="end()">
<input type="button" value="<img>" onClick="image()">
<input type="button" value="<L>"onClick="aleft()">
<input type="button" value="<R>" onClick="aright()">
<input type="button" value="<T>" onClick="atop()">
<input type="button" value="<M>" onClick="amid()">
<input type="button" value="<B>" onClick="abottom()">
<input type="button" value="Reset" onClick="treset()">
</td>
</tr>
<td>
<input type="button" value="B" onClick="bold()">
<input type="button" value="I" onClick="italic()">
<input type="button" value="U" onClick="underline()">
<input type="button" value="C" onClick="center()">
<input type="button" value="<p>" onClick="pbreak()">
<input type="button" value="<br>" onClick="lbreak()">
<input type="button" value="<hr>" onClick="hbar()">
<input type="button" value="<pre>" onClick="pre()">
<input type="button" value="h1" onClick="head1()">
<input type="button" value="h2" onClick="head2()">
<input type="button" value="h3" onClick="head3()">
<input type="button" value="h4" onClick="head4()">
<input type="button" value="h5" onClick="head5()">
<input type="button" value="h6" onClick="head6()">
</td>
</tr>
</table>
<table>
<tr>
<textarea name="area" rows=50 cols=71 wrap=physical>
</textarea>
<br>
<br>
</td>
</table>
</center>
<body>
</body>
</form>
最佳答案
稍微回答一下你的问题，给你一个遵循的方法:
1) 如果您要使用<textarea> ，您可以使用 selectionStart 来解决它
但是，如果您打算在不同的标签中使用设置为 true 的 contenteditable，我建议您查看此 gist (适用于 <textarea> 和可编辑元素)。
2) 您可以使用 contenteditable 来解决它属性。所以你不必使用<textarea>元素，但是一个<div> ，例如。
<div contenteditable="true">editable text</div>
然后您可以使用粗体或斜体等格式。
3) 是的，为了创建新行，您可以使用 \n附加文本时。当允许格式化时，<br>应该在附加 HTML 格式时进行设置。
4) 虽然合并 JavaScript 文件可以提高性能，但也可能会导致不必要的困惑代码。所以这是一个组织问题。为此，有一些工具，例如 webpack或gulp ，根据您选择的配置自动为您完成这项工作。因此，例如，您的脚本只能合并到最后阶段，而在开发环境中它会继续您编写的方式，以便您可以正常工作。
关于javascript - 如何: Onclick buttons and text area scripts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60443682/