gpt4 book ai didi

javascript - 如何: Onclick buttons and text area scripts

转载 作者:行者123 更新时间:2023-12-01 00:05:05 26 4
gpt4 key购买 nike

这个社区对于像我这样的初学者继续我一直在做的元素非常有帮助,我为此感谢大家。不过,今天我要再碰碰运气。

我有一个自己无法解决的问题,并且无法真正在网络上搜索具体内容,因为我不知道我需要什么魔法词。介绍完毕,让我继续我的问题。

好的,还有一些。我正在本地 html 文件中创建一个文本/HTML 编辑器,我可以与我的团队共享该编辑器,这对于像我们这样的内容编辑器非常有用,以便我们可以从头开始构建 XML 标签(我将替换其中的 HTML 标签)一旦我拥有了所需的所有资源和代码,我将在一段时间内展示)。

以下是其外观的快速浏览:

enter image description here

所以,简单地解释一下,我的问题主要是关于两件事和一些小问题,请告诉我哪里错了,我愿意接受任何建议。

1) 当我单击

标记时,它应该出现在我的光标当前单击的位置,而不是位于其上方所有文本的下方。但现在,这就是正在发生的事情。我知道我的剧本缺少一些东西,这就是原因。因此,我可以请求初学者容易理解的建议或指导吗?请原谅我在这里要求如此之高。

2)当我点击编辑器上方的某个标签按钮时,它是否可以以粗体格式显示,例如this而不是这个<b>this</b>

我在某处读到下面的框是一个文本区域,不允许使用粗体、斜体和下划线等格式,但是,有没有办法用一些 HTML、CSS 和 JS 来做到这一点? (因为这是我唯一能理解的语言,尽管我是个新手。)

无论如何,我至少需要能够增强一些标签,例如,以便当内容遍布各处时可以轻松识别。如果不可能,您能否向我建议一种我应该学习的语言,或者至少为我指出一些方向?

如果仍然无法做到这一点,至少有没有办法突出显示标签?

现在有一些小问题......

3)我相信有一个特定的enter like <br/> in HTMLspace like (&nbsp;) 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 文件可以提高性能,但也可能会导致不必要的困惑代码。所以这是一个组织问题。为此,有一些工具,例如 webpackgulp ,根据您选择的配置自动为您完成这项工作。因此,例如,您的脚本只能合并到最后阶段,而在开发环境中它会继续您编写的方式,以便您可以正常工作。

关于javascript - 如何: Onclick buttons and text area scripts,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60443682/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com