WYSIWYG Editor Dynamic Includes

All WYSIWYG editors share the same dynamic include extension points for these things:

  • Adding resources, plugins, etc. to the editor:

    com.liferay.frontend.editor.editorType.web#editorName#additionalResources

  • Accessing the editor instance to listen to events, configure it, etc:

    com.liferay.frontend.editor.editorType.web#editorName#onEditorCreate

The table below shows the editorType, variable, and editorNames for each editor:

editorTypevariableeditorName
alloyeditoralloyEditoralloyeditor
  alloyeditor_bbcode
  alloyeditor_creole
ckeditorckEditorckeditor
  ckeditor_bbcode
  ckeditor_creole
tinymcetinyMCEEditortinymce
  tinymce_simple

The example below alerts the user when he/she pastes content into the CKEditor.

*DynamicInclude Java Class:

@Component(immediate = true, service = DynamicInclude.class)
public class CKEditorOnEditorCreateDynamicInclude implements DynamicInclude {

	@Override
	public void include(
			HttpServletRequest request, HttpServletResponse response,
			String key)
		throws IOException {

		Bundle bundle = _bundleContext.getBundle();

		URL entryURL = bundle.getEntry(
			"/META-INF/resources/ckeditor/extension/ckeditor_alert.js");

		StreamUtil.transfer(
			entryURL.openStream(), response.getOutputStream(), false);
	}

	@Override
	public void register(
		DynamicInclude.DynamicIncludeRegistry dynamicIncludeRegistry) {

		dynamicIncludeRegistry.register(
			"com.liferay.frontend.editor.ckeditor.web#ckeditor#onEditorCreate");
	}

	@Activate
	protected void activate(BundleContext bundleContext) {
		_bundleContext = bundleContext;
	}

	private BundleContext _bundleContext;

}

Example JavaScript:

// ckEditor variable is already available in the execution context
ckEditor.on(
    'paste',
    function(event) {
        event.stop();

        alert('Please, do not paste code here!');
    }
);

Now you know how to use the WYSIWYG editor dynamic includes.

Adding New Behavior to an Editor

Bottom JSP Dynamic Includes

Top Head JSP Dynamic Includes

Top JS Dynamic Include

« Dynamic IncludesTop Head JSP Dynamic Includes »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています