注:发现影响到键盘的使用，不想误导人，所以这个处理保留，后面想到解决方式再记录到这里。

不要吐槽我为什么还用2.9，一个一两天搞定的小工具，去更新后不知道要花多少时间，现有的东西会出什么问题….修复小问题，比折腾新版本妥当点。尝试过找相对近的版本3.x发现都一样。就自己查了下原因解决

这些版本有个问题,虚拟键盘捕获的keycode都为0，而且还出现一些比较奇葩的问题，简单的富文本编辑器里的图片无法删除。

补充个原来先简单应付的删除处理，加了一个按钮，根据获取的光标索引删除内容，现在这个是phonegap里的，其它地方出现的时候，实在不行还是得上。。

					$('#edit_note_btn_delete_img')
							.click(
									function() {
										if (window.edit_note_content.window.document
												.getSelection().focusNode
												.toString() == '[object HTMLBodyElement]') {
											var focusOffset = window.edit_note_content.window.document
													.getSelection().focusOffset;
											$(
													window.edit_note_content.window.document.body.childNodes)
													.eq(focusOffset - 1)
													.remove()
										} else {
											$('body', $edit_note_d).html()
										}
									});

 

http://stackoverflow.com/questions/18093067/cant-delete-image-in-contenteditable-div-on-android/24591285#answer-24591285

解决的代码,参考回答
http://stackoverflow.com/questions/14560344/android-backspace-in-webview-baseinputconnection

org.apache.cordova.CordovaWebView

@Override
public boolean deleteSurroundingText(int beforeLength, int afterLength) {       
    // magic: in latest Android, deleteSurroundingText(1, 0) will be called for backspace
    if (beforeLength == 1 && afterLength == 0) {
        // backspace
        return super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_DOWN, KeyEvent.KEYCODE_DEL))
            && super.sendKeyEvent(new KeyEvent(KeyEvent.ACTION_UP, KeyEvent.KEYCODE_DEL));
    }

    return super.deleteSurroundingText(beforeLength, afterLength);
}

 

phonegap 官方的存储文档说明

http://docs.phonegap.com/en/2.9.0/cordova_storage_storage.md.html#Storage

这几天(注意发布时间)，公司需要简单写个记事本工具，支持文本和图片（将图片以base64形式插入到可编辑的iframe页面中），需要支持离线，即用户可以将数据保存到本地，有登录的情况下，点同步可以将数据同步到服务器，同时将服务端的数据更新到下面。

考虑了几个数据存储的方式。

1.cookie 咔嚓不适合

2.locationStorage 支持的数据不大，约5m~15M左右，因为图片数据的关系，所以不够。当然，原来居然考虑过，保存文件路径，再单独写个函数将图片放到系统里，后面想想太麻烦了。。。哈哈。。。.但是只能当成一个比较大的数组来使用，查询检索相关不方便，排序什么的就还是按照原来数据的操作方式，节点数和容量都有相当限制，而且需要注意安全。不小心清除了就扑街了。

2.1 一个在线识别浏览器locationStorage容量脚本

https://arty.name/localstorage.html

3.webSql 适合本地使用，虽然这个东西的情况有点尴尬，一个是，基本上主流的新的浏览器都支持了它，问题是这个标准现在又是放弃的阶段。。哈哈。。不过已经有了，就拿来先用，同时支持模糊搜索，增删改查，所以也方便了很多。主要一个优势是，用这种方式开发，完全可以在浏览器端开发完，最后再直接复制到phonegap里进行打包。所以开发上相对来说方便很多。不过大文件的情况下，还是需要考虑和服务器端一样，文件放本地，然后只保存文件路径到数据里。

(附带一个封装好的sqlite.js，在文章底部)

 

Sqlite.js来源

http://www.oschina.net/code/snippet_202842_10588

//copyright by lanxyou  lanxyou[at]gmail.com
var lanxDB=function(dbname){
    var db=openDatabase(dbname,'1.0.0','',65536);
    return{
        //返回数据库名
        getDBName:function(){
            return dbname;
        },
        //初始化数据库，如果需要则创建表
        init:function(tableName,colums){
            this.switchTable(tableName);
            colums.length>0?this.createTable(colums):'';
            return this;
        },
        //创建表，colums:[name:字段名,type:字段类型]
        createTable:function(colums){
            var sql="CREATE TABLE IF NOT EXISTS " + this._table ;
            var t;
            if (colums instanceof Array && colums.length>0){
                t=[];
                for (var i in colums){
                    t.push(colums[i].name+' '+colums[i].type);
                }
                t=t.join(', ');
            }else if(typeof colums=="object"){
                t+=colums.name+' '+colums.type;
            }
            sql=sql+" ("+t+")";
            var that=this;
            db.transaction(function (t) { 
                t.executeSql(sql) ;
            })
        },
        //切换表
        switchTable:function(tableName){
            this._table=tableName;
            return this;
        },
        //插入数据并执行回调函数，支持批量插入
        //data为Array类型，每一组值均为Object类型，每一个Obejct的属性应为表的字段名，对应要保存的值
        insertData:function(data,callback){
            var that=this;
            var sql="INSERT INTO "+this._table;
            if (data instanceof Array && data.length>0){
                var cols=[],qs=[];
                for (var i in data[0]){
                    cols.push(i);
                    qs.push('?');
                }
                sql+=" ("+cols.join(',')+") Values ("+qs.join(',')+")";
            }else{
                return false;
            }
            var p=[],
                d=data,
                pLenth=0,
                r=[];
            for (var i=0,dLength=d.length;i<dLength;i++){
                var k=[];
                for (var j in d[i]){
                    k.push(d[i][j]);
                }
                p.push(k);
            }
            var queue=function(b,result){
                if (result){
                    r.push(result.insertId ||result.rowsAffected);
                }
                if (p.length>0){
                    db.transaction(function (t) { 
                        t.executeSql(sql,p.shift(),queue,that.onfail);
                    })
                }else{
                    if (callback){
                        callback.call(this,r);
                    }
                }
            }
            queue();
        },
        _where:'',
        //where语句，支持自写和以对象属性值对的形式
        where:function(where){
            if (typeof where==='object'){
                var j=this.toArray(where);
                this._where=j.join(' and ');
            }else if (typeof where==='string'){
                this._where=where;
            }
            return this;
        },
        //更新数据，data为属性值对形式
        updateData:function(data,callback){
            var that=this;
            var sql="Update "+this._table;
            data=this.toArray(data).join(',');
            sql+=" Set "+data+" where "+this._where;
            this.doQuery(sql,callback);
        },
        //根据条件保存数据，如果存在则更新，不存在则插入数据
        saveData:function(data,callback){
            var sql="Select * from "+this._table+" where "+this._where;
            var that=this;
            this.doQuery(sql,function(r){
                if (r.length>0){
                    that.updateData(data,callback);
                }else{
                    that.insertData([data],callback);
                }
            });
        },
        //获取数据
        getData:function(callback){
            var that=this;
            var sql="Select * from "+that._table;
            that._where.length>0?sql+=" where "+that._where:"";
            that.doQuery(sql,callback);
        },
        //查询，内部方法
        doQuery:function(sql,callback){
            var that=this;
            var a=[];
            var bb=function(b,result){
                if (result.rows.length){
                    for (var i=0;i<result.rows.length;i++){
                        a.push(result.rows.item(i));
                    }
                }else{
                    a.push(result.rowsAffected);
                }
                if (callback){
                    callback.call(that,a);
                }
            }
            db.transaction(function (t) { 
                t.executeSql(sql,[],bb,that.onfail) ;
            })
        },
        //根据条件删除数据
        deleteData:function(callback){
            var that=this;
            var sql="delete from "+that._table;
            that._where.length>0?sql+=" where "+that._where:'';
            that.doQuery(sql,callback);
        },
        //删除表
        dropTable:function(){
            var sql="DROP TABLE IF EXISTS "+this._table;
            this.doQuery(sql);
        },
        _error:'',
        onfail:function(t,e){
            this._error=e.message;
            console.log('----sqlite:'+e.message);
        },
        toArray:function(obj){
            var t=[];
            obj=obj || {};
            if (obj){
                for (var i in obj){
                    t.push(i+"='"+obj[i]+"'");
                }
            }
            return t;
        }
    }
}
 
/*
examples:
var db=new lanxDB('testDB');
db.init('channel_list',[{name:'id',type:'integer primary key autoincrement'},{name:'name',type:'text'},{name:'link',type:'text'},{name:'cover',type:'text'},{name:'updatetime',type:'integer'},{name:'orders',type:'integer'}]);
db.init('feed_list',[{name:'parentid',type:'integer'},{name:'feed',type:'text'}]);
db.switchTable('channel_list').insertData([{name:'aa',link:'ss',updatetime:new Date().getTime()},{name:'bb',link:'kk',updatetime:new Date().getTime()}]);
db.where({name:'aa'}).getData(function(result){
    console.log(result);//result为Array
});
db.where({name:'aa'}).deleteData(function(result){
    console.log(result[0]);//删除条数
});
db.where({name:'bb'}).saveData({link:'jj'},function(result){
    console.log(result);//影响条数
})
})
*/

注意函数里

 if (callback){
                    callback.call(that,a);
                }

这个地方有些问题，我是处理成

 if (callback){
                    callback(that,a);
                }

前端图片压缩，兼容体积.

https://github.com/think2011/LocalResizeIMG

一个bug，webview无法删除里面插入的图片。比较奇葩，而且delete也无法监听，所以需要从程序上内部进行处理，监听键盘，然后进行实时判断。这边简单搞，加了个删除图片的按钮，点击进行删除。后面有时间琢磨看看。

					$('#edit_note_btn_delete_img')
							.click(
									function() {
										if (window.edit_note_content.window.document
												.getSelection().focusNode
												.toString() == '[object HTMLBodyElement]') {
											var focusOffset = window.edit_note_content.window.document
													.getSelection().focusOffset;
											$(
													window.edit_note_content.window.document.body.childNodes)
													.eq(focusOffset - 1)
													.remove()
										} else {
											$('body', $edit_note_d).html()
										}
									});