You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by George Christman <gc...@cardaddy.com> on 2014/03/23 21:15:05 UTC
Ckeditor for T5.4 complete with code sample
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.
Re: Ckeditor for T5.4 complete with code sample
Posted by George Christman <gc...@cardaddy.com>.
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ó <pa...@gmail.com>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 <thiagohp@gmail.com
> >wrote:
>
> > On Tue, 25 Mar 2014 10:27:45 -0300, Geoff Callender <
> > geoff.callender.jumpstart@gmail.com> 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: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
--
George Christman
www.CarDaddy.com
P.O. Box 735
Johnstown, New York
Re: Ckeditor for T5.4 complete with code sample
Posted by Balázs Palcsó <pa...@gmail.com>.
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 <th...@gmail.com>wrote:
> On Tue, 25 Mar 2014 10:27:45 -0300, Geoff Callender <
> geoff.callender.jumpstart@gmail.com> 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: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Ckeditor for T5.4 complete with code sample
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Tue, 25 Mar 2014 10:27:45 -0300, Geoff Callender
<ge...@gmail.com> 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: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Ckeditor for T5.4 complete with code sample
Posted by Geoff Callender <ge...@gmail.com>.
Very cool.
On 24 March 2014 07:15, George Christman <gc...@cardaddy.com> 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.
>