js富文本编辑器_自制富文本编辑器

前言

介绍一款 markdown富文本编辑器

源码

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

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

46563a9391e59df9116b1e6c5ee0fc22.png

本地启动

yarn start
http://localhost:3000/
af708d965e1796399f5342b0b42542af.png

编译打包

yarn build

编译之后的静态文件

91713a57053798957f35b9a73095c16f.png

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

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

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

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

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

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

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

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

mdnice.pingfanrenbiji.club

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

4fa0f9055042445fae33f4fbbaeeee58.png

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

创建一个网站
4077b6cfee79029643253167e624e056.png
选择文件将刚才项目静态文件上传
bae8c4473fafc3e9d9a77b85001d2097.png
配置文件访问目录
299759cc4f62d83181926a058621eec7.png
配置nginx
2666e1de5d48b55271364c1ca9a9f0d5.png
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
先创建一个项目 用于存放上传的图片
1593a94975d7aefded58bc169139ea2a.png
创建一个私人令牌
b308910cec75845bfcb59255d00d7fae.png
926f6dc022e5bd1ce2078c70af75493e.png
将这个token配置到mark down中
99e95ab6998e84795d5aff811b5f3e81.png
cad561b67098bcb33608c6455bbbbde8.png
cad561b67098bcb33608c6455bbbbde8.png

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

访问

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

http://mdnice.pingfanrenbiji.club/
9215e65f3f398913e0e3e07dc41c88d2.png

结语

  • 表情包制作工具

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

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

这里有大量好玩的表情包

  • 论坛交流工具
www.pingfanrenbiji.club
  • markdown 发文工具
http://mdnice.pingfanrenbiji.club/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值