zoukankan      html  css  js  c++  java
  • 【开源】博客园文章编辑器4.0版发布

    源起

    最近个人时间多起来了;

    于是打算持续写一点东西;

    前面写了两篇关于riot.js的东西;

    被博客园的领导移出首页了;

    原因之一是排版不整齐;

    确实是不整齐,这我认,

    然而,我自己可是博客园文章编辑器的作者啊,

    而且持续写了三版了,从1.0.0写到3.0.0

    而且有很多园友也在用我的编辑器写博客;

    (陆续也有人在问我这个工具的下载地址,源码的问题;)

    我自己咋就排班不好文章了呢?

    于是翻出以前的工具代码,

    回顾了一下,发现各个版本都还有很多问题没解决掉;

    于是决定大规模重构一遍;

    说白了就是重写一遍啦;

    大概一个星期的功夫,于是就有了这个工具;

    功能

    1. 博客登录(引入博客园的登录画面,使用官方提供的登录机制)

    2. 检索历史文章(可以检索到你博客园内所有的随笔文章,支持分页)

    3. 修改文章(你博客园内所有的历史随笔文章,都可以用此工具编辑修改)

    4. 新增文章(从无到有撰写一篇新的随笔文章)

    5. QQ截图直接黏贴

    6. 纯客户端,不需要网络服务器支持,直接与博客园服务端通信

    7. 纯绿色版,不需要安装,没有额外的服务,体积更小;

    8. 自动升级功能(我发布新版本之后,会提示您升级);

    9. 引入百度ueditor编辑器

      1. 7个大类的表情,随意挑选

      2. 24种语言的代码着色方案

      3. 多种表格控制工具

      4. 修复了很多ueditor尚未修复的BUG

    10. 最最关键的还是开源!(照着这个代码写个淘宝下单器之类的东西,简直易如反掌)

      

    功能上比上三个版本提升了不少,有质的飞跃!

     

    界面

    文章撰写界面:

    右侧快捷菜单:

    历史文章列表:

     

    这知识几个关键界面

    里面还有一些细小的提示画面

    就不在一一截图了

    开源

    开源地址:

    https://gitee.com/xland/cnblogs

    (这次开源到码云上,速度确实比github快不少,原来再github上的项目我以后会废弃掉)

    大家发现什么问题可以直接提issue 

    如果大家期待什么新功能,也可以提issue;

    下载地址:

    https://gitee.com/xland/cnblogs/releases

    支持

    强烈希望大家能给个star;

    这让我知道你在用;

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

    最后插一段关键代码:

    bky.uploadImg = function(event,cb){
        var items = event.clipboardData.items;
        if(items[0].type.indexOf("image") < 0){
            return;
        }
        var file = items[0].getAsFile();
        var formData = new FormData();
        formData.append('imageFile', file);
        formData.append("mimeType", file.type);
        var frame = document.getElementById('articleFrame').contentWindow
        frame.$.ajax({
            type: 'POST',
            url:bky.imgUploadUrl,
            data: formData,
            processData: false, 
            contentType: false, 
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function(result) {
                if(result.success){
                    var img = '<img src="' + result.message + '" />';
                    cb(img);
                }
            }
        });    
    }

    多谢大家点赞支持

  • 相关阅读:
    基本算法 st
    winServer服务器设置多用户同时远程访问!
    类的实例化顺序
    基于layui的数据列表展示数据中template的作用。使得日期等数据符合预期进行展示
    基于layui的laydate,在加载后台数据时laydate.render()不起作用。
    微信企业号两种常用搜索加载方式
    Docker搭建私有仓库registry
    第7章 Dockerfile详解
    第6章 docker数据管理
    第5章 Docker的四种网络模式
  • 原文地址:https://www.cnblogs.com/liulun/p/7732415.html
Copyright © 2011-2022 走看看