15分钟内制作自己的文本编辑器：Yandex的实践

最新推荐文章于 2023-07-25 14:38:14 发布

dfsgwe1231

最新推荐文章于 2023-07-25 14:38:14 发布

阅读量470

点赞数 1

文章标签： javascript 5g ViewUI

好像没有足够的文本编辑器。但是请考虑以下问题：使用大约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

dfsgwe1231

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
15分钟内制作自己的文本编辑器：Yandex的实践

好像没有足够的文本编辑器。但是请考虑以下问题：使用大约60行代码（几乎没有内容），您可以制作自己的安全稳定的文本编辑器。它会非常简单，不会有很多功能，但是即使您几乎不知道如何编写代码，它也会由您自己制作。听起来像是一次完美的冒险。我需要什么 HTML —这是用于构造网页的语言。您的浏览器将解释HTML并根据其说明呈现页面。我们的文本编辑器将是一个可在您的浏览器中运行的网页。 ...
复制链接

扫一扫