自制富文本编辑器

JavaScript/前端
421
0
0
2022-03-30

前言

介绍一款 markdown富文本编辑器

源码

https://gitee.com/pingfanrenbiji/markdown-nice

这里要感谢一些开源作者 这位大佬的微信公众号是

自制富文本编辑器

本地启动

yarn start
http://localhost:3000/

自制富文本编辑器

编译打包

yarn build

编译之后的静态文件

自制富文本编辑器

将项目静态文件上传到web服务器

可以通过tomcat 或 nginx部署 当然也可以通过宝塔进行部署

具体的步骤过程可以参考我之前发过的一篇文章

通过运维神器"宝塔"搭建读者交流社区discuz-q

下面咱看看如果利用宝塔这个工具来部署咱们的这个项目

首先需要有一个域名(自己用的话 服务器外网IP也可以)

我之前申请了一个域名 www.pingfanrenbiji.club 这个是我的论坛

基于此 我再创建一个二级域名

mdnice.pingfanrenbiji.club

创建的过程非常简单 登陆阿里云域名管理平台

自制富文本编辑器

登陆宝塔创建一个网站 并配置nginx服务器 上传项目静态文件即可

创建一个网站

自制富文本编辑器

选择文件将刚才项目静态文件上传

自制富文本编辑器

配置文件访问目录

自制富文本编辑器

配置nginx

自制富文本编辑器

location / {
  try_files $uri $uri/ /index.php?$query_string;
}
gzip on;
gzip_min_length 1024;
gzip_types text/css application/x-javascript application/javascript application/vnd.api+json;
gzip_disable "MSIE [1-6]\.";
gzip_comp_level 2;

配置下图床

图床 故名思义 存储上传的图片的地方

这里我选择将图片放在了gitee上

那么需要在gitee上创建一个私钥token

在markdown中配置下这个token即可

创建gitee token

先创建一个项目 用于存放上传的图片

自制富文本编辑器

创建一个私人令牌

自制富文本编辑器

自制富文本编辑器

将这个token配置到mark down中

自制富文本编辑器

自制富文本编辑器

自制富文本编辑器

这样就可以把图片上传到gitee上了

访问

截止此 我们已经创建了一个 域名 并创建了一个该域名的网站 下面就可以访问了

http://mdnice.pingfanrenbiji.club/

自制富文本编辑器

结语

  • 表情包制作工具

最后推荐大家一个好玩的表情包制作工具

https://www.52doutu.cn/maker/

这里有大量好玩的表情包

  • 论坛交流工具
www.pingfanrenbiji.club
  • markdown 发文工具
http://mdnice.pingfanrenbiji.club/