[Tutorial] Save text editor content

It is annoying when we are typing a huge text in the text editor, and suddenly when we send the message the internet drops or the message does not send. This code ensures that the message is temporarily saved so that you can recycle it.


Create a new JavaScript (The Placement: All Pages):

Code:

/*
 *  Application: Last auto-save
 *  Date: 10/04/2018
 *  Version: 1.310042018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
*/
$(document).on("ready", function() {
if (!$.sceditor) return;

var lang = {
    dialogTitle: "Recycling notice",
    dialogContent: "A message has been saved. Do you want to recycle it?",
    dialogConfirm: "Yes",
    dialogCancel: "No",
    savingNotice: "Last auto-save at"
};

var config = {
    modal: $("<div>",{
        id: "myModal",
        class: "modal"
    }).html(
    '<div class="modal-content"></div>'
    ),
    dialog: $("<div>",{
        id: "myDialog",
        class: "dialog"
    }).html(
    '<div class="dialog-titlebar">' +
    '    <span class="dialog-title">' + lang.dialogTitle + '</span>' +
    '</div>' +
    '<div class="dialog-content">' + lang.dialogContent + '</div>' +
    '<div class="dialog-buttonpane">' +
    '    <div class="dialog-buttonset">' +
    '        <button type="button" class="dialog-button confirm">' + lang.dialogConfirm + '</button>' +
    '        <button type="button" class="dialog-button cancel">' + lang.dialogCancel + '</button>' +
    '    </div>' +
    '</div>'
    ),
    myCSS: '<style type="text/css">' +
        '.modal {' +
        '    display: none;' +
        '    position: fixed;' +
        '    z-index: 99999;' +
        '    right: 30px;' +
        '    bottom: 30px;' +
        '    overflow: auto;' +
        '}' +
        '.modal-content {' +
        '    position: relative;' +
        '    font-family: Verdana, Arial, Helvetica, sans-serif;' +
        '    background-color: #c3e0ff;' +
        '    margin: auto;' +
        '    padding: 13px;' +
        '    text-align: center;' +
        '    border: 1px solid #608eaf;' +
        '    color: #608eaf;' +
        '    width: 250px;' +
        '    border-radius: 3px;' +
        '    -moz-border-radius: 3px;' +
        '    -webkit-border-radius: 3px;' +
        '    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);' +
        '}' +
        '.dialog {' +
        '    display: none;' +
        '    position: fixed;' +
        '    z-index: 99999;' +
        '    right: 30px;' +
        '    bottom: 30px;' +
        '    overflow: auto;' +
        '    width: 335px' +
        '    height: auto;' +
        '    font-family: Verdana, Arial, Helvetica, sans-serif;' +
        '    border: 1px solid #a6c9e2;' +
        '    background: #fcfdfd url(https://i.imgur.com/zSvngeq.png) 50% bottom repeat-x;' +
        '    color: #222222;' +
        '}' +
        '.dialog-titlebar {' +
        '    border: 1px solid #4297d7;' +
        '    background: #5c9ccc url(https://i.imgur.com/VKAHB77.png) 50% 50% repeat-x;' +
        '    color: #ffffff;' +
        '    font-weight: bold;' +
        '}' +
        '.dialog, .dialog-titlebar {' +
        '    -moz-border-radius: 5px;' +
        '    -webkit-border-radius: 5px;' +
        '    -khtml-border-radius: 5px;' +
        '    border-radius: 5px;' +
        '}' +
        '.dialog, .dialog-titlebar, .dialog-content {' +
        '    padding: 8px;' +
        '}' +
        '.dialog-buttonpane {' +
        '    border: 1px solid #a6c9e2;' +
        '    background: #fcfdfd url(https://i.imgur.com/44EUC3C.png) 50% bottom repeat-x;' +
        '    color: #222222;' +
        '}' +
        '.dialog-buttonpane {' +
        '    text-align: center;' +
        '}' +
        '.dialog-button {' +
        '    cursor: pointer;' +
        '    outline: none;' +
        '    border: 1px solid #c5dbec;' +
        '    background: #dfeffc url(https://i.imgur.com/p3HHEiR.png) 50% 50% repeat-x;' +
        '    font-weight: bold;' +
        '    color: #2e6e9e;' +
        '    margin: 8px;' +
        '    padding: 8px 15px;' +
        '}' +
        '.dialog-button:hover {' +
        '    border: 1px solid #79b7e7;' +
        '    background: #dfeffc url(https://i.imgur.com/jrnDbA8.png) 50% 50% repeat-x;' +
        '    font-weight: bold;' +
        '    color: #1d5987;' +
        '}' +
        '</style>',
        scrollSpeed: 750, // Page scrolling speed up to the editor
        typingInterval: 5000, // 5 seconds to save the message
        closingInterval: 5000, // 5 seconds to close the modal
        content: $.cookie("editor_sm"),
        expireTime: 10, // Time to expire the message (set 10 days as standard)
        editor: $("#text_editor_textarea").sceditor("instance")
};

// Inserting CSS before page body
$(config.myCSS).insertBefore("body");
// Inserting element modal append to page body
$(config.modal).appendTo("body");

// Check for recycled message
if(config.content) {
    // Inserting element dialog append to page body
    $(config.dialog).appendTo("body");
    config.dialog.show("fast");
    $.cookie("editor_sm", null);
}

// Declaring the variables
var typingTimer = null,
    date = null,
    time = "",
    editorVal = null;

// Whyle typing in the editor
config.editor.keyUp(function() {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(savingMessage, config.typingInterval);
}).keyDown(function() {
    clearTimeout(typingTimer);
});

// Recycle function
config.dialog.on("click", ".confirm", function() {
    config.editor.val(config.content);
    $("body, html").stop().animate({
        scrollTop: $("#quick_reply").offset().top;
    }, config.scrollSpeed);
    config.dialog.hide();
});

// Cancel function
config.dialog.on("click", ".cancel", function() {
    config.dialog.hide("slow");
});

// Saving function
function savingMessage() {
    date = new Date();
    time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    editorVal = config.editor.val();
    if(editorVal != "") {
        $.cookie("editor_sm", editorVal, { expires : config.expireTime });
        config.modal.show("fast", function() {
            config.modal.find(".modal-content").html(lang.savingNotice + ": " + time);
            config.modal.delay(config.closingInterval).hide("slow");
        });
    }
}
});

The code is set to save the message after 5 seconds without typing.

I really like this and have been using it for a few days, but the pop up box at the end of posting asking if I want to recycle or cancel is driving me nuts so is there a way to stop that happening please?

jkh wrote:I really like this and have been using it for a few days, but the pop up box at the end of posting asking if I want to recycle or cancel is driving me nuts so is there a way to stop that happening please?

you must delete this part 

Code:

// Check for recycled message
if(config.content) {
    if(confirm("A message has been saved. Do you want to recycle it?")) config.editor.val(config.content);
    localStorage.removeItem("editor_sm");
}

but i do not know then if anyone wants to save it if that is still possible

Yes, that's what I thought might happen.

I used to have a 'saving work in progress' javascript that I found on Ange Tuteur's forum, but some of my members were complaining that their text was jumbling up when posting on a mobile phone. As soon as I disabled the javascript then their text was fine.

All I need is something similar to that 'saving work in progress' javascript because there's a lot of lengthy research on my forum and sometimes something might happen and a computer crashes and the work is lost. This new javascript is the closest I've come across so far, as it auto-saves every 5 seconds, but the pop up box at the end is annoying.

I can but try it though...

eta: Nope, it doesn't save. That's a shame. Maybe when Daemon comes back online here he'll have a suggestion.

Thinking about this, I made a modification to the code that I think will please you!
Swap for the new code that is already in the main message.

yes its better thank you

Thank you very much Daemon, that's going to help a great deal

I made another small change in the code! Instead of the localStorage, the code now uses Cookies to store the message.
If the browser closes, the message will continue to be saved.

Even better Daemon! Very clever