[Tutorial] Save text editor content

Go down

[Tutorial] Save text editor content

Post by Daemon on April 4th 2018, 6:39 am

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.


Last edited by Daemon on April 11th 2018, 3:40 pm; edited 6 times in total
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Save text editor content

Post by jkh on April 9th 2018, 2:27 pm

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?

avatar
jkh
Forumember

Posts : 410
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Re: [Tutorial] Save text editor content

Post by skouliki on April 10th 2018, 3:19 pm

@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
avatar
skouliki
Manager
Manager

Female Posts : 4340
Reputation : 709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Save text editor content

Post by jkh on April 10th 2018, 3:30 pm

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.
avatar
jkh
Forumember

Posts : 410
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Re: [Tutorial] Save text editor content

Post by Daemon on April 10th 2018, 4:42 pm

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

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Save text editor content

Post by skouliki on April 10th 2018, 5:38 pm

yes its better thank you
avatar
skouliki
Manager
Manager

Female Posts : 4340
Reputation : 709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Re: [Tutorial] Save text editor content

Post by jkh on April 10th 2018, 6:08 pm

Thank you very much Daemon, that's going to help a great deal thumleft
avatar
jkh
Forumember

Posts : 410
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Re: [Tutorial] Save text editor content

Post by Daemon on April 10th 2018, 7:46 pm

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.
avatar
Daemon
Forumember

Posts : 101
Reputation : 80
Language : Português

Back to top Go down

Re: [Tutorial] Save text editor content

Post by jkh on April 10th 2018, 7:51 pm

Even better Daemon! Very clever :party:
avatar
jkh
Forumember

Posts : 410
Reputation : 14
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum