[原创]代码编辑器和html编辑器

网站的使用遇到的问题可以在这里提出建议
回复
头像
hellohappy
网站管理员
网站管理员
帖子: 269
注册时间: 2018年11月18日, 14:27
Been thanked: 1 time

#1 [原创]代码编辑器和html编辑器

未读文章 hellohappy » 2019年1月11日, 11:56



目录:
    前言:
    具体介绍如下:
        html编辑器:
        代码编辑器:


前言:
    本站建站为了方便大家编辑代码,特地找了一个html代码编辑器和亲自写了一个代码编辑器。
    html编辑器有运行结果的功能,
    自己写的代码编辑器暂时没有运行功能,但是支持很多语言,
    其中包含经济学常用的matlab、r、mathematica ,数学建模也常用的 LaTeX 等

具体介绍如下:
        html编辑器:
            链接:app.php/htmleditor
            html编辑器来源于一个github项目,几乎没改动过源代码,(十分抱歉由于没有frok下来所以暂时找不到那个链接了,如果作者或其他人知道的可以告诉我地址我补一下链接),未加密未压缩,想要可以自己复制。
            1.支持代码高亮,语法纠错;
            2.支持不同风格的代码高亮,基于ace;
            3.支持浏览器保存,退出浏览器重新进入仍然保留;
            4.支持结果输出;
            5.支持边写代码边输出结果的Dock-mode;
            6.双击css按钮可以弹出调色板。
            7.还有其他功能不一一介绍。不支持移动设备,按钮会重叠。
html编辑器.png
html编辑器.png (47.58 KiB) 查看 1342 次
html编辑器.png
html编辑器.png (47.58 KiB) 查看 1342 次
html编辑器举例.png

        代码编辑器:
            链接:app.php/codenotepad
            代码编辑器是我自己根据codemirror写的,保留www.postgraduate.top的有效链接和站长统计,可以自己复制过去用,只需要修改meta标签的base来源即可(我设置了防盗链,所以复制过去不能用)
            1.代码编辑器十分简洁,而且按钮是浮动的,所以移动设备不会影响太大。(不过没谁用移动设备写代码把?)
代码编辑器.png
代码编辑器.png (26.04 KiB) 查看 1342 次
代码编辑器.png
代码编辑器.png (26.04 KiB) 查看 1342 次

            2.语言选择我特定把经济学、数学建模常用的语言和建站常用语言标记出来,支持接近35种语言,当然如果某个语言你有需求我也可以再加。
语言选择.png
语言选择.png (44.42 KiB) 查看 1342 次
语言选择.png
语言选择.png (44.42 KiB) 查看 1342 次

            3.代码提示功能,默认不加载,选项自动加载全部就是自动把所有可能的提示都加载进来。注意,除了“加载附近的输入”外,任何一个提示都需要在他的环境下才会提示。比如专属 sql 的提示,只会出现在语言窗口选择了 sql 的时候出现,但是javascript也会出现在 html 和 php 窗口,因为这些语言里面包含了javascript,以此类推。
代码提示功能.png
代码提示功能.png (6.67 KiB) 查看 1342 次
代码提示功能.png
代码提示功能.png (6.67 KiB) 查看 1342 次

            4.编辑模式里,默认就是我们的记事本编辑模式,另外提供功能不是很全的vim、emacs、sublime等编辑模式。
编辑模式.png
编辑模式.png (3.73 KiB) 查看 1342 次
编辑模式.png
编辑模式.png (3.73 KiB) 查看 1342 次

            5.不同的代码高亮风格任选,估计有40种。
代码高亮风格.png
代码高亮风格.png (11.4 KiB) 查看 1342 次
代码高亮风格.png
代码高亮风格.png (11.4 KiB) 查看 1342 次

            6.在不刷新,不关闭浏览器的情况下,你可以创建多个缓存,缓存不同的代码,会自动保存代码类型,重新打开你不用再选语言。新缓存按钮添加缓存,在缓存选项框右键鼠标删除缓存。注意:一旦关闭或者刷新浏览器,所有代码都会丢失,请刷新前注意保存。
不刷新网页的缓存.png
不刷新网页的缓存.png (4.19 KiB) 查看 1342 次
不刷新网页的缓存.png
不刷新网页的缓存.png (4.19 KiB) 查看 1342 次

            7.多窗口主要是用来对比着改代码用的,或者你想知道人家改了什么,拿旧的和新的比一下也很有用。方法是先按照正常的方法粘贴你的代码,并选好语言,风格等,再点击双窗口模式。在弹出的提示框输入要做对比的代码,左边代码框可以编辑,点击确认,就会自动展示所有代码的差别。另外还包括 显示与关闭差异、自动对齐与滚动对齐、自动折叠大片重复代码与不折叠。
多窗口编辑模式.png
多窗口编辑模式.png (3 KiB) 查看 1342 次
多窗口编辑模式.png
多窗口编辑模式.png (3 KiB) 查看 1342 次
一个例子.png
双窗口例子.png

            8.你还可以全屏浏览,F11是快捷键。
全屏模式等.png

            9.搜索替换
            Ctrl-F / Cmd-F
                搜索
            Ctrl-G / Cmd-G
                下一个
            Shift-Ctrl-G / Shift-Cmd-G
                上一个
            Shift-Ctrl-F / Cmd-Option-F
                替换一个
            Shift-Ctrl-R / Shift-Cmd-Option-F
                替换全部
            Alt-F
                持续搜索 (对话框不会自动关, enter 为下一个, Shift-Enter上一个)
            Alt-G
                跳到第几行

            10.功能真的很多,自己体会吧。

 

Link:
Hide post links
Show post links


回复