CKEditor in Dolphin

Hi there,

I have been putting up a Dolphin 6.1.6 powered website and its up and running without the ads (though I have no members but me to test it).

First thing I noticed is that it is using TinyMCE for the WYSIWYG editor.  Well I have been working with Joomla since before it was called Joomla and it has always used Tiny so I hate TinyMCE with a passion because its never worked right.  However FCKEditor has always worked fairly well.  The developers of FCKEditor have recently released a new version of their editor which seems to now be called CKEditor.  It is very quick!

I have managed to get CKEditor working inside Dolphin 6.1.6 and so far its working well in my testings, though I haven't tested it very far.

It also doesn't have a file manager, however they have also developed a separate plugin for this I believe but I haven't played with it yet.

You may wish to take your site offline while you do this depending on how much traffic it gets, they might see error pages while you are replacing the files.

Here is how I get CKEditor to work.

Note: you must edit the core Dolphin files to do this.

Unfortunately Dolphin doesn't appear to have their editor separated from the core yet so we can't just plug in another editor, we have to manually edit the core Dolphin files.  This means if you ever upgrade you will have to redo all these edits.

First of all you should back up all your files.

Next you download CKEditor from http://ckeditor.com/

Now extract that into dolphin/plugins so it is in its own directory there called ckeditor.

You should now be able to test CKEditor by visiting yoursite.com/plugins/ckeditor/_samples

However we still have to add it into our pages so that it can be used to edit the data in the forms.

To do this we must make several edits to core Dolphin files.

There are some simple things we have to copy into the existing files first.  But which files do we edit?  We have to edit any file that contains the TinyMCE editor.  I used a tool called Agent Ransack to search the contents of my Dolphin folder on my local computer for all files containing TinyMCE, I commented out this code and in some cases replaced it with CKEditors code.  It is pretty straightforward for the most part until you get to Orca.

Lets do it with an admin file first so you can see how it works without wrecking your front end.

Open up the file dolphin/admin/basic_settings.php

Around line 33 you will see something like this:

$_page['extraCodeInHead'] = <<<EOJ
<!-- tinyMCE gz -->
This is the start of the initialization of TinyMCE.  We want to stop it from loading so we are going to replace this entire block of code.

Replace this:

$_page['extraCodeInHead'] = <<<EOJ
<!-- tinyMCE gz -->
...
...
</script>
EOJ;

With this:

$_page['extraCodeInHead'] = <<<EOJ
<script type="text/javascript" src="{$site['plugins']}ckeditor/ckeditor.js"></script>
EOJ;

So all the code between the EOJ markers is replaced with a single line to load ckeditor.

There is one more thing we have to change in this file in order to make ckeditor show up.  We must add a new class value to a textarea box in order for ckeditor to recognize where it should go.

Around line 320 after the above edit there is a line which looks like this:

<textarea style="width:100%;height:300px;" name="custom_promo_code" class="custom_promo_code"><?= htmlspecialchars_adv( getParam( 'custom_promo_code' ) ) ?></textarea>
Replace that line with this:

<textarea style="width:100%;height:300px;" name="custom_promo_code" class="ckeditor custom_promo_code"><?= htmlspecialchars_adv( getParam( 'custom_promo_code' ) ) ?></textarea>
Now upload the file to your server and when you go to yoursite.com/admin/bacic_settings.php to edit your Basic Settings CKEditor should show up in the Custom HTML box and hopefully it should work, providing I did not miss anything.

Now let's take care of something else.  First lets open up the file located at dolphin/templates/base/scripts/BxBaseConfig.php.

Around line 212 you will see some code like this:

$this -> sTinyMceEditorJS = '
<!-- tinyMCE gz -->
What we want to do here is remove everything between the single quotes.  This goes down to around line 361.  Once you have it cleaned up it should look like this:

$this -> sTinyMceEditorJS = '';

As you can see the single quotes are empty now, we will replace it with CKEditor code in a bit. There are 2 more of these variables to clean up below this one.  You must do the same thing to them and remove all code between the single quotes.  When you are all done the 3 lines should look like this:

$this -> sTinyMceEditorJS = '';
$this -> sTinyMceEditorCompactJS = '';
$this -> sTinyMceEditorMiniJS = '';

Now lets add in the CKEditor code so they look like this:

$this -> sTinyMceEditorJS = "<script type='text/javascript' src='{$site['plugins']}ckeditor/ckeditor.js'></script>";
$this -> sTinyMceEditorCompactJS = "<script type='text/javascript' src='{$site['plugins']}ckeditor/ckeditor.js'></script>";
$this -> sTinyMceEditorMiniJS = "<script type='text/javascript' src='{$site['plugins']}ckeditor/ckeditor.js'></script>";

Now we have replaced a few of the main functions to call the editor with CKEditor but in order for it to know where to load we have to add a class value for it in some various textarea form elements scattered throughout Dolphin.

One such file is located at dolphin/compose.php.  Open this file up and edit it.  Lets go to line 223 or you can search for textarea and it should bring you to the line.

Add in a new class value so it looks like this:

<textarea class="ckeditor blogText" id="blogText" name="text"></textarea>

Now lets do some more files.  dolphin/inc/classes has a few files we have to edit.  Lets take a look at them.

BxDolArticles.php

Line 491.  Replace:

<textarea name="article" id="articleBody" class="classfiedsTextArea articl">{$aArticle['Text']}</textarea>

With:

<textarea name="article" id="articleBody" class="ckeditor classfiedsTextArea articl">{$aArticle['Text']}</textarea>

BxDolBlogs.php

Line 1495.  Replace:

<textarea name="blogText" rows="20" cols="60" class="classfiedsTextArea" style="width:800px;height:500px;" id="desc">{$sPostText}</textarea>

With:

<textarea name="blogText" rows="20" cols="60" class="ckeditor classfiedsTextArea" style="width:800px;height:500px;" id="desc">{$sPostText}</textarea>

BxDolClassifieds.php

Line 457.  Replace:

<textarea name="message" rows="20" cols="60" class="classfiedsTextArea" style="width:700px;height:400px;">{$sMessage}</textarea>

With:

<textarea name="message" rows="20" cols="60" class="ckeditor classfiedsTextArea" style="width:700px;height:400px;">{$sMessage}</textarea>

BxDolEvents.php

Line 1990.  Replace:

<textarea class="classfiedsTextArea" name="event_desc" id="event_desc_id" style="width:700px;height:400px;">{$sEventDesc}</textarea>

With:

<textarea class="ckeditor classfiedsTextArea" name="event_desc" id="event_desc_id" style="width:700px;height:400px;">{$sEventDesc}</textarea>

BxDolGroups.php

Line 1393.  Replace:

<textarea name="{$aField['Name']}" class="group_edit_html">{$sValue}</textarea>

With:

<textarea name="{$aField['Name']}" class="ckeditor group_edit_html">{$sValue}</textarea>

BxDolPageViewAdmin.php

Line 258-288.  Replace:

<!-- tinyMCE gz -->
<script type="text/javascript" src="{$site['plugins']}tiny_mce/tiny_mce_gzip.js"></script>
...
...
});
</script>

With:

<script type="text/javascript" src="{$site['plugins']}ckeditor/ckeditor.js"></script>

Line 498 (after the above edit).  Replace:

<textarea class="form_input_html" id="form_input_html" name="Content"><?= htmlspecialchars_adv( $aItem['Content'] ) ?></textarea>
With:

<textarea class="ckeditor form_input_html" id="form_input_html" name="Content"><?= htmlspecialchars_adv( $aItem['Content'] ) ?></textarea>

I think there are still a few admin files that have to be edited but I think you get the idea.  Eventually I will compile all the edited files into a zip which can just be used to upload and replace all core files with the edited versions.  I will try to post the rest of them when I have some more time.  If you find any boxes that aren't replaced please let me know which ones so I can figure out how to replace them.  I am still trying to figure out how to do the Orca editor.  If anyone has it figured out please let me know!

Now lets see how much of a mess TinyMCE makes of this post...

To be continued...

Ryan

great ryan!!
hmmm..yes, Orca editor has a completely different complex.

running somewhere with the CKEditor...think no 0_o
Who programmed that, the Orca? He sure know how to replace the.

For send messages have u with the CKEditor or are still under construction?

I try to us with the and i tell you whether it is running properly.

It reallllllly works!!!!  I tested and have not found ONE problem!! it's so much better than tinymce!  Thanks man.  you saved my day!!!  

Okay, you've done a pretty good job on this.  However, now it's time to up the ante and take this iinto the world of customized sites.  So, looking at your code and looking at what  I have here, how would you edit the following to fit your editor?

<tr class='vc'>
  <td class='form_label'>{$sShortDescriptionC}:{$sMandatoryC}</td>
  <td class='form_value' nowrap><div style='float:left'><textarea name='shortdescription' class='classfiedsTextArea articl' style='height:300px'>{$sShortDescription}</textarea></div><div style='float:left'><span id='shortdescription_warn'><span></div></td>
 </tr>
 
 <tr class='vc'>
  <td class='form_label'>{$sDescriptionC}:{$sMandatoryC}</td>
  <td class='form_value' nowrap><div style='float:left'><textarea name='description' class='classfiedsTextArea articl'  style='height:300px'>{$sDescription}</textarea></div><div style='float:left'><span id='description_warn'><span></div></td>
 </tr>

And then we have this section:

el = document.getElementById("articleBody");
 if( el.value.length < 3 ) {
  if (typeof tinyMCE != 'undefined') {//here Tiny
   if( tinyMCE.selectedElement.innerHTML.length < 3 ) {
    el.style.backgroundColor = "pink";
    hasErr = true;
    fild += " Article text";
   } else {
    el.style.backgroundColor = "#fff";
   }
  }
 } else {
  el.style.backgroundColor = "#fff";
 }

I have to admit, this looks a lot better aesthetically than the TinyMCE looks.  Of course, I have to put it through the paces to see how well it'll stand up overall.  Also, curious if this little toys overcomes the issues TinyMCE has had lately in regards to it's dealing with the double spaces when hitting the "Enter" Key and jumping down 4 lines. 

Hi, for some reason this site doesn't email me.  Maybe because I use greylisting on my server to prevent spam so it doesn't try to send mail to me more than once or something.

Anyway, I came to check on this post to see if anyone tried it so I am glad they have and glad it is working!  This has to be good!

As for your code mydatery, just add ckeditor class to the textarea tags.

So it looks like this:

<tr class='vc'>
<td class='form_label'>{$sShortDescriptionC}:{$sMandatoryC}</td>
<td class='form_value' nowrap><div style='float:left'><textarea name='shortdescription' class='ckeditor classfiedsTextArea articl' style='height:300px'>{$sShortDescription}</textarea></div><div style='float:left'><span id='shortdescription_warn'><span></div></td>
</tr>

<tr class='vc'>
<td class='form_label'>{$sDescriptionC}:{$sMandatoryC}</td>
<td class='form_value' nowrap><div style='float:left'><textarea name='description' class='ckeditor classfiedsTextArea articl'  style='height:300px'>{$sDescription}</textarea></div><div style='float:left'><span id='description_warn'><span></div></td>
</tr>

You should try removing or commenting out that second block of code you posted, it looks like its maybe trying to put TinyMCE on the page.

Ryan

Ryan, drop me a message with an e-mail addy for you.  I'd like to show you some additional information on this, you have a good mod overall and I'd like to get with you on it.

As far as commenting out that seciton of code, that is from a completely different file, actually deal with Articles and several upgrades that have been done with them.  So if you can drop me an e-mail we can look at these and figure them out across the board to deal with upgraded sites also.  A I said, you have a great item going, we just need to finish covering all the bases on it.  The look is much cleaner than the tinymce and so far from what I've seen it appears to have all the functionality of TinyMCE that I normally use.

Does this upload images from the members computer?

So, if i understand correctly, then a location will need to created to upload the file?

I'll try this a bit later and see if it works for me...looking at the demo, it does look so much better than Tinymce.

Carol

Ryan,

Thank you so much, this worked and looks so much better than Tiny...

Have you been able to integrate CKFinder or the uploader?  I can't figure it out, but was wondering if you have.

Thanks again!

Carol

Nice! It even has multilingual support! (tempted to suggest a ticket for 7.1...) Michel?

I thought everything was working fine!  But I can't now get video to embed via the flash button.  *sigh*

If anyone has any idea where, or what file/script I can go look at for this, I would greatly appreciate it.

Carol

And in this case?

tinyMCE.execCommand('mceRemoveControl', false, 'form_input_html');

How to make Ckeditor with HTML Block in PageBuilder?

Thank

I did go take a look, and i did lose the TinyMCE for HTML blocks on Page builder...interesting, yet not quite sure where it made that change.

*SIGH*

Carol

I need it very much CKEDITOR in PageBuilder HTML Block. Can someone help me? I tried it to link together as in examples on top but it works not. Has anyone an idee? Or advise?

I can't get it to work.  I looked at adminMenuCompose.php and around line 283 I have :

<textarea name="Desc" class="ckeditor form_input_area"><?= htmlspecialchars_adv( $aItem['Desc'] ) ?></textarea>

and it seems to still follow the examples...so I don't know...I give up.

I also looked at the following info

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/File_Browser_%28Uploader%29

to get the browser to work, but it still doesn't work for me...so i give up on that one too...i just don't know enough to make the right changes in the config file.

Hopefully someone else has better luck than I do figuring this out...

Carol

Thanks Carol for your efforts.. I give up too. I did it same way...

Going to go back to TinyMCE, just wanted to see if anyone responds right before I do.

Love,

Carol