分类: Web 相关

  • 用Jquery让textarea支持自动缩进

    时效性提醒:本文首次编写发布于11 年前。

    这个代码的作用是让textarea也能输入tab,并可以像代码编辑器一样能自动缩进。

    废话不多说了,直接上Demo:

    https://codepen.io/Wu23333/pen/MWwYmmK

    var textarea_id = "text";
     (function($, undefined) {
             $.fn.getCursorPosition = function() {
             var el = $(this).get(0);
             var pos = 0;
             if ('selectionStart' in el) {
                 pos = el.selectionStart;
             }else
                 if ('selection' in document) {
                     el.focus();
                     var Sel = document.selection.createRange();
                     var SelLength = document.selection.createRange().text.length;
                     Sel.moveStart('character', -el.value.length);
                     pos = Sel.text.length - SelLength;
                 }
             return pos;
         }
     })(jQuery);
     $(document).keydown(function(e){
         text=document.getElementById(textarea_id);
         if(e.which == 9){
             var cursor_pos = $(text).getCursorPosition();
             $(text).val($(text).val().slice(0,cursor_pos) + '\t' + $(text).val().slice(cursor_pos));
             text.focus();
             text.setSelectionRange(cursor_pos+1, cursor_pos+1);
             return false;
         }
         if(e.which == 13){
             var cursor_pos = $(text).getCursorPosition();
             var notelines = $(text).val().slice(0,cursor_pos).split('\n');
             var listline = notelines[notelines.length-1];
             var n = 0;
             while(listline[n] == '\t'){
                 n+=1;
             }
             $(text).val($(text).val().slice(0, cursor_pos)+'\n'+$(text).val().slice(cursor_pos));
             for (i=n; i>0; i--){
                 $(text).val($(text).val().slice(0, cursor_pos+1)+'\t'+$(text).val().slice(cursor_pos+1));
             }
             text.focus();
             text.setSelectionRange(cursor_pos + n+1, cursor_pos + n+1);
             return false;
         }
     });
  • MarkNote轻量级云记事本系统

    时效性提醒:本文首次编写发布于11 年前。

    本人原创作品,PHP语言编写

    代码GPL开源,使用git管理,托管于git@OSC,地址:http://git.oschina.net/wusiyu/MarkNote (欢迎提issue和pull request

    访问代码

    下载

    3-25更新: 现已支持用MarkDown,详见上面的链接里
    5-01更新: 新增 将MarkDown笔记本生成HTML页面 功能
    5-06更新: 增加功能: 伪静态功能(限apache), 支持使用任意英文和数字作为ID
    5-09更新: 增加功能: Markdown记事本中的代码高亮功能
    6-04更新: 增加功能: 支持ID的更改;添加一个页面来配置存储方式
    6-21更新: 支持MathJax数学公式
    6-22更新: 使用ace代码编辑器
    6-23更新: 修复部分环境下的乱码问题
    7-01更新: 添加简单的用户系统
    7-07更新: 添加“我的记事本”侧边栏
    7-10更新: 修改记事本的权限系统,添加 有密码的记事本可以设置“公开HTML页面”功能
    7-11更新: 添加从用户的记事本列表中移除记事本的功能


    概述

    MarkNote 是一个PHP的轻量级云记事本系统,允许用户无须注册即可创建一个记事本,并可以给记事本设置密码。

    MarkNote 支持文件和MySQL两种存储方式,默认使用文件方式。

    MarkNote 的安装极为简单,如果使用文件方式,您要做的仅仅是把index.php上传到一个目录中,他会自动创建所需的文件。 如果使用MySQL方式,在index.php开头处填好数据库信息并上传即可。

    功能

    1. 以文件或数据库的方式保存记事本
    2. 支持MarkDown(即时预览+优化的textarea)和纯文本两种格式的记事本
    3. 可以给记事本设置密码
    4. 可生成记事本的二维码,以方便手机用户
    5. 可将记事本下载到本地
    6. 可以将Markdown记事本一键生成网页
    7. 支持伪静态(例如:http://233333.net/记事本名),仅限apache,默认开启,若环境不支持请关闭
    8. 支持使用任意英文和数字作为ID

    简介

    这个记事本其实非常的简单,为了方便在一些空间里上传使用而做成了单文件,不过结构还是很清晰的.

    主要分为两个部分:PHP后端HTML前端.

    PHP后端接受参数,进行处理,获取记事本内容,决定页面类型.

    HTML前端部分则根据上面得到的页面内容分别通过if…else if…来输出不同页面的HTML.包括一些js等.

    MarkDown部分则由前端实现,使用了markdown.js这个开源项目来把Markdown格式生成HTML并显示在左栏,后台仅处理Markdown格式的 笔记本内容.

    MarkNote支持两种存储方式,在程序开头来设置方式.默认伪文件存储方式,会新建一个NoteData文件夹,其中每个记事本为一个文件来存储,密码则全部保存在passwd.data文件中.Mysql方式使用了mysqli扩展的面向过程方式,仅使用一个表,可以方便的与其他程序共存在同一个数据库中.

    未来版本可能会添加以下功能:

    1. 已实现 伪静态
    2. 已实现 ID可自定义(数字,字母)
    3. 已实现 ID的自由修改
    4. 图片添加/上传 功能
    5. 已实现 使用一个在线代码编辑器来作为Markdown编辑部分(准备用ace实现)

    至于为何要使用使用单文件

    Just For Fun

    历程

    最开始,这只是个只能保存纯文本的小工具,练手用的,名字叫做notepad,做完了也就搁置了.

    后来开始玩markdown,缺个顺手的编辑器,正好有人建议我给notepad添加markdown功能,所以之后就有了现在的这个名字:MarkNote

    之后又根据一些需要增加了数个功能,比如之前要做个html页面,觉得把markdown生成的html复制来复制去太麻烦.于是就有了现在这个”一键”生成html页面的功能.

    你对现在的MarkNote又有什么建议呢?欢迎给我留言.

  • 恶搞:在网页上搞破坏

    时效性提醒:本文首次编写发布于12 年前。

    想试试随意在网页上搞破坏的乐趣吗?

    点击这里搞破坏

    操作方法:方向键+空格键

    可以把上面那个链接拖到书签栏,在任意网站上搞破坏。

    PS:我是决定不会告诉你这个可以弄很多个的:)

  • 中文TK域名的注册方法

    时效性提醒:本文首次编写发布于12 年前。

    中文TK域名的注册并不难,只要把”中文.tk”转换成”xn--fiq228c.tk”这样就可以了。

    转换域名的网址:http://52tk.org/cntk.php

    之后注册转换后的域名,如”xn--fiq228c.tk”,与注册英文.tk一样。

    最后用”中文.tk”就可以访问了。效果与”xn--fiq228c.tk”是一样的。

  • WordPress小工具制作快速入门教程

    时效性提醒:本文首次编写发布于12 年前。

    众所周知,Wordpress的侧边栏中可以放置小工具,功能各异的小工具可以是用户体验有很大的提升,但Wordpress自带的那几个小工具是显然不够,所以我们要自己制作小工具.

    小工具的制作其实并不难,小工具的代码需要包含在function.php中,主要小工具的代码结构如下:

    <?php
      //定义小工具类MyOwnWidget
      class MyOwnWidget extends WP_Widget{
        
        function MyOwnWidget(){
          //这是定义小工具信息的函数,也是类的构建函数
        }
        
        function form($instance){
          //这是表单函数,也就是控制后台显示的
        }
        
        function update($new_instance,$old_instance){
          //这是更新数据函数,小工具如果有设置选项,就需要保存更新数据
        }
        
        function widget($args,$instance){
          //这是控制小工具前台显示的函数
        }
     
      }
    
      function MyOwnWidget(){
        //注册小工具
        register_widget('MyOwnWidget');
      }
    
      //widges_init,小工具初始化的时候执行MyOwnWidget函数,
      add_action('widgets_init','MyOwnWidget');
    ?>

    由此可见,一个小工具的代码主要由信息声明,后台内容,数据更新,前台内容构成.

    (更多…)

  • Codiad 的中文翻译

    时效性提醒:本文首次编写发布于12 年前。

    Codiad以前已经介绍过了,是一个在线编辑你的网站的好工具,但没有中文,所以我写了个Codiad的中文翻译.
    效果图:

    PS:此中文翻译已被Codiad官方采纳,现在到Codiad官网就可以下载含有此中文翻译的Codiad.
    (更多…)

  • HTML在线测试工具,欢迎使用

    时效性提醒:本文首次编写发布于12 年前。

    刚写的,功能还算不错.

    地址:wusiyu.tk/html

    PS:此工具已开源,下载地址:GIT@OSC

    PPS:这个站的主题是我写的,也已开源,地址:GIT@OSC ,注意test分支才是最新的,和这个站的一样,回头把注释什么的补全再并合到主分支.

  • 修改phpMyAdmin的默认访问路径

    时效性提醒:本文首次编写发布于12 年前。

    phpMyAdmin是一个方便管理Mysql的软件,默认以http://youdomain.com/phpmyadmin来访问,不过这样以来谁都可以访问你的phpmyadmin,如果你的密码被别人知道了,那他就可以登陆phpmyadmin来修改你的数据库,这简直是一场灾难!

    所以,我们要修改一下phpMyAdmin的默认访问路径,这样别人就不知道怎么访问你的phpmyadmin了.

    我们只需要修改一下webserver的phpmyadmin配置文件就可以了,我们以apache为例,其他的都类似.

    debian系的linux发行版中配置文件在/etc/apache2/conf-enabled/phpmyadmin.conf

    redhat系的linux发行版中配置文件在/etc/httpd/conf.d/phpMyAdmin.conf

    配置文件中有这么一行:

    Alias /phpmyadmin /usr/share/phpmyadmin
    

    明白了吧,phpMyAdmin的文件实际在/usr/share/phpmyadmin里,这里只是一个别名,修改它就可以修改phpMyAdmin的默认访问路径了.

    例如修改为

    Alias /mysqladmin /usr/share/phpmyadmin
    

    就可以用http://youdomain.com/mysqladmin来访问phpmyadmin.

  • WordPress 主题激活时的初始化代码

    时效性提醒:本文首次编写发布于12 年前。

    有些Wordpress主题在后台有设置页面,并且需要设置项中都有值才能正常工作,但一般用户激活一个主题后会先到前台看看效果,没有去设置页面,这时主题就会有一些问题,给用户留下不好的印象.

    但我们可以在主题被激活时让wordpress执行一个初始化代码,把一下默认的值写到设置项中,这样主题就可以正常工作了.

    下面是实现它的代码,要把它添加到functions.php中

    <!-- INIT -->
    <?php
      add_action( 'load-themes.php', 'Init_theme' );
      function Init_theme() {
        //要执行的操作
      }
    ?>
  • 恶搞: 浏览器防假死测试

    时效性提醒:本文首次编写发布于12 年前。

    你的浏览器死掉了不要怪我。。。

  • CODIAD–网站开发辅助工具

    时效性提醒:本文首次编写发布于12 年前。

    CODIAD是一个开源在线IDE系统,你可以把它放在你的网站里,可以用它在线编辑你的网站。

    sh1

    (更多…)