Forum

HomeHomeCoreCoreGeneralGeneralRadeditor or CKeditor example wanted ;)Radeditor or CKeditor example wanted ;)
Previous
 
Next
New Post
4/4/2010 6:08 AM
 

Has anyone happened to get either Radeditor or CKeditor working with OWS?

They both don't seem to work with the standard texteditor tag.

New Post
4/4/2010 12:10 PM
 

I have CKEditor working well (A similar configuration can also be used for RadEditor)

First, Include the js file in the control header (Or Module header)

<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>

Then on the detail page, include the following script AFTER the textarea:

<script type="text/javascript">
CKEDITOR.replace( 'frmFieldName' );
</script>

Then just use the same name in the textarea:


<textarea name="frmFieldName">[FieldText]</textarea>

Neither CKEditor or RadEditor work using the [TEXTEDITOR] Tag (Even though they were defined as the default editor)

You can control the toolbar and appearance by defining a class in the js file and specify in the script :

e.g.

<script type="text/javascript">
CKEDITOR.replace('frmFieldName',{toolbar : 'Basic'});
</script>

-mike

New Post
4/5/2010 10:47 AM
 

Thanks Mike for your response :)

You can also use JQuery to interact (display, destroy etc..) with the editor. CKEditor seems very easy to use :)

Here is an example using "multiple editors" on one page:

<!-- MWD - ADD THE FOLLOWING CODE TO THE CONTROL HEADER (OR MODULE HEADER) -->
<!-- NOTE: LOADING THE JQUERY SCRIPT IS NOT REQUIRED IN DNN 5+ AS IT IS ALREADY LOADED BY DNN -->
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script> -->
<script type="text/javascript" src="/Providers/HtmlEditorProviders/CKEditor/ckeditor.js"></script>
<script type="text/javascript" src="/Providers/HtmlEditorProviders/CKEditor/adapters/jquery.js"></script>
<!-- ---------------------------------------------------------------------------------------------------------------------------------------------------- -->

<!-- MWD - IN YOUR ADD/EDIT FORMS USE THE FOLLOWING CODE TO DISPLAY, SUBMIT & REMOVE CKEDITOR'S IN AN AJAX ENVIRONMENT -->
<textarea name="frmDescription" id="frmDescription" class="myckeditor">[frmDescription]</textarea>
<textarea name="frmDescription2" id="frmDescription2" class="myckeditor">[frmDescription2]</textarea>

<!-- SEARCH FOR ALL TEXTAREA'S WHERE class="myckeditor" & REPLACE THE TEXTAREA WITH A CKEDITOR -->
<script type='text/javascript'>
$('textarea.myckeditor').ckeditor();
</script>

<!-- MODIFIED SUBMIT BUTTON THAT CAN BE USED TO SUBMIT CKEDITOR DATA IN AN AJAX ENVIRONMENT -->
<button type="button" onclick="for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();for ( instance in CKEDITOR.instances )CKEDITOR.remove(CKEDITOR.instances[instance]);ows.Fetch('[ModuleID,System]',-1,'Action=Save');return false;">Save</button>
<!-- ---------------------------------------------------------------------------------------------------------------------------------------------------- -->

One quick note: with the DNN CKEditor Provider version 1.9.00 or below, you will need to copy the "/CKEditor/adapters/jquery.js" from the official download package (http://ckeditor.com/download) to "/Providers/HtmlEditorProviders/CKEditor/adapters/jquery.js" as it was left out of the current release. Next version of CKEdior will include this file by default - see my post here for more info.

FYI: Here is how you call the editor with advanced options using JQuery (the editor will automatically attach itself to anything with a class="myckeditor") with some other options included (file browser, different skin etc..):

<script type='text/javascript'>
$('textarea.myckeditor').ckeditor({skin:'office2003',toolbar:'Full',language:'en',filebrowserBrowseUrl:'/Providers/HtmlEditorProviders/CKEditor/Browser/Browser.aspx?Type=Link&tabid=95&porid=0',filebrowserImageBrowseUrl:'/Providers/HtmlEditorProviders/CKEditor/Browser/Browser.aspx?Type=Image&tabid=95&porid=0',filebrowserFlashBrowseUrl:'/Providers/HtmlEditorProviders/CKEditor/Browser/Browser.aspx?Type=Flash&tabid=95&porid=0',filebrowserUploadUrl:'/Providers/HtmlEditorProviders/CKEditor/Browser/Browser.aspx?Command=FileUpload&tabid=95&porid=0',filebrowserFlashUploadUrl:'/Providers/HtmlEditorProviders/CKEditor/Browser/Browser.aspx?Command=FlashUpload&tabid=95&porid=0',filebrowserImageUploadUrl:'/Providers/HtmlEditorProviders/CKEditor/Browser/Browser.aspx?Command=ImageUpload&tabid=95&porid=0',filebrowserWindowWidth:'870',filebrowserWindowHeight:'700'});
</script>

New Post
4/5/2010 11:42 AM
 

Here is an example of CKEditor added to R2I's Sample.MyNotes example:

1. Download & install the DNN CKEditor (Install the editor using: HOST > EXTENSIONS > INSTALL EXTENSION).

2. Import the Sample.MyNotes(CKEditor Example) config into an instance of OWS.

TIP: With my prevous post I used the below highlighted code to remove all CKEditors after saving the form:

for ( instance in CKEDITOR.instances )CKEDITOR.remove(CKEDITOR.instances[instance]);ows.Fetch('[ModuleID,System]',-1,'action=save');return false;">add

I still used this code in the "ADD" form, but in the "EDIT" form I only needed to remove one instance of the CKEditor (the add form still need to be displayed as a CKEditor), so I used the below highlighted code to remove just one instance of the CKEditor:

CKEDITOR.remove(CKEDITOR.instances['frmNote[NoteID]']);ows.Fetch('[ModuleID,System]',-1,'action=save¬eid=[NoteID]','myNotes[NoteID]');return false;">save

One quick note: with the DNN CKEditor Provider version 1.9.00 or below, you will need to copy the "/CKEditor/adapters/jquery.js" from the official download package (http://ckeditor.com/download) to "/Providers/HtmlEditorProviders/CKEditor/adapters/jquery.js" as it was left out of the current release. Next version of CKEdior will include this file by default - see my post here for more info.

New Post
6/22/2010 12:15 PM
 

Does anyone have an example for the radeditor?

I haven't had a chance to dig into it, but I like it initially much more than fck.

thks

Previous
 
Next
HomeHomeCoreCoreGeneralGeneralRadeditor or CKeditor example wanted ;)Radeditor or CKeditor example wanted ;)


 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • 410.327.0007 • info@R2Integrated.com

Bookmark & Share Bookmark and Share