编辑 Summernote 时会话终止

Posted 2023-05-08

【中文标题】编辑 Summernote 时会话终止

【英文标题】：Session killed while editing Summernote

【发布时间】：2021-09-15 00:10:47

【问题描述】：

如果计算机无人看管，我的视图有一行返回登录屏幕：

<meta http-equiv="refresh" content="120; url=/auth/login/" />

问题是，如果我在 Summernote 框中写的时间过长，会话就会终止。这是一个很长的文本，编辑它很容易超过 2 分钟。 如果用户在该 summernote 中使用键盘，我如何避免终止会话？

谢谢！

【参考方案1】：

我们可以在 javascript 中处理它，而不是使用 meta 标签来处理重定向。

const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;

sn.addEventListener('keyup', function() 
  console.log(this.value);

  /* Clear previous timers to prevent overlaps */
  stopTimer(redirecTimer);
  stopTimer(stopTypingTimer);

  stopTypingTimer = window.setTimeout(function() 
    console.log('Stopped Typing');
    startTimer();
  , 5000); // Assume it takes 5 secs for a user to stop typing
);


function startTimer() 
  redirecTimer = window.setTimeout(function() 
    console.log("User is not typing. So Redirect..");
    //window.location = "http://www.google.com";
  , 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000


function stopTimer(timer) 
  clearTimeout(timer);

<textarea id="summernote"></textarea>

更新：将事件应用于 DOM 中的所有元素

const sn = document.getElementById('summernote');
let redirecTimer, stopTypingTimer;

/* Extend the events as per the need and elements you have in DOM.
   `change` and `keyup` should capture all possible input elements
*/

['change', 'keyup'].forEach(function(e) 
  document.addEventListener(e, function() 
    console.log('User is interacting with the page');

    /* Clear previous timers to prevent overlaps */
    stopTimer(redirecTimer);
    stopTimer(stopTypingTimer);

    stopTypingTimer = window.setTimeout(function() 
      console.log('Stopped Typing');
      startTimer();
    , 5000); // Assume it takes 5 secs for a user to stop typing
  );
);


function startTimer() 
  redirecTimer = window.setTimeout(function() 
    console.log("User is not typing. So Redirect..");
    //window.location = "http://www.google.com";
  , 3000); // Redirect in 3 seconds. For 2 minutes set it to 120000


function stopTimer(timer) 
  clearTimeout(timer);

<textarea id="summernote"></textarea>
<input type="checkbox">Hi
<input type="text"/>
<input type="radio"/>I am Radio button
<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

【讨论】：

我喜欢这个想法，但有没有办法为整个视图实现它？我对 3 个夏季笔记、文本字段、复选框等有相同的看法。我不想为所有人复制这么多。是否可以在一个像对象一样的对象中完成，也许是整个 DOM？

是的，这是可能的。检查我更新的答案。

完美。奇迹般有效。谢谢萨米尔！

很高兴我能帮上忙！编码愉快！