博客园文章编辑器5.0版本发布(markdown版)

注意:使用本软件前,需先在博客园后台设置默认编辑器为markdown

开篇

废话少说,先上界面图片:

10月25日,我发布了博客园文章编辑器的4.0版本,得到了很多朋友的支持,

(后来我自己发现了一些问题,于是偷偷发了博客园文章编辑器的4.0.1版本,也没通知大家,不过好在有自动升级功能)

当时有很多朋友问我,这个工具支持不支持markdown,

我觉得写markdown的人还是挺多的,

调查了博客园确实支持markdown编辑器,

而且我开发了markdown的编辑器,对于那些使用HTML富文本编辑器的用户来说,也很容易上手,没太大改变,

还能使他们通过我的编辑器学习一点markdown的语法知识,何乐而不为呢?!

调研

说实话,我确实低估了开发这个东西的难度

本打算到github上随便拉一个来,

嵌到nwjs里去就可以了,

然而看了几个高分项目,都不合我意。

(不过,说真心话还是要感谢这些项目,我写这个工具参考了很多这些开源项目的源码)

我觉得这个项目最主要的难点是:

  • 找一个合适的编辑器
  • 编辑窗口与预览窗口滚动条同步
  • 和博客园官网通信通道打通

好在这些难点我都克服了

现在你看到的东西,就是这一阵子断断续续努力的成果

功能

这里罗列的是所有的我觉得重要的功能

  • 两栏布局,左边栏编写markdown内容,右边栏实时预览;
  • 左右两边栏滚动条同步滚动
  • 允许用户拖拽调整左右两边栏宽度
  • 支持最基本的markdown语法(链接、表格、标题、加粗、斜体、引用、有序无序列表,代码、横线等)
  • 博客登录(引入博客园的登录画面,使用官方提供的登录机制)
  • 检索历史文章(可以检索到你博客园内所有的随笔文章,支持分页)
  • 修改文章(你博客园内所有的历史随笔文章,都可以用此工具编辑修改)
  • 新增文章(从无到有撰写一篇新的随笔文章,默认保存为草稿)
  • 截图工具截图后直接黏贴到编辑器中(图片保存在博客园的服务器上)
  • 纯客户端,直接与博客园服务端通信
  • 纯绿色版,不需要安装,没有额外的服务,体积更小;
  • 自动升级功能(我发布新版本之后,会提示您升级);
  • 最最关键的还是开源!(照着这个代码写个淘宝下单器之类的东西,简直易如反掌)
  • 相对于上一个版本,做了一些UI/UE美化工作;

开源

开源地址:https://gitee.com/xland/cnblogs

下载地址:https://gitee.com/xland/cnblogs/releases

支持

强烈希望大家能给个star;

这让我知道你在用;

这让我有动力继续做一些对大家有用的东西;

关键源码

第一段代码是用于控制滚动条同步滚动的:

var editorScroll = function () {
                setTimeout(function () {
                    if (rightScrolling) {
                        return;
                    }
                    var scrollInfo = editor.getScrollInfo();
                    var lineNumber = editor.lineAtHeight(scrollInfo.top, 'local');
                    var range = editor.getRange({ line: 0, ch: null }, { line: lineNumber, ch: null });
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(marked(range), 'text/html');
                    var topLineIndex = doc.body.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, pre, blockquote, hr, table').length;
                    var eles = document.getElementById("right").querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, pre, blockquote, hr, table');
                    var scTop = eles[topLineIndex].offsetTop;
                    $(".right").scrollTop(scTop);
                }, 800)
            }
editor.on("scroll", editorScroll);

第二段代码,是用于插入markdown特有语法符号的

var wrapWidth = function (start, end) {
            if (!end) {
                end = start;
            }
            var arr = editor.doc.getSelections();
            var result = [];
            arr.forEach(item => {
                var tempArr = item.split('\n');
                for (var i = 0; i < tempArr.length; i++) {
                    if (tempArr[i]) {
                        tempArr[i] = start + tempArr[i] + end;
                    }
                }
                result.push(tempArr.join('\n'));
            })
            editor.doc.replaceSelections(result);
        };

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 Web...

2397
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

5165
来自专栏彭湖湾的编程世界

【redux】详解react/redux的服务端渲染:页面性能与SEO

亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数...

3247
来自专栏司想君

React编程思想

在我们团队看来,React是使用JavaScript构建大型、快速的Web apps的首选方式。它已经在Facebook和Instagram项目中,表现出了非常...

4099
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

34010
来自专栏黑泽君的专栏

Mark Down Pad2在 windows 10 下的安装注册以及 Mark Down Pad2 报错分析

  Mark Down Pad是Windows下的一个多功能Makrdown编辑器。即时看到你的Makrdown文件,当你创建它们的时候,看起来就像是在HTML...

931
来自专栏小白安全

ClickJacking攻击-获取管理员权限

前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞。本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程。但在说明过程之前,先带大...

31111
来自专栏大前端开发

如何为你的微信小程序瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有1M大小的限制!所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及这个底线...

945
来自专栏小狼的世界

自定义地址栏与收藏夹中的图标

favicon 在英文中有几个别名,叫做 shortcut icon,website icon,tab icon,URL icon,bookmark icon,...

1585
来自专栏hightopo

基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

1492

扫码关注云+社区

领取腾讯云代金券