SmartGWT 4和CKEditor的整合

if (cancel && !$(target).hasClass("cke_dialog"))	return false;

简单的记几个关键点:


1.GWT和CKEditor整合组件。


忘记在google哪个文章找到的了,现在只剩个git地址。作者似乎是去年9月做的最后更新,看上去好像比gwt-ckeditor 1.1(2011年的)还要新一点。给个git地址:

https://github.com/cirovladimir/gwt-ckeditor

要看的话自己去checkout代码


2.CKEditor和SmartGWT 4整合要解决几个问题。

a)  如果想很好的利用SmartGWT DynamicForm的特性,需要封装自己的FormItem组件调用CKEditor。SmartGWT的Form画布组件提供了这个支持。因此需要:

public class GWTCKEditor extends CanvasItem

然后创建时把CKEditor这个Widget塞到画布里去,然后再调用CanvasItem的setCanvas


        editor = new CKEditor(ckConfig);

    	VLayout canvasObj = new VLayout();
    	canvasObj.setHeight(height);
    	WidgetCanvas widgetCanvas = new WidgetCanvas(editor);
    	widgetCanvas.setHeight(height);
    	canvasObj.addMember(widgetCanvas);
        setCanvas(canvasObj);

剩下FormItem需要覆盖的接口自己去封装。。。

b) 你可能写完自己的CKEditor封装组件后发现所有的CKEditor Dialog窗体都弹不出来,八成是因为z-index顺序导致被遮盖了。只需要一行代码解决:

        ckConfig.setBaseFloatZIndex(1000000);

c)记得在你的jsp里引入ckeditor.js


3.CKEditor在SmartGWT的Windows里使用的怪现象

当CKEditor在SmartGWT的窗口里使用时,如果CKEditor里还有图片。那么可能导致窗口关闭了CKEditor的图片仍旧留在页面。是因为SmartGWT的窗口隐藏不是使用hide的原因导致。一行代码解决问题:

给SmartGWT设置HideUsingDisplayNone强制使用css的hide来隐藏窗体

window.setHideUsingDisplayNone(true)

4.再补充个Windows问题

放到windows里会发现CKEditor的所有弹出框点击不了了。是因为setIsModal把本div以外所有的event 都block住的原因:

If true, when shown this Window will intercept and block events to all other existing components on the page.


做了一个事件侦听器来处理所有消息:

<EventHandler.js>

isc.EventHandler.addClassMethods({

        handleSyntheticEvent : function(event) {

....


			clickMaskClick : function(target) {

				// copy the clickMaskRegistry, so we don't get confused if the registry is modified by
				// the click action showing additional masks(for example)
				var maskReg = this.clickMaskRegistry.duplicate(), mask = maskReg
						.last();

				while (mask != null
						&& (this.targetIsMasked(target) || target == this._screenSpan)) {
					if (this.logIsInfoEnabled("clickMask")) {
						this
								.logInfo("mouseDown on masked "
										+ target
										+ (mask.clickAction != null ? " firing clickAction, "
												: "")
										+ (mask.autoHide ? "will hide mask"
												+ (mask.mode == isc.EH.SOFT_CANCEL ? " and block click"
														: "")
												: "will block click"));
					}
					var cancel = (mask.mode != isc.EH.SOFT);
					this._clickMaskClick(mask)

					// If the mask is hard return false to cancel the event -- we're done
					if (cancel)	return false;

					// If the mask is soft (and not "softCancel"), fire clickMaskClick on the mask underneath it
					mask = maskReg[maskReg.indexOf(mask) - 1];
				}

				// if we got here we've hit an unmasked target (possibly after hiding some autoHide true CM's)
				return true;
			},

就是这里return false将消息给取消了.

找到问题就好了。直接返回true;

if (cancel)	return true;

目前项目所有模式对话都有遮罩层。因此这样写暂时没有影响。不知道有没有更优雅点的写法。先把问题解决


已整合至CKEditor 4.4,非常好用

SmartGWT 4和CKEditor的整合_第1张图片




你可能感兴趣的:(gwt,ckeditor,smartgwt)