All geek questions in one place

CKEditor loading in Colorbox does not work [Google Chrome]

I am using Colorbox in my project. I have included CKEditor in colorbox. It works fine in all browsers, but a small problem in Google Chrome - the Editor will open correctly the first time it is clicked. After closing the pop-up window and try the editor a second time, without loading the page, I cannot type text in the editor, the Editor will be turned on when you click on the source. I do not use the original toolbar in the main editor.

I spent more than 5 days finding a solution to this problem and trying the help of others. There is no result yet. Waiting for better feedback ...

Thanks for the help in advance.

I installed test code for this ... index1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script> <script src="colorbox/jquery.colorbox-min.js"></script> <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> <script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script> <script src="../ckeditor/_samples/sample.js" type="text/javascript"></script> <link rel="stylesheet" href="colorbox.css" /> <link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('a.gallery').colorbox({ opacity:0.5 }); }); </script> <style type="text/css"> </style> </head> <body> <a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a> </body> </html>

index2.html

 <textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea> <script type="text/javascript"> $(document).ready( function() { // I use jquery var instance = CKEDITOR.instances['ckeditor_replace']; if(instance) { CKEDITOR.remove(instance); } //CKEDITOR.config.startupFocus = true; //CKEDITOR.config.startupShowBorders = false; //CKEDITOR.config.startupOutlineBlocks = true; //CKEDITOR.config.startupMode = 'source'; $( '.ckeditor_replace' ).val('12345'); $( '.ckeditor_replace' ).ckeditor(function() { } ); }); </script>

Relationship Nishad Aliyar

+1
source share
1 answer

I got a solution for the same, just include the jquery and jquery adapter in index2.html. Please see below ...

index1.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script> <script src="colorbox/jquery.colorbox-min.js"></script> <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> <script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script> <script src="../ckeditor/_samples/sample.js" type="text/javascript"></script> <link rel="stylesheet" href="colorbox.css" /> <link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('a.gallery').colorbox({ opacity:0.5 }); }); </script> <style type="text/css"> </style> </head> <body> <a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a> </body> </html>

index2.html

 <script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script> <textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea> <script type="text/javascript"> $(document).ready( function() { // I use jquery var instance = CKEDITOR.instances['ckeditor_replace']; if(instance) { CKEDITOR.remove(instance); } //CKEDITOR.config.startupFocus = true; //CKEDITOR.config.startupShowBorders = false; //CKEDITOR.config.startupOutlineBlocks = true; //CKEDITOR.config.startupMode = 'source'; $( '.ckeditor_replace' ).val('12345'); $( '.ckeditor_replace' ).ckeditor(function() { } ); }); </script>

Hello

Nishad Aliyar

0
source

Source: https://habr.com/ru/post/1387693/

More articles:


All Articles