Web Global Net Web Application & Web Development Project Center

Technical Issues => FCK/CKEditor => Topic started by: admin on April 17, 2019, 04:42: PM



Title: adding ckeditor to your form
Post by: admin on April 17, 2019, 04:42: PM
first make sure to upload the ckeditor and ckfinder to the same directory the form page is

next add this to the header area:

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

// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;

window.onload = function()
{
   // Listen to the double click event.
   if ( window.addEventListener )
      document.body.addEventListener( 'dblclick', onDoubleClick, false );
   else if ( window.attachEvent )
      document.body.attachEvent( 'ondblclick', onDoubleClick );

};

function onDoubleClick( ev )
{
   // Get the element which fired the event. This is not necessarily the
   // element to which the event has been attached.
   var element = ev.target || ev.srcElement;

   // Find out the div that holds this element.
   var name;
   do
   {
      element = element.parentNode;
   }
   while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )


   if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
      replaceDiv( element );
}

var editor;

function replaceDiv( div )
{
   if ( editor )
      editor.destroy();

   editor = CKEDITOR.replace( div );
}

   //]]>
   </script>

Next add this just after the textarea (must be a textarea field)

Change Bold to your field name

You might have to play around with the Green Bold if you have plugins or need custom tool bar

 <script type="text/javascript">
   CKEDITOR.replace( 'marketing_email_message',
   {
toolbar : 'ad',
extraPlugins : 'tableresize',
extraPlugins : 'stylesheetparser'
});
                                                      </script>
                                                                <script type="text/javascript">
   CKEDITOR.config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
   CKEDITOR.config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
   CKEDITOR.config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
   CKEDITOR.config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
CKEDITOR.config.colorButton_enableMore=true;
CKEDITOR.config.width ='98%';
CKEDITOR.config.height='450px';
/*CKEDITOR.config.skin = 'office2003';*/
/*CKEDITOR.config.skin = 'v2';*/
CKEDITOR.config.skin = 'kama';
                                                      </script>