Editing in real time, yet no instance to be found

Question

Editing in real time, yet no instance to be found

I have developed my own custom non-jQuery ajax solution for building web applications. Recently, I encountered compatibility issues with IE9 while using TinyMCE, so I am considering switching to CKeditor.

The editable content is contained within a div structured like this:

<div id='content'>
  <div id='editable' contenteditable='true'>
    This is a page of dynamically loaded inline text triggered by clicking links throughout the site.
  </div> 
</div>

However, when I attempt to retrieve data from the editable content using the methods provided in the CKeditor documentation, I encounter an error.

I use this code:

CKEDITOR.instances.editable.getData();

This results in the following error:

Uncaught TypeError: Cannot call method 'getData' of undefined

It seems like the editor is not properly recognized in the DOM. I have tried iterating through all editors to find the editor name, but no name is found.

I have attempted the following:

for(var i in CKEDITOR.instances) { 
  alert(CKEDITOR.instances[i].name);
}

However, the alert returns blank, indicating that no name is associated with it.

Despite my efforts, I have been unsuccessful in getting the editable text to display a menu above it as shown in the Massive Inline Editing Example

Any help or guidance would be greatly appreciated.

Jason Silver

UPDATE:

Although I am admitting my lack of knowledge here, I had not encountered "contenteditable='true'" before. I assumed that since I could input text inline, the editor had been initialized somehow. Now, I am questioning whether the editor is actually applied to my div.

UPDATE 2:

Upon further investigation, I discovered that the div is not present when the script is initially executed. The editable div is injected into the DOM using AJAX. This raised the question of whether there is another command that needs to be executed to apply the editor to that div. To test this theory, I added a button to the page with an onclick event:

var editor, html = ''; config = {}; editor = CKEDITOR.appendTo('editable', config, html );

Unfortunately, this resulted in an error in Chrome:

Uncaught TypeError: Cannot call method 'equals' of undefined 
+ CKEDITOR.tools.extend.getEditor ckeditor.js:101
   b ckeditor.js:252
   CKEDITOR.appendTo ckeditor.js:257
   onclick www.pediatricjunction.com:410

Am I on the right track? Is there a different method to instruct CKEditor to apply the editor to a div programmatically?

UPDATE 3:

Thanks to a suggestion from @Reinmar, I decided to test a theory. To check if this would solve the issue, I added a button above the content editable div calling CKEDITOR.inlineAll() and inline('editable') respectively:

<input type='button' onclick=\"CKEDITOR.inlineAll();\" value='InlineAll'/>
<input type='button' onclick=\"CKEDITOR.inline('editable');\" value='Inline'/>
<input type='button' onclick=\"var editor = CKEDITOR.inline( document.getElementById( 'editable' ) );\" value='getElementById'/>

Unfortunately, Chrome returned the same error for all three buttons:

Uncaught TypeError: Cannot call method 'equals' of undefined ckeditor.js:101
+  CKEDITOR.tools.extend.getEditor ckeditor.js:101
   CKEDITOR.inline ckeditor.js:249
   CKEDITOR.inlineAll ckeditor.js:250
   onclick

UPDATE 4:

Upon further investigation, I have identified that the issue is related to json2007.js, a script I use in combination with Real Simple History (RSH.js). These scripts are designed to manage ajax history to prevent the loss of AJAX page views as users navigate through the browser's history.

Here is a demo page: http://jsfiddle.net/jasonsilver/3CqPv/2/

javascript ajax ckeditor

Answer 1

Answer №1

If you're looking to activate an inline editor, there are two methods to consider:

If the editable element (with the contenteditable attribute) already exists when the page loads, CKEditor will automatically set up an instance for it. The editor will be named after the element's id, or it will default to editor<number>. You can view examples of automatically initialized editors on this sample page.
If the element is created dynamically, you will need to initialize the editor manually. For instance, after adding
```
<div id="editor" contenteditable="true">X</div>
```
to the document, you should call:

CKEDITOR.inline( 'editor' )

or

CKEDITOR.inlineAll()

Refer to the documentation for more details and examples of editors initialized in this manner on another sample page.

The appendTo method serves a different purpose. It allows you to initialize a themed (non-inline) editor inside a specified element. This method also accepts editor data as a third argument, unlike other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) which retrieve data from the element being replaced or used.

Update

I have identified that the libraries used alongside CKEditor are causing the errors mentioned. Deleting json2007.js and rsh.js resolved the issues and CKEditor functioned properly.

Answer 2

If you're looking to activate an inline editor, there are two methods to consider:

If the editable element (with the contenteditable attribute) already exists when the page loads, CKEditor will automatically set up an instance for it. The editor will be named after the element's id, or it will default to editor<number>. You can view examples of automatically initialized editors on this sample page.
If the element is created dynamically, you will need to initialize the editor manually. For instance, after adding
```
<div id="editor" contenteditable="true">X</div>
```
to the document, you should call:

CKEDITOR.inline( 'editor' )

or

CKEDITOR.inlineAll()

Refer to the documentation for more details and examples of editors initialized in this manner on another sample page.

The appendTo method serves a different purpose. It allows you to initialize a themed (non-inline) editor inside a specified element. This method also accepts editor data as a third argument, unlike other methods (CKEDITOR.inline, CKEDITOR.replace, CKEDITOR.inlineAll) which retrieve data from the element being replaced or used.

Update

I have identified that the libraries used alongside CKEditor are causing the errors mentioned. Deleting json2007.js and rsh.js resolved the issues and CKEditor functioned properly.

Answer 3

Answer №2

After thorough investigation, I was able to pinpoint the source of the issue.

The library I had incorporated for tracking Ajax history and managing commands for the back button, known as Real Simple History, was relying on a script called json2007. This script proved to be problematic as it intrusively modified native prototypes, causing disruptions in functionality.

Since RSH.js was outdated and I wasn't utilizing it to its full capacity, I opted to rewrite the essential code required for my needs. Specifically, I created a listener that monitored changes in anchor (hash) tags within the URL, parsed those changes, and then resubmitted the corresponding ajax command.

var current_hash = window.location.hash;
function check_hash() {
    if ( window.location.hash != current_hash ) {
        current_hash = window.location.hash;
        refreshAjax();
    }
}
hashCheck = setInterval( "check_hash()", 50 );

Fortunately, the function 'refreshAjax()' was already in place, making this new approach more streamlined compared to the reliance on Real Simple History.

By removing the json2007.js script, all other components started functioning seamlessly again, and the visual editor, CKEditor, worked flawlessly.

I want to express my gratitude to @Reinmar for your assistance and understanding throughout this process.

Answer 4

After thorough investigation, I was able to pinpoint the source of the issue.

The library I had incorporated for tracking Ajax history and managing commands for the back button, known as Real Simple History, was relying on a script called json2007. This script proved to be problematic as it intrusively modified native prototypes, causing disruptions in functionality.

Since RSH.js was outdated and I wasn't utilizing it to its full capacity, I opted to rewrite the essential code required for my needs. Specifically, I created a listener that monitored changes in anchor (hash) tags within the URL, parsed those changes, and then resubmitted the corresponding ajax command.

var current_hash = window.location.hash;
function check_hash() {
    if ( window.location.hash != current_hash ) {
        current_hash = window.location.hash;
        refreshAjax();
    }
}
hashCheck = setInterval( "check_hash()", 50 );

Fortunately, the function 'refreshAjax()' was already in place, making this new approach more streamlined compared to the reliance on Real Simple History.

By removing the json2007.js script, all other components started functioning seamlessly again, and the visual editor, CKEditor, worked flawlessly.

I want to express my gratitude to @Reinmar for your assistance and understanding throughout this process.

Editing in real time, yet no instance to be found

Answer №1

Answer №2

Similar questions

XMLHttp request experiencing mixed content issues

Is there a way to retrieve the final elements from a deeply nested array?

Retrieval is effective in specific situations but ineffective in others

Encountering a 404 error when attempting to access static files within a directory using Express Js

Using jQuery Validation and AJAX to update a table row

Calendar Complete If a month has no scheduled events, the calendar will seamlessly move on to the next month

Seeking assistance with setting up BxSlider installation

Enhance design based on scrolling function in React

Exploring the method to retrieve data on the server side through Express when it is shared by the client within a put request

The index "is_ajax" has not been defined

Visit a webpage on my site

"Upon triggering an event in AngularJS, the data attribute transitions to a state of truth

What can be done to resolve the error message "This language feature is only supported for ECMASCRIPT6 mode" in Google Tag Manager?

Leverage Jasmine for testing a jQuery plugin

Create a POST request to the server using Express.js

Sending an Array retrieved from a Facebook Graph API response via AJAX to a PHP script

Issues arise when attempting to enforce type-safety in TypeScript while using the JSON.parse

What are the benefits of using `observer` over `inject` when passing data to a React component in MobX?

Avoiding remote submission in Grails forms: Best practices

Javascript/AJAX functions properly on the homepage, but encounters issues on other pages