vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题

原文链接： https://www.mk2048.com/blog/blog.php?id=h02c22a12hib&title=vue2.0%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8Ueditor%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E5%BA%94%E7%94%A8%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98

1、如何设置config中的内容

readonly:true,//只读模式
wordCount:false,//是否开启字数统计
enableAutoSave: false,//自动保存功能

重点：enableAutoSave不一定生效，怎么办？

ueditor.config.js文件中设置enableAutoSave参数为false就可以关闭本地保存功能。

//启用自动保存
,enableAutoSave: false

ueditor1.4.3版本是没有效果的，需要修改代码，在ueditor1.5.0版本已经得到修复。

修改方法
ueditor.all.js文件

找到

// plugins/autosave.js
UE.plugin.register('autosave', function (){

    var me = this,
        //无限循环保护
        lastSaveTime = new Date(),
        //最小保存间隔时间
        MIN_TIME = 20,
        //auto save key
        saveKey = null;

function save ( editor ) {

var saveData;

        if ( new Date() – lastSaveTime < MIN_TIME ) {
            return;
        }

        if ( !editor.hasContents() ) {
            //这里不能调用命令来删除，会造成事件死循环
            saveKey && me.removePreferences( saveKey );
            return;
        }

lastSaveTime = new Date();

editor._saveFlag = null;

saveData = me.body.innerHTML;

        if ( editor.fireEvent( "beforeautosave", {
            content: saveData
        } ) === false ) {
            return;
        }

me.setPreferences( saveKey, saveData );

        editor.fireEvent( "afterautosave", {
            content: saveData
        } );

}

    return {
        defaultOptions: {
            //默认间隔时间
            saveInterval: 500
        },
        bindEvents:{
            'ready':function(){

var _suffix = "-drafts-data",
key = null;

                if ( me.key ) {
                    key = me.key _suffix;
                } else {
                    key = ( me.container.parentNode.id || 'ue-common' ) _suffix;
                }

//页面地址编辑器ID 保持唯一
saveKey = ( location.protocol location.host location.pathname ).replace( /[.:\/]/g, '_' ) key;

            'contentchange': function () {
               //新增加的代码
                if (!me.getOpt('enableAutoSave')) {
                    return;
                }

                if ( !saveKey ) {
                    return;
                }

                if ( me._saveFlag ) {
                    window.clearTimeout( me._saveFlag );
                }

if ( me.options.saveInterval > 0 ) {

me._saveFlag = window.setTimeout( function () {

save( me );

}, me.options.saveInterval );

} else {

save(me);

}

            }
        },
        commands:{
            'clearlocaldata':{
                execCommand:function (cmd, name) {
                    if ( saveKey && me.getPreferences( saveKey ) ) {
                        me.removePreferences( saveKey )
                    }
                },
                notNeedUndo: true,
                ignoreContentChange:true
            },

            'getlocaldata':{
                execCommand:function (cmd, name) {
                    return saveKey ? me.getPreferences( saveKey ) || '' : '';
                },
                notNeedUndo: true,
                ignoreContentChange:true
            },

            'drafts':{
                execCommand:function (cmd, name) {
                    if ( saveKey ) {
                        me.body.innerHTML = me.getPreferences( saveKey ) || '<p>' domUtils.fillHtml '</p>';
                        me.focus(true);
                    }
                },
                queryCommandState: function () {
                    return saveKey ? ( me.getPreferences( saveKey ) === null ? -1 : 0 ) : -1;
                },
                notNeedUndo: true,
                ignoreContentChange:true
            }
        }
    }

});

以下是新增加的代码
if (!me.getOpt('enableAutoSave')) {
return;
}

ueditor1.4.3版本自动保存关闭不了
https://github.com/fex-team/ueditor/issues/470

已在1.5.0分支修改
https://github.com/fex-team/ueditor/blob/dev-1.5.0/_src/plugins/autosave.js#L71-73

更多专业前端知识，请上【猿2048】www.mk2048.com

vue2.0项目中使用Ueditor富文本编辑器应用中出现的问题

猜你喜欢