好像没有足够的文本编辑器。 但是请考虑以下问题:使用大约60行代码(几乎没有内容),您可以制作自己的安全稳定的文本编辑器。 它会非常简单,不会有很多功能,但是即使您几乎不知道如何编写代码,它也会由您自己制作。
听起来像是一次完美的冒险。
我需要什么
HTML —这是用于构造网页的语言。 您的浏览器将解释HTML并根据其说明呈现页面。 我们的文本编辑器将是一个可在您的浏览器中运行的网页。
JavaScript —这种语言使您可以动态地处理网页上的内容,甚至构建整个基于Web的应用程序。 听说过斯拉克吗? 完全用JavaScript编写。 看到过网页上有雪覆盖的文字吗? 那场雪也是JavaScript。
本地存储 -您的浏览器有一个特殊的内存块,可用于存储数据。 它仅限于一个页面(意味着每个页面都有其自己的隔离存储),并且无法在不同的设备或浏览器之间同步。 我将使用此区域存储我们的文本。
内容可编辑 -HTML中的某些块可以具有此属性,这将允许用户编辑该块内的内容。 所做的更改仅对用户可见(默认情况下),但是仍然会有更改。 以后,您可以实现同步,以便其他用户也可以看到编辑内容。
这是怎么工作的
- 我将拥有一个包含一个区域或一个街区的网页。 因为我想保持简单,所以我从一开始就完全没有设计,只有裸露的结构。 我将在下一版本中完善视觉效果。
- 该块将是内容可编辑的,这意味着您可以键入它。
- 在后台,将有JavaScript,以查看页面内部发生了什么。 每当我按下一个键时,我都会告诉JavaScript注意。 当我按下一个键时,JavaScript会将可编辑块中的任何内容保存到本地存储。
- 最后,我将添加一些代码行,它们告诉JavaScript在页面加载后在Localstorage中查找任何内容。 这样可以确保我在重新加载页面时可以重新调用我们的文本。
结果将是一个非常简单的外观,但具有自动保存功能的文本编辑器。 您可以退出并重新加载浏览器,甚至重新启动计算机,文本也将保留在那里。
步骤1.家政和基础工作
首先,我需要一个空的HTML页面。 需要一些向导才能告诉浏览器正在查看的文档是网页。 无需记住此代码,我只是从HTML空白页模板复制了它。
<!DOCTYPE html>
< html >
< head >
< title > My text editor </ title >
<!-- Behold the three lines of wizardry -->
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
</ head >
< body >
<!-- here will be our block and then the script -->
</ body >
</ html >
该代码从字面上告诉浏览器它正在查看HTML页面(即网页)。 它告诉浏览器此页面的标题(您将在标签中看到的页面),然后是语言(UTF-8表示Unicode,或者基本上是“世界上的所有语言,我都支持它们”),然后遵循一些规定和技术细节,然后是页面正文。
此刻的身体是空白的。 但是我需要在编辑器中做两件事:标题以告知用户他们所在的位置以及编辑器本身。 让我们在<body>和</ body>之间添加这两行代码:
< h2 > Text editor with auto-save </ h2 >
< div id = "editor" style = "height: 100%; width: 70%; border: solid; border-width: 1px; padding 15px;" > </ div >
第一行是标题。 H2代表“第二级标题”。 就我们而言,水平没有意义,但我只是喜欢它的外观。
第二行稍微复杂一点。 让我们分解一下:
- div代表“除法”,或者只是一个区块。 页面上的一些虚拟对象。 因此,它意味着什么也没有做,但是程序员一直在使用div,因为它们可以使div做各种事情。
- id =“ editor”让我从编写的脚本中按其名称来调用该div
- style = ...为div设置一些边界。 因此,div占用与其内容一样多的空间,但是由于我们当前的内容为零,因此div的大小也将为零。 因此,我将其设置为页面宽度的50%和页面高度的100%。 告诉我,div很大。 我还在其周围绘制了一个小边框,因此可以看到它。 并在div内添加一个小的填充,以使我们的文本不会直接出现在黑匣子中。 页面必须有边距。
我也可以转到页面顶部,然后向“样式”添加一些代码。 尝试自己弄清这一点,这很容易理解。 提示:“正文”表示“所有页面”:
< style type = "text/css" >
body {
text-align : left;
margin : 10 ;
font-family : Verdana, Arial, sans-serif;
font-size : 16px ;
}
</ style >
如果我现在另存为HTML文件,那么我只会在白色背景上有一个矩形,并有一些标题。 暂时还没有任何工作。
步骤2.内容可编辑
我需要使我们的div内容可编辑。 这很容易实现,您只需向div添加一个属性:
< div id = "editor" contenteditable = "true" style = "height: 100%; width: 70%; border: solid; border-width: 1px; padding 15px;" > </ div >
你没听错。 您只说contenteditable =“ true”。 现在保存并重新加载,然后您可以在框中键入。 但是,如果重新加载页面,那么您编写的所有内容都将消失。 让我们修复它。
步骤3. JavaScript潜伏
要将JavaScript行为添加到页面,我需要将代码放在<script> ... </ script>标记之间。 我也可以将整个脚本写在一个单独的文件中,并从我们的页面链接到它,但是如果脚本很小,那就没有意义了。 我将整个程序写在网页中。
我现在想要的是:
- 听按键
- 当按下一个键时,将名为“ Editor”的div内容保存到本地存储中。 将该本地存储项目命名为“ text_in_editor”以供将来参考
查看这段代码的外观:
<script>
document .addEventListener( 'keydown' , function ( e ) {
localStorage.setItem( 'text_in_editor' , document .getElementById( 'editor' ).innerHTML);
});
</ script >
最后一部分可能会使所有点混淆。 JavaScript可能很丑。 但是,如果我翻译了它,则将意味着: '在本地存储中,创建一个项目。 将该项目称为“ text_in_editor”。 有关其内容,请转到此处:文档,在文档中,获取ID为'editor'的元素,并查看其HTML内部。 看到那个HTML吗? 获取并将其放入本地存储中”
如果您保存代码并立即重新加载页面,则似乎没有任何效果。 如果重新加载文本编辑器,则会丢失文本。 原因是:我们的脚本将文本保存到本地存储中,但是在任何时候都不会从其中检索任何内容:加载时不刷新。 这就像购买罐头食品,将它们存储在柜子中而从不实际食用它们一样。 而且,内阁是无限巨大和看不见的。
因此,在这一点上,一切实际上都在工作,只是对我没有用。 这并不奇怪,因为我没有告诉它以有用的方式工作。 让我们在步骤4中解决此问题。
步骤4.从本地存储中检索
在用JavaScript添加事件侦听器之前,让我们运行以下算法:
- 查看本地存储中是否有名称为“ text_in_editor”的东西。
- 如果有东西,加载它
- 如果没有,继续前进
这是在JavaScript中的读取方式:
if (localStorage.getItem( 'text_in_editor' ) !== null ) {
document .getElementById( 'editor' ).innerHTML = localStorage.getItem( 'text_in_editor' );
}
最后一行的意思是: “转到本地存储,获取名称为text_in_editor的项目,获取其内容,然后将这些内容放入文档中,并使用id编辑器添加到元素中” 。 “放入”部分由等式符号=完成。 在JavaScript中,方程式表示赋值或简单地放置在某处。 例如:
someNumber = 5 ; // this means put ‘5’ into the memory slot under the name 'someNumber'
otherNumber = someNumber; //this means take whatever’s in someNumber and put that into the memory under the name otherNumber. Basically it’s copying
现在,再次查看我们的文本编辑器代码。 观察放置在何处。 查看方程式符号左右两侧的部分:
document .getElementById( 'editor' ).innerHTML = localStorage.getItem( 'text_in_editor' );
o正确的是分配的东西(我从那里拿东西)。 右边是我分配的位置或放置这些东西的位置。
附带说明,我做完了:-)
该代码将按照我想要的方式工作,请查看以下内容:
最终代码
复制并粘贴到常规文本编辑器中,另存为HTML并在浏览器中打开,瞧! 有一个文本框,您可以在其中输入内容,然后将其保存到本地存储中,然后在重新加载页面时从本地存储中加载该文本框。
<!DOCTYPE html>
< html >
< head >
< title > My text editor </ title >
<!-- The three following lines — trust me — we need this-->
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
<!-- some minimal design (not necessary)-->
< style type = "text/css" >
body {
text-align : left;
margin : 10 ;
font-family : Verdana, Arial, sans-serif;
font-size : 16px ;
}
</ style >
</ head >
< body >
<!-- heading -->
< h2 > Text editor with auto-save </ h2 >
<!-- here be our editable area →
<div id="editor" contenteditable="true" style="height: 100%; width: 70%; border: solid; border-width: 1px; padding 15px;"></div>
<!-- Here be our script -->
< script >
// If there's anything in the storage
if (localStorage.getItem( 'text_in_editor' ) !== null ) {
// ...then show it
document .getElementById( 'editor' ).innerHTML = localStorage.getItem( 'text_in_editor' );
}
// listen to key presses
document .addEventListener( 'keydown' , function ( e ) {
// once a key is pressed, save whatever's in our box to localstorage
localStorage.setItem( 'text_in_editor' , document .getElementById( 'editor' ).innerHTML);
});
</ script >
</ body >
<!-- That's all folks -->
</ html >
下一步是什么
哦,接下来,我会让这东西变得漂亮。 敬请关注!
From: https://hackernoon.com/make-your-own-text-editor-in-15-minutes-with-practicum-by-yandex-rvt2g5g