Ckeditor for T5.4 complete with code sample

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Ckeditor for T5.4 complete with code sample

George Christman
Hi Guys, I do not have a blog or time to create one atm, but I'd like to
share the code to create a ckeditor incase anybody else wanted to use it.

Start by downloading ckeditor from ckeditor.com and install it in
META-INF/modules. I added another directory for vendor which is where I
installed the ckeditor folder and it's code base.

META-INF/modules/vendor/ckeditor/ "ckeditor code base goes here"

in modules I added a script to load ckeditor with requirejs like so.

META-INF/modules/ckeditor-config.js

 requirejs.config({
    shim: {
        'ckeditor-jquery': ['jquery', 'ckeditor-core']
    },
    paths: {
        'ckeditor-core': 'vendor/ckeditor/ckeditor',
        'ckeditor-jquery': 'vendor/ckeditor/adapters/jquery'
    }
});
define(["jquery", "ckeditor-jquery"], function($) {

    init = function(spec) {
        $('#' + spec.id).ckeditor();
    };

    return init;
});

Now create a mixin CKEditor.java

public class CKEditor {

    @InjectContainer
    private Field field;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    public void afterRender() {
        JSONObject json = new JSONObject();
        json.put("id", field.getClientId());
        javaScriptSupport.require("editor").with(json);
    }
}

add to your textarea component, mixins="ckeditor"

Add a request filter to handle the assets, "based on Thiagos work"

public class CkeditorRequestFilter implements RequestFilter {

    /**
     * Folders containing WYMeditor assets.
     */
    final private static String[] FILE_FOLDER = {"/skins/",
"/contents.css", "/plugins/"};

    final private AssetSource assetSource;

    /**
     * Single constructor of this class.
     *
     * @param assetSource an {@link AssetSource}.
     */
    public CkeditorRequestFilter(AssetSource assetSource) {
        super();
        this.assetSource = assetSource;
    }

    public boolean service(Request request, Response response,
RequestHandler handler) throws IOException {

        String path = request.getPath();
        boolean handled = false;

        // we only handle requests for ckeditor asset URLs and which
weren't redirected already
        if (path.contains("/vendor/ckeditor") &&
request.getParameter("redirected") == null) {

            for (String folder : FILE_FOLDER) {

                if (path.contains(folder)) {

                    // extract the ckeditor asset being requested.
                    path = path.substring(path.indexOf('/',
path.indexOf("/modules.gz/") + 1));

                    // find its location in the classpath.
                    String location = "/META-INF/modules" + path;

                                        // create an Asset pointing to it.
Its URL will contain the right checksum
                    // for this file
                    Asset asset = assetSource.getClasspathAsset(location);

                                        // we create the redirection target
URL with "/?redirected" in the end
                    // so we can spot and avoid redirection infinite loops.
                    final String redirectionUrl = asset.toClientURL() +
"/?redirected";

                    // finally, we redirect.
                    response.sendRedirect(redirectionUrl);
                    handled = true;
                    break;

                }

            }

        }

        // if we didn't redirect, we pass this request to the next
RequestFilter in the pipeline
        return handled ? handled : handler.service(request, response);

    }

}

Lastly, add a request filter to your app module and create an
ClasspathAssetAliasManager

public void contributeRequestHandler(OrderedConfiguration<RequestFilter>
configuration,
            @Local RequestFilter filter) {
        configuration.addInstance("ckeditor", CkeditorRequestFilter.class);
    }

public static void
contributeClasspathAssetAliasManager(MappedConfiguration<String, String>
configuration) {
        configuration.add("ck", "META-INF/modules/vendor");
    }

Feel free to improve or use on a blog, the request filter may not be 100%
correct, but it does work without issue.
Reply | Threaded
Open this post in threaded view
|

Re: Ckeditor for T5.4 complete with code sample

JumpStart
Very cool.


On 24 March 2014 07:15, George Christman <[hidden email]> wrote:

> Hi Guys, I do not have a blog or time to create one atm, but I'd like to
> share the code to create a ckeditor incase anybody else wanted to use it.
>
> Start by downloading ckeditor from ckeditor.com and install it in
> META-INF/modules. I added another directory for vendor which is where I
> installed the ckeditor folder and it's code base.
>
> META-INF/modules/vendor/ckeditor/ "ckeditor code base goes here"
>
> in modules I added a script to load ckeditor with requirejs like so.
>
> META-INF/modules/ckeditor-config.js
>
>  requirejs.config({
>     shim: {
>         'ckeditor-jquery': ['jquery', 'ckeditor-core']
>     },
>     paths: {
>         'ckeditor-core': 'vendor/ckeditor/ckeditor',
>         'ckeditor-jquery': 'vendor/ckeditor/adapters/jquery'
>     }
> });
> define(["jquery", "ckeditor-jquery"], function($) {
>
>     init = function(spec) {
>         $('#' + spec.id).ckeditor();
>     };
>
>     return init;
> });
>
> Now create a mixin CKEditor.java
>
> public class CKEditor {
>
>     @InjectContainer
>     private Field field;
>
>     @Inject
>     private JavaScriptSupport javaScriptSupport;
>
>     public void afterRender() {
>         JSONObject json = new JSONObject();
>         json.put("id", field.getClientId());
>         javaScriptSupport.require("editor").with(json);
>     }
> }
>
> add to your textarea component, mixins="ckeditor"
>
> Add a request filter to handle the assets, "based on Thiagos work"
>
> public class CkeditorRequestFilter implements RequestFilter {
>
>     /**
>      * Folders containing WYMeditor assets.
>      */
>     final private static String[] FILE_FOLDER = {"/skins/",
> "/contents.css", "/plugins/"};
>
>     final private AssetSource assetSource;
>
>     /**
>      * Single constructor of this class.
>      *
>      * @param assetSource an {@link AssetSource}.
>      */
>     public CkeditorRequestFilter(AssetSource assetSource) {
>         super();
>         this.assetSource = assetSource;
>     }
>
>     public boolean service(Request request, Response response,
> RequestHandler handler) throws IOException {
>
>         String path = request.getPath();
>         boolean handled = false;
>
>         // we only handle requests for ckeditor asset URLs and which
> weren't redirected already
>         if (path.contains("/vendor/ckeditor") &&
> request.getParameter("redirected") == null) {
>
>             for (String folder : FILE_FOLDER) {
>
>                 if (path.contains(folder)) {
>
>                     // extract the ckeditor asset being requested.
>                     path = path.substring(path.indexOf('/',
> path.indexOf("/modules.gz/") + 1));
>
>                     // find its location in the classpath.
>                     String location = "/META-INF/modules" + path;
>
>                                         // create an Asset pointing to it.
> Its URL will contain the right checksum
>                     // for this file
>                     Asset asset = assetSource.getClasspathAsset(location);
>
>                                         // we create the redirection target
> URL with "/?redirected" in the end
>                     // so we can spot and avoid redirection infinite loops.
>                     final String redirectionUrl = asset.toClientURL() +
> "/?redirected";
>
>                     // finally, we redirect.
>                     response.sendRedirect(redirectionUrl);
>                     handled = true;
>                     break;
>
>                 }
>
>             }
>
>         }
>
>         // if we didn't redirect, we pass this request to the next
> RequestFilter in the pipeline
>         return handled ? handled : handler.service(request, response);
>
>     }
>
> }
>
> Lastly, add a request filter to your app module and create an
> ClasspathAssetAliasManager
>
> public void contributeRequestHandler(OrderedConfiguration<RequestFilter>
> configuration,
>             @Local RequestFilter filter) {
>         configuration.addInstance("ckeditor", CkeditorRequestFilter.class);
>     }
>
> public static void
> contributeClasspathAssetAliasManager(MappedConfiguration<String, String>
> configuration) {
>         configuration.add("ck", "META-INF/modules/vendor");
>     }
>
> Feel free to improve or use on a blog, the request filter may not be 100%
> correct, but it does work without issue.
>
Reply | Threaded
Open this post in threaded view
|

Re: Ckeditor for T5.4 complete with code sample

Thiago H de Paula Figueiredo
On Tue, 25 Mar 2014 10:27:45 -0300, Geoff Callender  
<[hidden email]> wrote:

> Very cool.

Yep. Deserves its own repository in GitHub and JAR in the Maven Central  
Repository. :) I can help you with that if you want.

--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Ckeditor for T5.4 complete with code sample

balapal
Hi,

Tynamo also has a CKEditor integration plugin :
https://github.com/tynamo/tapestry-ckeditor
http://tynamo.org/tapestry-ckeditor+guide

It would worth considering to contribute to the existing one instead of
creating a new one.

Please note that Tynamo's tapestry-ckeditor is currently not working with
the current 5.4-beta3 version due to this regression issue:
https://issues.apache.org/jira/browse/TAP5-2300





On 25 March 2014 13:35, Thiago H de Paula Figueiredo <[hidden email]>wrote:

> On Tue, 25 Mar 2014 10:27:45 -0300, Geoff Callender <
> [hidden email]> wrote:
>
>  Very cool.
>>
>
> Yep. Deserves its own repository in GitHub and JAR in the Maven Central
> Repository. :) I can help you with that if you want.
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Ckeditor for T5.4 complete with code sample

George Christman
Thiago I agree it does belong on github, but unfortunately I have no
experience with using github and I probably wouldn't be able to maintained
it. It's probably better off with the Tynamo guys where it can be
maintained.

I think what Tapestry needs is a central git repository where the community
can contribute third party components like these. I think that would really
help to build our community bigger and stronger. I have no issue
contributing my components, I just lack the time to build blogs or maintain
the code.


On Tue, Mar 25, 2014 at 10:30 AM, Balázs Palcsó <[hidden email]>wrote:

> Hi,
>
> Tynamo also has a CKEditor integration plugin :
> https://github.com/tynamo/tapestry-ckeditor
> http://tynamo.org/tapestry-ckeditor+guide
>
> It would worth considering to contribute to the existing one instead of
> creating a new one.
>
> Please note that Tynamo's tapestry-ckeditor is currently not working with
> the current 5.4-beta3 version due to this regression issue:
> https://issues.apache.org/jira/browse/TAP5-2300
>
>
>
>
>
> On 25 March 2014 13:35, Thiago H de Paula Figueiredo <[hidden email]
> >wrote:
>
> > On Tue, 25 Mar 2014 10:27:45 -0300, Geoff Callender <
> > [hidden email]> wrote:
> >
> >  Very cool.
> >>
> >
> > Yep. Deserves its own repository in GitHub and JAR in the Maven Central
> > Repository. :) I can help you with that if you want.
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: [hidden email]
> > For additional commands, e-mail: [hidden email]
> >
> >
>



--
George Christman
www.CarDaddy.com
P.O. Box 735
Johnstown, New York