CKEditor 3.6.1: Load editor on event - ckeditor

I create a page with multiple tabs.
On one of my tabs I want to use CKeditor on a textarea, so when I display my table I call:
editor = CKEDITOR.replace('MyTextArea', MyOptions );
I have the UI of the editor but when I click on the text area nothing append, I can't edit it. The solution for access to the text area is to use "tab" for accessing this field.
I try to put a default value and I can edit if I click on the text but if I click elsewhere in the area I cannot edit.
I have this problem for IE10 and I need it works on it. It's working on Chrome and Firefox. I use CKEditor 3.6.1 and I cannot upgrade it.
Thanks

The problem was the z-index of the container of my textarea, I change it and it works.

Related

CKEditor - dropdowns not appended to editors

I have a weird problem with CKEditor. When I click on the styles menu, the dropdown appears, but it's not added to the editor's element, but just on the body of the document.
Thus, when I scroll the page, the dropdown stays where it's at an the editor scrolls.
Kinda hard to explain, I hope the attached screenshot helps to understand.
Anybody having an idea what could cause this?
P.S. - it's the CKEditor that comes with Typo3 and I have multiple instances of ckeditor on my page.

How to display CKEditor generate code properly?

When I edit the content in CKeditor, it looks well. but when I display the data on html page. the layout are reset by other css file. How to avoid this? Is it possible to disable show the content in CKeditor without toolbar?
The content.css solve my problem. Add the style to content.css .
ck editor is highly customizable. Go to your CKEditor Directory ckeditor\samples\index.html
Open this file
Click on ToolBar Configurator Button on top right Corner.
Switch to advanced mode. At top right corner there is a switch, toggle it to advanced mode.
Then build your toolbar.
Now click on 'Get ToolBar Config' Button.
Select and Copy the Configuration and Paste it into foll file:
ckeditor/config.js
For CSS issue: Try loading and calling the replace function at end of your html Page.

Text showing in one line with scroll

When I insert text into ckeditor its showing good and added into database but in edit form it showing all text into one line with scroll.
Note : I notice that this issue is only with Firefox browser
in add form it showing like this
in edit form it showing like this
Working now, I don’t know what was the issue may be some css applied on the editor. so I just download the new ckeditor and applied in my app and its working absolutely fine :)

Ckeditor Inline Editing - hyperlinks don't work

Hyperlinks don't work when applying inline editing to a div tag.
You can even try it on this online DEMO.
Insert Hyperlink
Disable inline edit dialog by clicking somewhere on the page
Try to click on created hyperlink. Hyperlink hand cursor doesn't appear as you normal would expect when pressing link in a webpage.
Destroying CKeditor instance will also not resolve this problem.
Is this normal behavior ?
This is the normal behavior, you're in an editing mode.
Inline editing was made for a back-end use, you're not suppose to click on those hyperlinks like a front-end user. You just have to display the generated HTML in a front-end div (without CKEditor, of course) to get your hyperlinks work.
To open the link in inline editing mode, just CTRL + click, like in MS Word, but not with IE.

ckeditor image plugin customization

I want to customize the ckeditor image plugin. I already added two radio boxes under URL text field, one is the normal mode while for the second one I have shown a page in iframe in the preview area. In the page we have list of image links. Now I have difficulty to click on any link and send that link to the URL text field. Actually I want to access the URL field in the page shown in the iframe.
Please help me for it, or suggest me a better solution to tackle this situation.
I found the way to do the above job.
First I changed the radio boxes into brows button. On the button click event a light box opens. When clicking in a link in the light box the link value will be saved to java script COOKIE variable and on the light box close event the value from the COOKIE is retrieved and assigned to the text field with the following code.
srcVal = getCookie('srcVal'); dialog.setValueOf('info','src',srcVal);

Resources