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

小说:学习能力个案:1年级 淘气包大变身!作者:顺陵道更新时间:2019-03-21字数:58078

开篇

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


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("
");
                for (var i = 0; i < tempArr.length; i++) {
                    if (tempArr[i]) {
                        tempArr[i] = start + tempArr[i] + end;
                    }
                }
                result.push(tempArr.join("
"));
            })
            editor.doc.replaceSelections(result);
        };

当前文章:http://leetaemin.cn/news2018092098645/

发布时间:2019-03-21 13:35:01

“考试作弊”会犯法,你知道吗? 你还不是娶了别人,我也没有嫁给你 几张图让你读懂引力波是什么! 护肤必备手册之(二)周期护理 我们对校园凶杀案反思的重大失误导致凶杀案连续发生! 人格健康与家庭教育 调戏妹子胸小,结果...... 公鸭嗓,不成熟,飞机场,周迅到底有啥好? 女生怎么健身锻造好身材? 高考公平吗?

16218 61173 56449 71744 15931 61083 21666 62219 12188 79853 92595 26104 74479 83688 90637 94294 70594 20282 18473 36224 90473 62883 44083

我要说两句: (0人参与)

发布