1. #1
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default Ext.ux.form.HtmlEditor.Plugins

    Ext.ux.form.HtmlEditor.Plugins


    This is a set of plugins that add to the HTML editing functionality of the HtmlEditor Component. There is also a base class thats easily extended or configured to add standard Midas commands that don't require a 3rd argument.



    Currently, these are the plugins that have been created for this set:
    • SpecialCharacters (Character Map)
    • WordPaste
    • Divider
    • Table
    • HR
    • IndentOutdent
    • SubSuperScript
    • RemoveFormat
    • MidasCommand
    • Heading
    • Font (experimental)

    For more info, see the blog post(s) about it.
    http://www.vinylfox.com/plugin-set-f...ditor-buttons/
    http://www.vinylfox.com/plugin-set-f...-charactermap/
    All the code can be found on Github. Also check out the README on Github.
    http://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins
    Limited mirroring of updates on Google Code's SVN.
    http://code.google.com/p/ext-ux-htmleditor-plugins/

    Enjoy! and please feel free to suggest changes and fixes here.

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2008
    Location
    Philadelphia, PA
    Posts
    131
    Vote Rating
    0
    mprice is on a distinguished road

      0  

    Thumbs up


    Shea - this is great! I was also looking at TinyMCE as a more robust solution than the out-of-the-box html editor, but your plugins meet most of the needs. Love the MidasCommand "base class" concept. I pulled down the .js files and dropped them in to my 2.2.1 test area and included them in the dynamic form example per your instructions on your blog. But I got some strange results when loading up in FF. The editor appears to duplicate:

    temp.jpg

    I included the .js files in examples/form/dynamic.html as follows:

    HTML Code:
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Forms</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    
        <!-- GC -->
        <!-- LIBS -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <script type="text/javascript" src="states.js"></script>
        <script type="text/javascript" src="dynamic.js"></script>
        <link rel="stylesheet" type="text/css" href="forms.css"/>
    
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
    
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.MidasCommand.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.Divider.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.HR.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.IndentOutdent.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.RemoveFormat.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.SubSuperScript.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.Table.js"></script>
        <script type="text/javascript" src="plugins/Ext.ux.form.HtmlEditor.Word.js"></script>
    
    </head>
    and added the plugins to the examples/form/dynamic.js file as follows:

    Code:
    xtype:'htmleditor',
    id:'bio',
    fieldLabel:'Biography',
    height:200,
    anchor:'98%',
    plugins: [
        new Ext.ux.form.HtmlEditor.Divider(),
        new Ext.ux.form.HtmlEditor.Word(),  
        new Ext.ux.form.HtmlEditor.Table(),  
        new Ext.ux.form.HtmlEditor.HR(),  
        new Ext.ux.form.HtmlEditor.IndentOutdent(),  
        new Ext.ux.form.HtmlEditor.SubSuperScript(),  
        new Ext.ux.form.HtmlEditor.RemoveFormat() 
    ]

  3. #3
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Quote Originally Posted by mprice View Post
    ... pulled down the .js files and dropped them in to my 2.2.1 test area ...
    These were developed on the 3.x branch.

    If I remember right, 2.2.1 does not have Ext.isObject, which is used in my code. That is one area these plugins will fail at. Not sure what else might be specific to 3.x.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2008
    Location
    Philadelphia, PA
    Posts
    131
    Vote Rating
    0
    mprice is on a distinguished road

      0  

    Default


    Gotcha. Ran in 3.0 RC2, and only had one issue with the following line in the Table and HR classes:

    Code:
    animateTarget: btn.getEl(),
    Firebug says:

    Code:
    btn is undefined
    handler()()
    DomHelper()(Object browserEvent=Event blur button=-1 type=blur)
    A()
    animateTarget: btn.getEl(),
    If I commented this line out, worked just fine.

  5. #5
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Quote Originally Posted by mprice View Post
    ...If I commented this line out, worked just fine.
    I didn't really like the window animation anyway, so I just removed that from my code and committed. Not sure why it would fail like that though. Thanks for the testing and feedback. Let me know if you find anything else.

  6. #6
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    I have added a character map button, which pops up a window allowing you to select special characters from a view.



    Updated the google code SVN with this new code.

  7. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    19
    Vote Rating
    0
    irina is on a distinguished road

      0  

    Exclamation


    Hi,
    I got this plugin form SVN, but there are only .js files. It works for me but there are no icons. How could I get images for buttons?
    Thank you very much,
    Irina

  8. #8
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    The icons are up to you to implement, I typically snag a few I like from the many open source icon sets that are out there...

    http://www.famfamfam.com/
    http://code.google.com/p/fugue-icons/
    http://www.everaldo.com/crystal/

    Enjoy

  9. #9
    Sencha User
    Join Date
    Aug 2008
    Posts
    19
    Vote Rating
    0
    irina is on a distinguished road

      0  

    Thumbs up


    Ok, got it, thanks a lot for good icons resources.

  10. #10
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Also, I should mention that the 'style.css' file that is up on the code repo has some examples. The styles basically use the midas command name as the css name with '.x-edit-' pre-pended to it. For example:

    Code:
    .x-edit-outdent {background: url(../images/edit-outdent.png) 0 0 no-repeat !important;}
    .x-edit-subscript {background: url(../images/text_sub.png) 0 0 no-repeat !important;}
    .x-edit-superscript {background: url(../images/text_super.png) 0 0 no-repeat !important;}
    .x-edit-removeFormat {background: url(../images/exclamation.png) 0 0 no-repeat !important;}
    In that first style 'outdent' is the midas command, so that button will use '.x-edit-outdent' as the style name. Etc.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar