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

最新推荐文章于 2023-07-19 21:16:00 发布

VIP文章 weixin_39845306

最新推荐文章于 2023-07-19 21:16:00 发布

阅读量212

点赞数

文章标签： js实现地图编辑器

本文链接：https://blog.csdn.net/weixin_39845306/article/details/113414167

版权

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

需要实现的功能

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 值，然后把这个值渲染到页面上

最低0.47元/天解锁文章

weixin_39845306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现地图编辑器_JS 实现微信 MarkDowm 编辑器??

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

扫一扫