CKEditor getEditor() 错误，如何解决？

Question

<textarea cols="50" id="txt" contenteditable="true" name="editor1" runat="server" rows="10"></textarea>
<script type="text/javascript" src="css-js/ckeditor.js"></script>
<script type="text/javascript">
  CKEDITOR.replace('txt', {                    
  });       
</script>

I get this err on js :

TypeError: Cannot call method 'getEditor' of undefined

Answer 1

First of all, contenteditable="true" tag is totally invalid and obsolete in your case. Such attribute is relevant for inline instances only and, as <textarea> is not (content)editable, you don't need it .

Anyway, (even if buggy) your code works for me like a charm ( fiddle ). As a word of explanation, the error you see is produced when there's no element of an id passed to CKEDITOR.replace() , ie:

<textarea id="foo"></textarea>
<script type="text/javascript">
     CKEDITOR.replace( 'bar' ); // <textarea> is #foo, error will be thrown
</script>

Make sure your DOM is valid and <textarea> exist when CKEDITOR.replace is called (working async?).

Answer 2

Use

CKEDITOR.appendTo( 'txt' ); for DOM elements

CKEDITOR.replace( 'textarea' ); for textarea

Ok dude try this also

the functions appendTo and replace are all located in themedui.js file

try adding it separately,here is the link

http://docs.ckeditor.com/source/ckeditor.html#CKEDITOR

Answer 3

if you just want to get rid of that, use

try{CKEDITOR.replace('body')}catch{}

it will cause CKEDITOR to open where you want it to

Answer 4

I had a similar problem and sorted it by doing the following;

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
    if($("textarea").length > 0){
        CKEDITOR.replace( 'ckeditor' );
    }
</script>

Answer 5

The problem may be in included:

<script src="{{ asset('js/app.js') }}" defer></script>

Try to remove it. This can solve your problem

Answer 6

This is the correct way to do it (I found this method by inspecting django admin )

var textAreaEl = document.getElementById("id_html_txt")
var textAreadData = textAreaEl.dataset.config

var textEditor = CKEDITOR.replace(textAreaEl, textAreadData);
textEditor.insertHtml(textAreaEl)

• Above configuration is for modal form but will work for normal form as well

Answer 7

for vanilla js

<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script>
   if(document.getElementsByTagName('textarea').length > 0){
      CKEDITOR.replace( 'article-ckeditor' ); 
   }
</script>