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  
  • RegisterRegister  
  • Log inLog in  
  • November 2017
    MonTueWedThuFriSatSun
      12345
    6789101112
    13141516171819
    20212223242526
    27282930   

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Shopmotion


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

    None

    Most users ever online was 22 on June 26th 2013, 6:10 am
    RSS feeds


    Poll
    Top posting users this week


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

    avatar

    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: Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

    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 on June 13th 2013, 11:41 am by LGforum

    avatar
    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 on 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]