Undo button, and smilie options?

[spellbinder]

Forum URL: thesixforever.proboards.com/

Good day,
I'm trying to figure out if there is an option to add an "undo" button in the posts? I'm less than a novice at the technical aspects of a board, & so far, my efforts to find this haven't been successful. I'm looking for a hyperlink button as well. 

Also, I'm wondering if there's a way to add more,  or update the smilies?

[Craig]

Hi

You can add more smilies via your edit images in the theme.

Admin > Themes > Theme Manager > Click on theme name to edit > Click on images

You should find a section for Smilies, with an option to add more images.

You should already find a hyperlink button on the reply page.  Click on the button to add a hyperlink.

In regards to the undo button.  Could you expand a little on what you would want this to do

[Chris]

<script>

/* Add UNDO and REDO to WYSIWYG controls (GLOBAL HEADER) */
(()=>{
window.jQuery && jQuery.ui.wysiwyg && $(document).on('wysiwygcreate', function(evt){
$(addUndo)
})

function addUndo(){
let W = $('.wysiwyg-textarea').data('wysiwyg')||{currentEditorName:'bbcode',editors:{bbcode:{}}}
$('.button-undo').length == 0 &&
$(`<li><div class="ui-selectMenu-box" style="padding:0;"><a class="button button-undo" data-control="undo" title="undo (CTRL or COMMAND + Z)" style="font-size:22px;"><b>\u2397</b></a>
<a class="button button-redo" data-control="redo" title="redo (CTRL or COMMAND + Y)" style="font-size:22px;"><b>\u2398</b></a></div></li>`).prependTo('.ui-wysiwyg :where(.bbcode-editor,.visual-editor) .group:first-of-type ul:first-of-type')
.on('click','a', function(event){
let cmd = event.currentTarget.dataset.control;
let doc = W.editors[W.currentEditorName].document||document
doc.execCommand(cmd,false,null);
})
}
$(addUndo)
})()

</script>

[spellbinder]

Mar 31, 2024 1:11:33 GMT -8 Craig said:

Hi

You can add more smilies via your edit images in the theme.

Admin > Themes > Theme Manager > Click on theme name to edit > Click on images

You should find a section for Smilies, with an option to add more images.

thank you for this information!

You should already find a hyperlink button on the reply page.  Click on the button to add a hyperlink.

Right you are! I don't know why I didn't notice this before! (still learning all this, so thank you for pointing this out)

In regards to the undo button.  Could you expand a little on what you would want this to do

It would function like the undo button on MS Word.  On a board I was previously part of  (that was a xenforo board), there was an undo button in the post bit.  It would look something like this in the post bit (see attached image).  The members of my board will write posts in the board rp that can be lengthy, & an undo button in the post bit would help lots. 

Attachments:

[spellbinder]

Mar 31, 2024 23:23:39 GMT -8 Chris said:

<script>

/* Add UNDO and REDO to WYSIWYG controls (GLOBAL HEADER) */
(()=>{
window.jQuery && jQuery.ui.wysiwyg && $(document).on('wysiwygcreate', function(evt){
$(addUndo)
})

function addUndo(){
let W = $('.wysiwyg-textarea').data('wysiwyg')||{currentEditorName:'bbcode',editors:{bbcode:{}}}
$('.button-undo').length == 0 &&
$(`<li><div class="ui-selectMenu-box" style="padding:0;"><a class="button button-undo" data-control="undo" title="undo (CTRL or COMMAND + Z)" style="font-size:22px;"><b>\u2397</b></a>
<a class="button button-redo" data-control="redo" title="redo (CTRL or COMMAND + Y)" style="font-size:22px;"><b>\u2398</b></a></div></li>`).prependTo('.ui-wysiwyg :where(.bbcode-editor,.visual-editor) .group:first-of-type ul:first-of-type')
.on('click','a', function(event){
let cmd = event.currentTarget.dataset.control;
let doc = W.editors[W.currentEditorName].document||document
doc.execCommand(cmd,false,null);
})
}
$(addUndo)
})()

</script>

Thank you for this information!

[spellbinder]

Mar 31, 2024 23:23:39 GMT -8 Chris said:

<script>

/* Add UNDO and REDO to WYSIWYG controls (GLOBAL HEADER) */
(()=>{
window.jQuery && jQuery.ui.wysiwyg && $(document).on('wysiwygcreate', function(evt){
$(addUndo)
})

function addUndo(){
let W = $('.wysiwyg-textarea').data('wysiwyg')||{currentEditorName:'bbcode',editors:{bbcode:{}}}
$('.button-undo').length == 0 &&
$(`<li><div class="ui-selectMenu-box" style="padding:0;"><a class="button button-undo" data-control="undo" title="undo (CTRL or COMMAND + Z)" style="font-size:22px;"><b>\u2397</b></a>
<a class="button button-redo" data-control="redo" title="redo (CTRL or COMMAND + Y)" style="font-size:22px;"><b>\u2398</b></a></div></li>`).prependTo('.ui-wysiwyg :where(.bbcode-editor,.visual-editor) .group:first-of-type ul:first-of-type')
.on('click','a', function(event){
let cmd = event.currentTarget.dataset.control;
let doc = W.editors[W.currentEditorName].document||document
doc.execCommand(cmd,false,null);
})
}
$(addUndo)
})()

</script>

Chris , just to let you know, I was able to get the undo button installed on my board! thank you again for your help! 

[spellbinder]

Mar 31, 2024 1:11:33 GMT -8 Craig said:

Hi

You can add more smilies via your edit images in the theme.

Admin > Themes > Theme Manager > Click on theme name to edit > Click on images

You should find a section for Smilies, with an option to add more images.

Craig  I got new/more smilies installed on my board today! thank you again for the info! I must say, the ppl here on the support boards are so responsive & provide useful information, that means alot to me!

[Chris]

Apr 1, 2024 12:04:33 GMT -8 spellbinder said:

Chris , just to let you know, I was able to get the undo button installed on my board! thank you again for your help! 

I am happy to hear it is working spellbinder , but I would like to bring something to your attention that might affect usability. The default theme has a CSS rule that sets the font size of bold tags to small, resulting in the following:

VS

I also wrote the code before seeing your image of the button on the toolbar. However, I saw that as the popular choice for that functionality during research. My apprehension is that the symbol being used ( ⟲ [aka \u27f2] and ⟳ [aka \u27f3]) is already associated with something else in a browser environment, and that is why I chose to find alternatives.

The code below has been rewritten so you can edit it with your chosen symbols (among other considerations). If you wish to use something other than bold (<b>) to avoid conflict with that default theme, you can also easily change that in the code below.

SPOILER: Click to show

<script>

/* Add UNDO and REDO to WYSIWYG Controls v1.2 (GLOBAL HEADER) */
window.jQuery && jQuery.ui.wysiwyg && (()=>{

const undoSymbol = `<b style="all:revert">\u2397</b>`
const redoSymbol = `<b style="all:revert">\u2398</b>`

/* wait for wysiwyg to load */
$(document).on('wysiwygcreate', function(evt){
$(createUndoButton)
})

/* setup polling for older quick reply button plugins that did not emit a wysiwygcreate event */
let quick_reply_timer = 0, quick_reply_counter=0, quick_reply_interval = 500;

function createUndoButton(){
if( ++quick_reply_counter > 19) return clearTimeout(quick_reply_timer)

let wysiwyg = $('.wysiwyg-textarea').data('wysiwyg')||{currentEditorName:'bbcode',editors:{bbcode:{},quickreply:!0}}

if($('.button-undo').length == 0){
let editors = $('.ui-wysiwyg :where([class*="-editor"]) .group:first-of-type ul:first-of-type')

/* NOTE: pb.data("quick_reply") never presents on a conversation page even when QR is present */
if(pb.data('quick_reply') && proboards.plugin._plugins["eton_quick_reply_bbbutton"] && editors.length == 0){
quick_reply_timer = setTimeout(createUndoButton,quick_reply_interval);
return console.log('%c quick reply undo/redo attempt #%d with timeoutID of %d','color:lime;background:black;',quick_reply_counter,quick_reply_timer)
}
$(`<li>
<div class="ui-selectMenu-box" style="padding:0;">
<a class="button button-undo" data-control="undo" title="undo (CTRL or CMD + Z)" style="font-size:22px;">${undoSymbol}</a>
</div>
</li>
<li>
<div class="ui-selectMenu-box" style="padding:0;">
<a class="button button-redo" data-control="redo" title="redo (CTRL or CMD + Y)" style="font-size:22px;">${redoSymbol}</a>
</div>
</li>`)
.prependTo(editors)
.on('click','a', function(event){
let cmd = event.currentTarget.dataset.control;
let doc = wysiwyg.editors[wysiwyg.currentEditorName].document||document
doc.execCommand(cmd,false,null);
})
clearTimeout(quick_reply_timer);
}
}
$(createUndoButton)
})()

/* History Log:

v1.2 - Updated to work with older quick reply BBCode plugins
v1.1 - Added variables to allow customization of respective undo and redo symbols, as well as added separation
*/

</script>

Suggested Alternate Icons:

\u2934 ⤴	\u2935 ⤵

\u2936 ⤶	\u2937 ⤷

\u2938 ⤸	\u2939 ⤹

\u293a ⤺	\u293b ⤻

\u293c ⤼	\u293d ⤽

\u293e ⤾	\u293f ⤿

\u2940 ⥀	\u2941 ⥁

\u{1f8a0} 🢠	\u{1f8a1} 🢡

\u{1f8a2} 🢢	\u{1F8A3} 🢣

[spellbinder]

Apr 1, 2024 16:04:32 GMT -8 Chris said:

Apr 1, 2024 12:04:33 GMT -8 spellbinder said:

Chris , just to let you know, I was able to get the undo button installed on my board! thank you again for your help! 

I am happy to hear it is working spellbinder , but I would like to bring something to your attention that might affect usability. The default theme has a CSS rule that sets the font size of bold tags to small, resulting in the following:

VS

I also wrote the code before seeing your image of the button on the toolbar. However, I saw that as the popular choice for that functionality during research. My apprehension is that the symbol being used ( ⟲ [aka \u27f2] and ⟳ [aka \u27f3]) is already associated with something else in a browser environment, and that is why I chose to find alternatives.

The code below has been rewritten so you can edit it with your chosen symbols (among other considerations). If you wish to use something other than bold (<b>) to avoid conflict with that default theme, you can also easily change that in the code below.

SPOILER: Click to show

<script>

/* Add UNDO and REDO to WYSIWYG Controls v1.2 (GLOBAL HEADER) */
window.jQuery && jQuery.ui.wysiwyg && (()=>{

const undoSymbol = '<b>\u2397</b>'
const redoSymbol = '<b>\u2398</b>'

/* wait for wysiwyg to load */
$(document).on('wysiwygcreate', function(evt){
$(createUndoButton)
})

/* setup polling for older quick reply button plugins that did not emit a wysiwygcreate event */
let quick_reply_timer = 0, quick_reply_counter=0, quick_reply_interval = 500;

function createUndoButton(){
if( ++quick_reply_counter > 19) return clearTimeout(quick_reply_timer)

let wysiwyg = $('.wysiwyg-textarea').data('wysiwyg')||{currentEditorName:'bbcode',editors:{bbcode:{},quickreply:!0}}

if($('.button-undo').length == 0){
let editors = $('.ui-wysiwyg :where([class*="-editor"]) .group:first-of-type ul:first-of-type')

/* NOTE: pb.data("quick_reply") never presents on a conversation page even when QR is present */
if(pb.data('quick_reply') && proboards.plugin._plugins["eton_quick_reply_bbbutton"] && editors.length == 0){
quick_reply_timer = setTimeout(createUndoButton,quick_reply_interval);
return console.log('%c quick reply undo/redo attempt #%d with timeoutID of %d','color:lime;background:black;',quick_reply_counter,quick_reply_timer)
}
$(`<li>
<div class="ui-selectMenu-box" style="padding:0;">
<a class="button button-undo" data-control="undo" title="undo (CTRL or CMD + Z)" style="font-size:22px;">${undoSymbol}</a>
</div>
</li>
<li>
<div class="ui-selectMenu-box" style="padding:0;">
<a class="button button-redo" data-control="redo" title="redo (CTRL or CMD + Y)" style="font-size:22px;">${redoSymbol}</a>
</div>
</li>`)
.prependTo(editors)
.on('click','a', function(event){
let cmd = event.currentTarget.dataset.control;
let doc = wysiwyg.editors[wysiwyg.currentEditorName].document||document
doc.execCommand(cmd,false,null);
})
clearTimeout(quick_reply_timer);
}
}
$(createUndoButton)
})()

/* History Log:

v1.2 - Updated to work with older quick reply BBCode plugins
v1.1 - Added variables to allow customization of respective undo and redo symbols, as well as added separation
*/

</script>

Suggested Alternate Icons:

\u2934 ⤴		\u2935 ⤵

\u2936 ⤶		\u2937 ⤷

\u2938 ⤸		\u2939 ⤹

\u293a ⤺		\u293b ⤻

\u293c ⤼		\u293d ⤽

\u293e ⤾		\u293f ⤿

\u2940 ⥀		\u2941 ⥁

\u{1f8a0} 🢠		\u{1f8a1} 🢡

\u{1f8a2} 🢢		\u{1F8A3} 🢣

Chris, thank you for this info & update! I was able to get this installed on my board! I really appreciate your attention to detail! This support board is fantastic! the experts here have been so responsive & willing to help, & that means a lot to a total beginner like me!