Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Similar topics
    Who is online?
    In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

    None

    Most users ever online was 140 on July 4th 2021, 2:03 pm
    RSS feeds


    Poll
    Top posting users this week
    No user


    View previous topic View next topic Go down  Message [Page 1 of 1]

    Mr.EasyBB

    Adding New Buttons to The SCEditor

    Mr.EasyBB
    06/12/2013
    Ok guys so today I am going to show you how to add various buttons to the SCEditor. First let's make sure you have the SCEditor Template that I've provided [You must be registered and logged in to see this link.] if you do great. Let's go on with all of this.


    Ok so let me explain so things to you all

    Code:
    $.sceditor.command.set("commandname", {
     exec: function() {
     this.insert("a");
     },
     txtExec: function() {
     this.insert("a");
     },
     tooltip: "Insert the letter a"
    });



    The code above is just an example. I am going to explain some of what it is...

    The "commandname" is of course the name of your button. So say you want a warning button... So then do "warning", I haven't tested this out for Moderators (used with the toolbar) Though I will let you know if this possible in the long run.

    Next is the exec: that is the execution of on click. It can either be a text string or a function.

    Then the txtExec can take either a text string or an array. 

    tooltip: is pretty self explanatory, it will be the text string on hover.


    So let's make our first button!


    Code:
    $.sceditor.command.set("warning", {
     exec: function() {
     this.insert("[*warn]Place Warning Text Here[*/warn]");
     },
     txtExec: ["[*warn]","[*/warn]"]
     },
     tooltip: "Warn Somebody"
    });





     
    So the txtExec is basically say if I highlight text, and click the button, it won't erase my highlighted text except wrap it with the warn tag.

    You're done with the new command.



    Once you have a button implemented we have to get our style





    Code:
    .sceditor-button-[name] div { background: url('/images/icon.png'); }






    Name being the commandname so ours would be .sceditor-button-warning

    Then we have to set it to our header (where the buttons are located)

    So now go down to the template, and find the option toolbar: "bold,italic"...

    Find where you want your new command and place it there. So above I just listed bold and italic, so what if I want it in the middle of those...

    toolbar: "bold,warning,italic"...

    Simple as that!

    Save it and test it out
    Share this post on: reddit

    avatar
    By including the "template" you mention here in Javascript: [You must be registered and logged in to see this link.]
    You're instantiating the new editor twice, which is a bad idea.

    A copy of the editors instance is saved as data to the textarea, so you can get it with $('#text_editor_textarea').data('sceditor');

    At least before instantiating it again you should destroy the old one using its 'destroy' method as to prevent any memory leaks or clashes.

    Or, if you can in the template area, if you're able to remove Forumotions initiation then that would be even better. At least move it out of the document.ready function.

    Just food for thought, because currently, including another initiation is a bad way of going about things.

    Post June 13th 2013, 11:41 am by LGforum

    Mr.EasyBB
    Yes I see what you mean LG, I appreciate the tip here, I knew instantiating it twice wasn't "good" though usually like adding two jQuery libraries or two other Plugins they cancel themselves out. And this didn't, as anything in the script source has priority, wouldn't the second instantiated code from FM be technically canceled out? 

    Our Script Level ----


    Their Script level----

    Post June 13th 2013, 2:44 pm by Mr.EasyBB

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]