The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

[Tutorial] Save text editor content

3 posters

Go down

[Tutorial] Save text editor content Empty [Tutorial] Save text editor content

Post by Daemon 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.
[Tutorial] Save text editor content OFlovag

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

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

Post by jkh 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?

jkh
jkh
Forumember

Posts : 616
Reputation : 17
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

Post by skouliki 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
skouliki
skouliki
Manager
Manager

Female Posts : 15065
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

Post by jkh 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.
jkh
jkh
Forumember

Posts : 616
Reputation : 17
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

Post by Daemon 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.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

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

yes its better thank you
skouliki
skouliki
Manager
Manager

Female Posts : 15065
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

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

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

Posts : 616
Reputation : 17
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

Post by Daemon 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.
Daemon
Daemon
Forumember

Posts : 104
Reputation : 90
Language : Português

Back to top Go down

[Tutorial] Save text editor content Empty Re: [Tutorial] Save text editor content

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

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

Posts : 616
Reputation : 17
Language : english

http://jillhavern.forumotion.net/

Back to top Go down

Back to top

- Similar topics

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