基于electron的PC编辑器-小札记(prettynote)-1

外婆的酸汤鱼

已于 2022-04-19 12:59:37 修改

阅读量1k

点赞数 1

分类专栏：小札记prettyNote编辑器文章标签： javascript css visual studio code bootstrap electron

于 2022-04-18 20:40:28 首次发布

本文链接：https://blog.csdn.net/qq_50533529/article/details/124258760

版权

小札记prettyNote编辑器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

开发预期
当前实现效果
操作说明及介绍
技术实现
项目地址
注意事项

小札记，预计开发成一款PC端基于electron的小型编辑器，集成pdf处理功能和markdown编辑功能
目前项目处于开发阶段，也希望自己能坚持开发下去
当前版本小札记(pretty note v1.0.0)

开发预期

一款PC端个人编辑器，选定electron+node.js作为开发底层技术，基于html+css+js+jquery.js+bootstrap来实现；
当前进度，开始实现前端页面，并去除了windows自带边框，实现自定义边框（实现效果不佳）；
预期集成pdf处理功能，以满足用户对pdf处理的需求；
预期集成markdown编辑功能，使得用户可以使用markdown语法编辑文件；

当前实现效果

在这里插入图片描述

操作说明及介绍

运行软件，有资源管理器可以实时进行资源管理
软件实现自定义操作栏，右上角实现最大/小化功能及关闭按钮，鼠标按住导航栏中部拖动可实现窗口拖动（注，由于使用js原生实现拖动，因此拖动容易导致丢失，当前请放慢拖动速度，最大化最小化当前也存在部分问题，兼容性不强，后续优化）
左上角有软件logo及软件名小札记，点击此部分，顶层面板旋转弱化，进入底层操作面板，可进行相应操作
点击操作面板左上角小札记部分或直接点击编辑面板可恢复到编辑面板
进一步操作，正在开发中···

技术实现

自定义操作栏
使用html+css+js实现，基于window对象对窗口实现大小变化、关闭窗口,html及js实现方式如下：

<div class="menu-wrap bottom-menu">
			<div class="left-wrap">
			<span onclick="recovery()" class="home-btn">
			<span class="glyphicon glyphicon-user"></span>
			<span>小札记</span>
			</span>
			<span>编辑</span>
			<span>窗口</span>
			<span>关于</span>
			</div>
			<div class="fill-wrap">
			<font>Note 小札记1.0.0</font>
			</div>
			<div class="right-wrap">
			<!-- 最大化、最小化及关闭按钮 -->
			<span class="glyphicon glyphicon-minus" onclick="operAPP(1)"></span>
			<span class="tips min">最小化</span>
			<span class="glyphicon glyphicon-unchecked" onclick="operAPP(1)"></span>
			<span class="tips max">最大化</span>
			<span class="glyphicon glyphicon-remove" onclick="operAPP(3)"></span>
			<span class="tips shutdown">关闭应用</span>
		</div>
</div>

js

// 操作窗口
function operAPP(index){
    // console.log(window.innerWidth+" "+window.screen.width);
    // 关闭窗口
    if(index==3){
        window.close();
    }
    // 最大化
    else if(index==2){
        if(window.outerWidth < window.screen.width-10){
            window.resizeTo(window.screen.width,window.screen.height);
        }
        else{
            window.resizeTo(800,600);
        }
    }
    // 最小化
    else{
        if(window.outerWidth==300){
            window.resizeTo(800, 600);
        }
        else{
            window.resizeTo(300,200);
            window.moveTo(window.screen.width-300,window.screen.height-200);
        }
    }
}

滑动窗口位置实现
此次通过监听鼠标按下和鼠标拖动事件来获得位置并且还窗口位置，js实现如下：

/* 添加窗口拖动效果 */
    var x=0;
    var y=0;
    $(".fill-wrap").mousedown(function(event){
        if(isDrag){
            isDrag=false;
            x=event.screenX;
            y=event.screenY;
        }
        else{
            isDrag=true;
            x=event.screenX;
            y=event.screenY;
        }
    });
    $("body").mouseup(function(){
        isDrag=false;
    });

    $(".fill-wrap").mousemove(function(event){
        if(isDrag){
            // 经测试，1.1倍比较柔和适中且
            window.moveBy(parseInt(1.1*(event.screenX-x)),parseInt(1.1*(event.screenY-y)));
            
            // console.log(parseInt(event.screenX-x)+","+parseInt(event.screenY-y));
            // window.moveTo(0,event.screenY);
        }
        x=event.screenX;
        y=event.screenY;
    });

本编辑器实现了点击logo部分，编辑框旋转偏离从而显现主面板的功能，具体实现请查看github或gitee仓库
scroll-bar滚动条的样式设置，css实现如下：

/* 滚动条样式 */
.edit-input-area::-webkit-scrollbar{
    width: 4px;
}
.edit-input-area::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background-color: #f88604;
}
.edit-input-area::-webkit-scrollbar-thumb:hover{
    background-color: #2bf156;
    cursor: pointer;
}
.edit-input-area::-webkit-scrollbar-corner{
    display: none;
}
.edit-input-area::-webkit-scrollbar-button{
    display: none;
}