How to bind CKeditor value with MVVM

asked 2012-04-19 23:25:00 +0800

updated 2012-04-19 23:25:41 +0800

Hello everyone,

I'm trying to make ckeditor work with the new ZK6 and the MVVM pattern. Basically I have a listbox and a ckeditor component. I would like that when an object is selected from the listbox, the ckeditor content to change.

Here is the code, which doesn't work

<listbox id="entityList" model="@load(vm.mailTemplates)"
			selectedItem="@bind(vm.selected)" mold="paging" pageSize="5"
			hflex="true">
			<listhead sizable="true">
				<listheader label="Name" sort="auto" ></listheader>
				<listheader label="Subject" sort="auto" ></listheader>
				<listheader label="Content" ></listheader>
			</listhead>
			<template name="model" var="item">
				<listitem>
					<listcell label="@load(item.name)" ></listcell>
					<listcell label="@load(item.subject)" ></listcell>
					<listcell label="@load(item.template)" ></listcell>
				</listitem>
			</template>
		</listbox>
		<separator ></separator>

		<ckeditor id="htmlEditor"
			value="@{vm.selected.template,access='both',save-when='self.onChange'}"
			customConfigurationsPath="/secure/settings/ckeditor_config.js"
			width="600px" height="300px">
		</ckeditor>

what I would like to do is this:

value="@load(vm.selected.template)"

but this doesn't work neither.

How can load the value of a ckeditor component with the new binding of ZK6?

Thanks in advance,
Luca

delete flag offensive retag edit

5 Replies

Sort by » oldest newest

answered 2012-05-24 09:15:08 +0800

PriyaKataria
3

Same issue with me, binding not working

link publish delete flag offensive edit

answered 2012-05-25 06:23:12 +0800

lucamerolla
66

I have found a workaround, now it works but at the first load of the page, the ckeditor is not shown and there is a popoup error where it ask to reload the component. Once it is reloaded, the component is shown correctly.

Here is the code of my page:

<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
	<window border="none" apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('org.test.TemplateViewModel')"
		validationMessages="@id('vmsgs')">
		<listbox id="entityList" model="@load(vm.mailTemplates)"
			selectedItem="@bind(vm.selected)" mold="paging" pageSize="5"
			hflex="true">
			<listhead sizable="true">
				<listheader label="Name" sort="auto" />
				<listheader label="Subject" sort="auto" />
			</listhead>
			<template name="model" var="item">
				<listitem>
					<listcell label="@load(item.name)" />
					<listcell label="@load(item.subject)" />
				</listitem>
			</template>
		</listbox>
		<separator />
		<n:form>
			<ckeditor id="htmlEditor"
				visible="@load(not empty vm.selected)"
				value="@bind(vm.selected.template) @save(vm.selected.template, before='saveTemplate')"
				onSave="@command('saveTemplate')"
				customConfigurationsPath="/secure/settings/ckeditor_config.js"
				width="100%" height="300px">
			</ckeditor>
		</n:form>
	</window>
</zk>

hope it helps

link publish delete flag offensive edit

answered 2012-08-08 21:13:13 +0800

stream
81 ● 3

setTemplate is not invoked. Everything works fine If I bind template object by using textbox instead of ckeditor. Bug? ZK 6.0.2

link publish delete flag offensive edit

answered 2012-09-11 16:22:53 +0800

lucamerolla
66

I have upgraded to ZK 6.0.2 and my CKEZ page stopped working... If I downgrade back to ZK 6.0.1 it works with the previous workaround that I was using.

Let's hope that with the next ZK6.5 all the problems with CKEZ and MVVM would be solved...