Add a "Bump" button for the Sceditor

Go down

Add a "Bump" button for the Sceditor Empty Add a "Bump" button for the Sceditor

Post by YoshiGM October 10th 2016, 2:36 am

With this code you can add a new button in your Sceditor, that inserts automatically a "Bump" text:

Add a "Bump" button for the Sceditor Bump_b10

Code:

$(function(){
    $(function(){
          $('<a class="sceditor-button sceditor-button-bump" unselectable="on" title="Bump"><div unselectable="on" style="background-image:url(http://i97.servimg.com/u/f97/13/45/80/80/new-go10.png)">Bump</div></a>').insertAfter('.sceditor-button-fahide').click(function(){
              $('#text_editor_textarea').sceditor("instance").insertText("Bump");
          });
      });
});

If you want to change the button icon, just edit the link:

Code:
http://i97.servimg.com/u/f97/13/45/80/80/new-go10.png

YoshiGM
YoshiGM
Active Poster

Male Posts : 1090
Reputation : 131
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

Add a "Bump" button for the Sceditor Empty Re: Add a "Bump" button for the Sceditor

Post by Ange Tuteur October 12th 2016, 4:49 pm

@YoshiGM nice work and interesting idea. I have a suggestion though. Instead of creating the button via an HTML string you can set custom commands with the SCEditor's API. See this page : http://www.sceditor.com/documentation/custom-commands/

You need to use $.sceditor.command.set to create your custom button, then you have to modify the global variable "toolbar" which contains the SCEditor toolbar string -- basically adding your button name into it. Defining your commands this way will prevent any bugs from occurring especially in WYSIWYG mode. See the example below :
Code:
$(function() {

  // check if $.sceditor and toolbar are defined
  if ($.sceditor && window.toolbar) {

    // function to execute when button is clicked
    var exec = function () {
      this.insertText('Bump');
    };

    // set SCEditor command
    $.sceditor.command.set('bump', {
      tooltip : 'Bump',

      exec : exec, // WYSIWYG mode
      txtExec : exec // Source mode
    });

    // add button to the editor toolbar
    toolbar = toolbar.replace(/fahide/, 'fahide,bump');
  }

});

NOTE : With this method you'll have to add CSS to your stylesheet :
Code:
.sceditor-button-bump div {
  background-image:url(http://i97.servimg.com/u/f97/13/45/80/80/new-go10.png) !important;
}
You can also just document.write the style in via JS as well.

I wanted to let you know of this method, because it's a lot more convenient for defining commands ; you don't have to mess with HTML strings so it's easier to read and define functions. Wink

P.S.
What would make this even better is if it automatically submitted the post when you clicked the button. Think of it as a coding challenge I bestow upon any of you willing to take it on. Shifty
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13242
Reputation : 2980
Language : EN, JA, FR
Location : Pennsylvania

View user profile https://fmdesign.forumotion.com

Back to top Go down

Add a "Bump" button for the Sceditor Empty Re: Add a "Bump" button for the Sceditor

Post by YoshiGM October 12th 2016, 6:07 pm

Oh.. I no had idea of that information about the Sceditor
I'm still a bit of a novice with jQuery but thank you for your suggestion.
Regards!
YoshiGM
YoshiGM
Active Poster

Male Posts : 1090
Reputation : 131
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

Add a "Bump" button for the Sceditor Empty Re: Add a "Bump" button for the Sceditor

Post by Ace 1 October 20th 2016, 7:10 pm

@Ange Tuteur

Code:
$(function() {
 
  // check if $.sceditor and toolbar are defined
  if ($.sceditor && window.toolbar) {
 
    // function to execute when button is clicked
    var exec = function () {
      this.insertText('Bump');

      // submit post
      document.forms.post.post.click();
    };
 
    // set SCEditor command
    $.sceditor.command.set('bump', {
      tooltip : 'Bump',
 
      exec : exec, // WYSIWYG mode
      txtExec : exec // Source mode
    });
 
    // add button to the editor toolbar
    toolbar = toolbar.replace(/fahide/, 'fahide,bump');

    $('head').append('<style type="text/css">' +
        '.sceditor-button-bump div {' +
            'background-image:url(http://i97.servimg.com/u/f97/13/45/80/80/new-go10.png) !important;' +
        '}' +
    '</style>');
  }
 
});

@YoshiGM You can change the
Code:
this.insertText('Bump');
to
Code:
this.val('Bump');
if you want them to only post the word Bump and nothing else.
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

View user profile https://help.forumotion.com

Back to top Go down

Add a "Bump" button for the Sceditor Empty Re: Add a "Bump" button for the Sceditor

Post by marco6205 February 22nd 2018, 12:15 am

Hello
I create a button to insert a predefined table
Code:
$(function(){$(function(){
$('<a class="sceditor-button " unselectable="on" title="Tableau Enchères"><div unselectable="on" style="background-image:url(https://i62.servimg.com/u/f62/18/31/09/16/trefle10.png)">TabBids</div></a>').insertAfter('.sceditor-button-table').click(function(){
$('#text_editor_textarea').sceditor("instance").insert("[table class='IDtableBids']","[tr][td class='cel']OUEST[/td]
[td class='cel' align='center' border='1' height='20' width='50']NORD[/td]
[td class='cel' align='center' border='1' height='20' width='50' ]EST[/td]
[td class='cel' align='center' border='1' height='20' width='50']SUD[/td]
[/tr]
[tr][td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[/tr]
[tr][td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[/tr]
[tr][td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[td class='cel' align='center' border='1' height='20' width='50'][/td]
[/tr]                                                     
[/table]");
  });
})});

I want to create a button to clear the empty lines of the created table.
I'm trying to use the example you gave but I have errors: the function "getElementById" is not valid

Code:
 $(function() {
   // check if $.sceditor and toolbar are define
   if ($.sceditor && window.toolbar) {   
      // function to execute when button is clicked
      var exec = function () {
         var editor = this;
         var vide = true;
         var tablo = editor.getElementById('IDtableBids');
         var ligne = tablo.getElementsByTagName('tr');   
         var i=ligne.length;
         do {
            (i = i - 1);
            var cellule = ligne[i].getElementsByTagName('td');
            for (var j = 0 ; j < cellule.length ; j++ ){
               if (cellule[j].innerHTML !=""){
                  vide = false;
                  break;
               }
            }
            if (vide==true){
               tablo.deleteRow(-1);
            }
         }while (vide==true);
      };
   
      // set SCEditor command
      $.sceditor.command.set('deleteligne', {
        tooltip : 'deleteligne',

        exec : exec, // WYSIWYG mode
        txtExec : exec // Source mode
      });
   
      // add button to the editor toolbar
      toolbar = toolbar.replace(/fahide/, 'fahide,deleteligne');
   }
});
code CSS
Code:
.sceditor-button-deleteligne div {
  background: url('https://i62.servimg.com/u/f62/18/31/09/16/trefle10.png')!important;
}

marco6205
marco6205
New Member

Posts : 1
Reputation : 1
Language : français

View user profile http://marco62118@gmail.com

Back to top Go down

Back to top


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