收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
转

Markdown,editormd编辑器Editor.md自动保存插件的开发

6391人阅读 2018/12/26 17:21 总访问：5182845 评论：0 收藏：0 手机
分类: 前端

简介: Markdown编辑器Editor.md自动保存插件的开发。文章编辑器没有自动保存功能怎么行，万一不小心忘记保存不就辛苦白费了，然后就着手给自己的编辑器加了个自动保存功能，分享给有需要的朋友。

*此文章代码仅供参考。用于开发环境时可根据自己需要进行修改。
自动保存基于localStorage开发，请注意浏览器兼容。(IE7及以下不兼容)。各个浏览器对localStorage的存储大小支持都是不同的，chrome是5M ，IE10是1630K，其他的可以自行测试，基本保存一篇文章绰绰有余了。

1.插件运行流程

插件使用方法：在编辑区输入内容后,会自动保存内容到客户端本地存储，页面关闭和断电对保存的内容不受影响。保存的内容没有过期时间，直到手动去除。

2.创建插件文件

在plugins目录下创建 code-auto-save/code-auto-save.js文件。

3.页面使用插件

为更方便使用缓存，我们在编辑器的工具栏添加一个自定义的按钮，就和ueditor类似，点击按钮读取缓存内容到编辑器。页面代码如下，都有注释的

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>editormd自动保存插件</title>
  6.         <link rel="stylesheet" href="css/style.css" />
  7.         <link rel="stylesheet" href="../css/editormd.css" />
  8.     </head>
  9.     <body>
  10.         <div id="test-editormd">
  11.             <textarea style="display:none;"></textarea>
  12.         </div>
  13.         <script src="js/jquery.min.js"></script>
  14.         <script src="../editormd.js"></script>
  15.         <script type="text/javascript">
  16.             var testEditor = editormd("test-editormd", {
  17.                 path: '../lib/',
  18.                 // 工具栏添加一个自定义方法
  19.                 toolbarIcons: function() {
  20.                     // 给工具栏full模式添加一个自定义方法
  21.                     return editormd.toolbarModes.full.concat(["customIcon"]);
  22.                 },
  23.                 // 自定义方法的图标 指定一个FontAawsome的图标类
  24.                 toolbarIconsClass: {
  25.                     customIcon: "fa-paste"
  26.                 },
  27.                 // 没有图标可以插入内容，字符串或HTML标签
  28.                 toolbarIconTexts: {
  29.                     customIcon: "从草稿箱加载"
  30.                 },
  31.                 // 图标的title
  32.                 lang: {
  33.                     toolbar: {
  34.                         customIcon: "从草稿箱加载"
  35.                     }
  36.                 },
  37.                 // 自定义工具栏按钮的事件处理
  38.                 toolbarHandlers: {
  39.                     customIcon: function(){
  40.                         // 读取缓存内容
  41.                         testEditor.CodeAutoSaveGetCache();
  42.                     }
  43.                 },
  44.                 // 自定义工具栏按钮的事件处理
  45.                 onload: function() {
  46.                     // 引入插件 执行监听方法
  47.                     editormd.loadPlugin("../plugins/code-auto-save/code-auto-save", function() {
  48.                         // 初始化插件 实现监听
  49.                         testEditor.CodeAutoSave();
  50.                     });
  51.                 }
  52.             });
  53.             /********以下方法需要在插件初始化完成后方可调用********/
  54.             // 删除缓存
  55.             testEditor.CodeAutoSaveDelCache();
  56.             // 清空缓存的文档内容
  57.             testEditor.CodeAutoSaveEmptyCacheContent();
  58.             // 自定义设置缓存
  59.             testEditor.CodeAutoSaveSetCache('缓存内容');
  60.         </script>
  61.     </body>
  62. </html>
  1. 插件的内容
    防止缓存冲突，将页面url作为存储的key进去区分。监听编辑器change事件最好有一小段时间的缓冲，不然操作缓存太频繁造成性能问题。
    1. /*!
    2. * editormd图片粘贴上传插件
    3. *
    4. * @file   code-auto-save.js
    5. * @author codehui
    6. * @date   2018-10-27
    7. * @link   https://www.codehui.net
    8. */
    9. (function() {
    10.  var factory = function (exports) {
    11.      // 定义插件名称
    12.      var pluginName   = "code-auto-save";  
    13.      // 缓存key
    14.      var cacheKey = 'editormd_cache';
    15.      // 编辑器内容缓存key 替换url中的符号
    16.      var cacheContentKey = ( location.protocol + location.host + location.pathname + location.search ).replace( /[.:?=\/-]/g, '_' );
    17.      // 定义全局变量
    18.      var cm;
    19.      exports.fn.CodeAutoSave = function() {
    20.          // 初始化系统变量
    21.          var _this       = this;
    22.          cm              = _this.cm;
    23.          var settings    = _this.settings;
    24.          var classPrefix = _this.classPrefix;
    25.          var id          = _this.id;   // 编辑器id
    26.          // 定时器
    27.          var _saveFlag = null;    
    28.          // 自动保存间隔时间， 单位ms
    29.          var saveInterval = 500;   
    30.          if(typeof(Storage)=="undefined"){
    31.              console.log('对不起，您的浏览器不支持 web 存储。');
    32.              return ;
    33.          }
    34.          // 设置编辑器为当前域名+编辑器id
    35.          cacheContentKey = cacheContentKey + "_" + id;
    36.          console.log('初始化插件成功');
    37.          // 注册change事件
    38.          cm.on('change', function(){
    39.              //已经存在定时器关闭 重新开始 防止多次执行
    40.              if(_saveFlag){
    41.                  window.clearTimeout( _saveFlag );
    42.              }
    43.              //定时器的作用是加缓冲
    44.              _saveFlag = window.setTimeout( function () {
    45.                  // 执行设置缓存方法  cm.getValue() 是编辑器的源文档
    46.                  _this.CodeAutoSaveSetCache(cm.getValue());
    47.              }, saveInterval);
    48.          })
    49.      };
    50.      // 设置缓存
    51.      exports.fn.CodeAutoSaveSetCache = function(value) {
    52.          value = value || cm.getValue();
    53.          console.log('设置缓存');
    54.          var cacheContent = {};
    55.          cacheContent[cacheContentKey] = value;
    56.          localStorage.setItem(cacheKey, JSON.stringify(cacheContent));
    57.      }
    58.      // 读取缓存
    59.      exports.fn.CodeAutoSaveGetCache = function() {
    60.          // 判断缓存key
    61.          if(localStorage.hasOwnProperty(cacheKey)){
    62.              var cacheData = JSON.parse(localStorage.getItem(cacheKey));
    63.              if(cacheData[cacheContentKey]){
    64.                  console.log('读取缓存 设置文档内容')
    65.                  cm.setValue(cacheData[cacheContentKey]);
    66.              }
    67.          }else{
    68.              console.log('缓存中没有数据')
    69.          }
    70.      }
    71.      // 删除缓存
    72.      exports.fn.CodeAutoSaveDelCache = function() {
    73.          console.log('删除缓存')
    74.          localStorage.removeItem(cacheKey);
    75.      }
    76.      // 清空缓存的文档内容
    77.      exports.fn.CodeAutoSaveEmptyCacheContent = function() {
    78.          console.log('清除缓存文档内容')
    79.          _this.CodeAutoSaveSetCache('');
    80.      }
    81.  };
    82.  // CommonJS/Node.js
    83.  if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
    84.  { 
    85.      module.exports = factory;
    86.  }
    87.  else if (typeof define === "function")  // AMD/CMD/Sea.js
    88.  {
    89.      if (define.amd) { // for Require.js
    90.          define(["editormd"], function(editormd) {
    91.              factory(editormd);
    92.          });
    93.      } else { // for Sea.js
    94.          define(function(require) {
    95.              var editormd = require("./../../editormd");
    96.              factory(editormd);
    97.          });
    98.      }
    99.  } 
    100.  else
    101.  {
    102.      factory(window.editormd);
    103.  }
    104. })();

原文地址：https://www.codehui.net/info/40.html


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

百度编辑器本地缓存
百度编辑器默认有本地缓存。存储在localstorage中。可以防止用户在写文章的时候意外关闭后不至于之前写的内容会丢失读取本...

百度编辑器添加事件
添加点击与失去焦点事件：//添加点击事件 ue.addListener(&quot;click&quot;,function(){ alert(&quot;点击&quot;); }) ...

百度编辑器图片上传
先在百度编辑器配置好上传图片的后台地址serverUrl:&#39;图片上传的后台地址&#39;varue=UE.getEditor(&quot;container&quot...

评价上编辑器之坑
想给评论功能加上表情，传图片，贴代码等功能。所以就要把textarea换成一个编辑器。以为很简单的就是把textarea替换一下就...

百度编辑器实现自己的全屏逻辑
首先监听百度编辑器的全屏事件ue.addListener(&#39;beforefullscreenchange&#39;,function(event,isFullScreen){ if(isFul...

百度编辑器在layer弹窗中加载问题
因为加载到layer后百度编辑器要从新渲染一遍，所以如果使用setContent(Content)设置的内容在加载到layer弹窗中是显示不出来...

.NET MVC 使用百度编辑器详细教程：（1）配置编辑器
一、什么是百度编辑器百度编辑器UEditor是由百度web前端研发部开发一款应用于网站的编辑器，具有轻量，可定制，注重用户体...

百度编辑器自定义模板
前言：有些时候我们想要一些固定格式的模板，然后在这个模板的基础上去进行编写可以提升我们的效率，就像微信发布图文消息...

去掉百度编辑器div被替换成p标签
百度编辑器默认会把div替换成p标签，这样我们在编写一些自定义模板的时候就会改变我们的结构，造成一些问题。解决方法：在u...

如何完全干净的卸载 vs code编辑器
微软官方推出的免费的编辑器：vs code这个编辑器是目前我使用过的最好用的编辑器,软件的【轻量化,以及软件的可扩展性能都非...

百度编辑器模板消息
&lt;!DOCTYPEHTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;metahttp-equiv=&quot;Content-Typ...

.net core百度编辑器上传图片配置
.net core百度编辑器上传图片配置和.net framework还是有一点点区别publicActionResultUploadImage(List&lt;IFormFile&gt;f...

百度编辑器toolbars
toolbars: [ [ &#39;anchor&#39;, //锚点 &#39;undo&#39;, //撤销 &#39;redo&#39;, //重做 &#39;bold&#39;, //加粗 &#39;in...

使用markdown编辑器Editormd图片上传
静态资源路径问题可以参考：https://www.tnblog.net/aojiancc2/article/details/3436自定义工具栏可以参考：https://www.tn...

百度编辑器敲回车会出现一个p标签
默认是这样的，这个有时候也会影响我们自定义的效果，这个时候我们可以在ueditor.all.js中去修改一下这个逻辑，把回车就添...

百度编辑器修改编写区的样式
百度编辑器加载的时候是用一个iframe加载的我们可以自己添加样式：在themes—&gt;iframe.css里边去添加自己的样式即可当然...