Embedding CKEditor into uStore using HTML Generic

[Igor]

After some numerous questions I decided to post  some info on how to use HTML Generic using some real example.

First prior using more complex examples we need first to understand basic on how HTML Generic can be used using a simple example :

Default Value : 123

Object ID:

Callback Function: PassValue

Markup:

#DIAL_DISPLAY_NAME# <input type="text" id="somename"value="#DIAL_VALUE#"  onchange="getMyVal()" ><br> 

<script type="text/javascript">

function getMyVal(){

var myval = $("#somename").val(); 

PassValue(myval);

}

</script>

Above example will put a text box on the customization page and on any change  getMyVal() function will be called  , this faction will pass value   to uStore using callback function PassValue that we used as part of  Callback Function settings

Two built in parameter were used :

1) #DIAL_DISPLAY_NAME#  , optional and just passing control display name 

2) #DIAL_VALUE# , optional but essential to pass initial value (if any) , but also used once customer comes back lets say edit it again if he moved to another step of finalize one , basically your initial value becomes customer edited value

Assuming we understand a simple example lets use something more advanced and embed CKEditor into uStore .

1)  we need deploy CKEditor to uStore , http://ckeditor.com/download

unzip and place ckeditor under ..\XMPie\uStore\App\CustomerApp\ that resulted C:\XMPie\uStore\App\CustomerApp\ckeditor

4) We need to add reference to CKEditor javascript , we can use uStore 8 feature that allows us to add such references or uStore Master pages of the skin  , we need to add <script type="text/javascript" src="/uStore/ckeditor/ckeditor.js"></script>

3 ) we need to find how we can get CKEditor value via Javascript and we need it on change event

if you will search you will find that CK Editor has no such event but somebody wrote plug-in : http://alfonsoml.blogspot.com.es/2012/05/recipe-live-preview-of-ckeditor.html download plug-in from this article and  placed here : C:\XMPie\uStore\App\CustomerApp\ckeditor\plugins that resulted C:\XMPie\uStore\App\CustomerApp\ckeditor\plugins\onchange

4) We will have to modify example in the article and instead of updating some div inner HTML we will pass this value to uStore similar as we did in simple example

modified code :

CKEDITOR.on('instanceCreated', function (e) {      PassValue(e.editor.getData());     e.editor.on('change', function (ev) {         PassValue(ev.editor.getData());     }); });

var config = { extraPlugins: 'onchange'};

CKEDITOR.replace('contents1', config); 

Lets put all this as part of the uStore setup:

Default Value : &lt;p&gt;Initial value.&lt;/p&gt;

Object ID:

Callback Function: PassValue

Markup:

#DIAL_DISPLAY_NAME#  <textarea id="contents1" name="contents1">#DIAL_VALUE#</textarea></p>

 <script type='text/javascript'>  

CKEDITOR.on('instanceCreated', function (e) {      PassValue(e.editor.getData());     e.editor.on('change', function (ev) {         PassValue(ev.editor.getData());     }); });

 var config = { extraPlugins: 'onchange'};

 CKEDITOR.replace('contents1', config); 

</script>

[Doug Reigelsperger]

Igor,

This is awesome, one question on  "4) We will have to modify..."...should I just add this code or change the existing code?

[Doug Reigelsperger]

Ok I have figured it out and it works really good however it returns the format as HTML and place that into my template..

Such as what is on the attached image

On Tuesday, June 24, 2014 4:09:46 PM UTC-4, Igor wrote:

[Igor]

that is correct , CK Editor produce HTML and it can be handy with uStore email products,  but you can teach CK Editor to produce different output lets say inDesign Tagged Text  or XNIP or RTF , or DOC . You will have to research on that one. 

http://docs.ckeditor.com/#!/guide/dev_output_format

Igor.