Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    wysihtml5 editor - need to add buttons to insert some symbols to the typing area

    Hello,

    I'm trying to use https://github.com/xing/wysihtml5, after customising the toolbar.

    I just need to add some buttons that should insert some unicode symbols to the typing area, when clicked. I believe this won't require any changes in the parser script.

    I've made the GUI, but I don't know how to define the 'commands'

    I've uploaded a demo at http://itsnot.freehostia.com/wysihtm...ihtml5-new.htm

    I've added the additional buttons to the markup, like
    Code:
    <li data-wysihtml5-command="insertInches" title="Insert inches symbol" class="command"></li>
    
    <li data-wysihtml5-command-group="foreFrac" class="fore-frac command" title="Insert the fraction">
    
    <ul>
    
    <li data-wysihtml5-command="foreFrac" data-wysihtml5-command-value="½">½</li>
    
    <li data-wysihtml5-command="foreFrac" data-wysihtml5-command-value="⅓">⅓</li>
    
    <li data-wysihtml5-command="foreFrac" data-wysihtml5-command-value="⅔">⅔</li>
    
    </ul>
    
    </li>
    Can anyone please give some hints to define the commands?

    (I don't even need to stick with the syntax/structure of the wysihtml5-0.3.0.js script. Something that would insert the innerHTML value of the <li>s to the typing would even be useful)

    Thanks.
    Last edited by abduraooft; 08-14-2012 at 05:19 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    Code:
    function injectString(str){
       var sel=frames[0].getSelection()
       var nd=sel.anchorNode;
       var txt=nd.data+'';
       var pos=sel.anchorOffset||0;
       sel.anchorNode.data=
        txt.slice(0,pos)+
        str+
        txt.slice(pos);
     }
     
    injectString( "⅖" );
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Thanks fir the reply, but it doesn't work completely.

    I've tried it like
    Code:
    <li onclick="injectString( this.innerHTML);">½</li>
    Code:
    function injectString(str){
       var sel=frames[0].getSelection()
       var nd=sel.anchorNode;
       var txt=nd.data+'';
       var pos=sel.anchorOffset||0;
       sel.anchorNode.data=txt.slice(0,pos)+str+txt.slice(pos);
     }
    Edit: It inserts ½ to the iframe, when there's something already typed there.

    Looks like, it doesn't insert the symbol to the end of what originally typed. I need to either select some text or put the cursor in between two characters to get it work.


    Edit: Also, it moves the cursor to the beginning of the typing area, after button click

    I've updated the demo page at http://itsnot.freehostia.com/wysihtm...ihtml5-new.htm
    Last edited by abduraooft; 08-14-2012 at 08:03 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,349
    Thanks
    11
    Thanked 589 Times in 570 Posts
    try this:

    Code:
    window.frames[0].document.execCommand("InsertHTML", false,  "ƒ" );
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    abduraooft (08-14-2012)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Excellent! Thank you very much!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,856
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Here's an update.

    Got a simple and apt solution from https://github.com/xing/wysihtml5/is...omment-7815924

    It's very simple and no need to use any extra js.
    Code:
    <li data-wysihtml5-command="insertHTML" data-wysihtml5-command-value="½">½</li>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •