![550325195c7cec76f5596bd8b972cd83.png](https://i-blog.csdnimg.cn/blog_migrate/b548828bde1ec6b4940f99cd393f7084.jpeg)
现在许多人都应该有写公众号的习惯,有的写公众号为了分享,有的是为了记录生活。把文字写出来,再通过一些编辑器进行排版之后,完成一篇文章往往要花费大量的时间,往往排版是需要最久的,因为所有的编辑器都只是尽可能的满足使用者的需求,并没有百分百符合自己心意的编辑器,今天就讲讲如何实现一个自己的专属编辑器。
需要实现的功能
- markdown 语法支持
- 代码块高亮
- 自定义排版规则
- 把自定义的排版文章复制到微信公众号的编辑器内保留排版
效果展示
在这里展示的只是最基本的功能,细节没有处理,我会一步一步告诉你们如何去实现,想要有多好看的效果就得靠你们自己的想法来进行美化了。
![cad25779c888e80944affefad7972a2d.gif](https://i-blog.csdnimg.cn/blog_migrate/980d69a6213611051a76ac7140672190.gif)
这里有个我自己定制的完整版预览地址:
Wechat Markdown Editordidadi599.github.ioGithub 项目地址:
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
值,然后把这个值渲染到页面上的