All geek questions in one place

CKEditor does not edit when opened a second time when popping up in chrome

When I open CKEditor in a popup (colorbox or fancybox), it works fine for the first time.

When the popup closes and opens a second time, the content area is not clickable / editable and does not display the content.

But the content shows when I click the "Source" button, and then it can be seen in view mode. This is good in IE and Firefox, but the problem is with CHROME.

I followed what was said in Downloading CKEditor in Colorbox does not work [Google Chrome] , but still I have this problem.

Below is an example of the code that I have in my application:

<html> <head> <title>CKEditor Sample</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://ckeditor.com/apps/ckeditor/3.6.2/ckeditor.js?1324772165"></script> <link href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script> <script type="text/javascript"> $(function() { if (CKEDITOR.instances['taCKEditor']) { delete CKEDITOR.instances['taCKEditor']; } CKEDITOR.config.height = '500px'; CKEDITOR.config.width = '500px'; CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P; CKEDITOR.config.startupFocus = true; CKEDITOR.config.baseFloatZIndex = 9000; CKEDITOR.replace('taCKEditor', { uiColor: '#fdd1ad', toolbar: [ ['Source', '-', 'NewPage', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', '-', 'Print', 'SpellChecker'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], '/', ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'] ] }); $("#various1").fancybox({ 'titlePosition': 'inside', 'transitionIn': 'none', 'transitionOut': 'none' }); }); </script> </head> <body> <a id="various1" href="#inline1" ">Open CKEditor</a> <div id="inline1"> <textarea id="taCKEditor" name="taCKEditor" rows="2" cols="5">This is the sample text inside CKEditor</textarea> </div> </body> </html>
+4
source share
2 answers

You need to create a form and insert an internal textarea form. Assign fancybox to form an id. In javascript, click the trigger for the form. In the callback, fancybox beforeLoad uses the CKEditor bootloader, which checks if the instance exists, and if not, it will delete it. In beforeLoad, load the contents of ckeditor from the html block.

0
source

I think I ran into the same problem before. Have you tried CKEDITOR.replace() . For instance:

 CKEDITOR.replace('taCKEditor');

Then do CKEDITOR.instance .

Or do not you think that delete is causing the problem. Anyway, I just guess.

0
source

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

More articles:


All Articles