js实现地图编辑器_JS 实现微信 MarkDowm 编辑器??

作者：黑客灵魂 | 2024-08-20 10:46:12

踩

js 地图编辑器

现在许多人都应该有写公众号的习惯，有的写公众号为了分享，有的是为了记录生活。把文字写出来，再通过一些编辑器进行排版之后，完成一篇文章往往要花费大量的时间，往往排版是需要最久的，因为所有的编辑器都只是尽可能的满足使用者的需求，并没有百分百符合自己心意的编辑器，今天就讲讲如何实现一个自己的专属编辑器。

需要实现的功能

markdown 语法支持
代码块高亮
自定义排版规则
把自定义的排版文章复制到微信公众号的编辑器内保留排版

效果展示

在这里展示的只是最基本的功能，细节没有处理，我会一步一步告诉你们如何去实现，想要有多好看的效果就得靠你们自己的想法来进行美化了。

这里有个我自己定制的完整版预览地址：

Wechat Markdown Editordidadi599.github.io

Github 项目地址：

didadi599/wechat-markdown-editorgithub.com

觉得还可以的小伙伴记得留下你们的 star 哦~

HTML 布局

做我们前端开发的第一步当然是布局啦，虽然实际效果中并没有布局多少，就随意排了一下，大家别介意，主要是怎么实现上面功能的思路。

在项目文件夹下新建 index.html 文件，布局代码如下，因为真的实在是太简洁了，就不多做解释了。


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/index.css">
  <title>Editor</title>
</head>
<body>
  <div class="wrap">
    <div>
      <button id="copy">复制</button>
      <textarea id="textarea" class="textarea"></textarea>
    </div>
 
    <div id="paper" class="paper"></div>
  </div>
  
  <script src="./js/index.js"></script>
</body>
</html>

看到这样写页面的感觉是不是非常怀念，自从会了框架之后，大家多久没写过这样的页面了。代码中引入了 css 文件夹中的 index.css 文件和 js 文件夹中的 index.js 文件，为接下来准备。(这人真 TM 啰嗦 )

css 文件也不多，就只有这么几个。


.wrap {
    
  display: flex;
}
 
.textarea {
    
  resize: none;
  height: 300px;
  width: 200px;
  margin-right: 20px;
  flex: 0 200px;
}
 
.paper {
    
  word-break: break-all;
  width: 500px;
  height: 600px;
  background: #eeeeee;
}

JS 编写

布局搞定了，接下来就开始进行我们逻辑代码的编写。

js/index.js 文件：


// textarea 元素
var textarea = document.getElementById('textarea');
 
// paper 元素
var paper = document.getElementById('paper');
 
// 监听 textarea 元素的按键弹起事件
textarea.onkeyup = function (e) {
    
  var value = e.target.value;
  paper.innerHTML = value;
}

暂时先写下这十行入门级代码，上面的代码我们分别得到了 textarea 元素和 paper 元素，然后监听 textarea 元素的按键弹起事件。

当按键弹起，我们获取 textarea 元素中的文本内容，也就是它的 value 值，然后把这个值渲染到页面上的

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/1006729