Generating CKEDITOR does not work on for loop statement using javascript
It is possible to create a ckeditor using for loop statement in javascript? Everytime I generate a ckeditor within textarea, the ckeditor is not show up. Any idea. Thank you.
<script type="text/javascript">
for(var index = 1; index <= 4; index++ ){
str += '<textarea class="ckeditor" name="answer"></textarea>';
}
</script>
Sample Image: 
javascript for-loop
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
add a comment |
It is possible to create a ckeditor using for loop statement in javascript? Everytime I generate a ckeditor within textarea, the ckeditor is not show up. Any idea. Thank you.
<script type="text/javascript">
for(var index = 1; index <= 4; index++ ){
str += '<textarea class="ckeditor" name="answer"></textarea>';
}
</script>
Sample Image:
javascript for-loop
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
add a comment |
It is possible to create a ckeditor using for loop statement in javascript? Everytime I generate a ckeditor within textarea, the ckeditor is not show up. Any idea. Thank you.
<script type="text/javascript">
for(var index = 1; index <= 4; index++ ){
str += '<textarea class="ckeditor" name="answer"></textarea>';
}
</script>
Sample Image:
javascript for-loop
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
It is possible to create a ckeditor using for loop statement in javascript? Everytime I generate a ckeditor within textarea, the ckeditor is not show up. Any idea. Thank you.
<script type="text/javascript">
for(var index = 1; index <= 4; index++ ){
str += '<textarea class="ckeditor" name="answer"></textarea>';
}
</script>
Sample Image:
javascript for-loop
javascript for-loop
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
asked Nov 21 '18 at 16:25
Yad YoungYad Young
808
808
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Looking at the ckeditor5 readme, it appears that you need to have the HTML textarea(s) already inserted and then call the create method for each textarea, passing its id as the parameter. I pulled this from the readme:
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method:
<script>
ClassicEditor .create(
document.querySelector( '#editor' )
) .catch( error => { console.error( error ); } );
</script>
You’re ready to go!
So, following those instructions, you should be able to call create for each textarea, in your loop, as long as it's been added to the document before you call create().
Edit: If you really want to use an older version of ckeditor, it looks like a previous question mentions using .replace() or .replaceClass()
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
@YadYoung The selected answer to the following question recommends usingappendChildso that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…
– Snake14
Nov 21 '18 at 18:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416455%2fgenerating-ckeditor-does-not-work-on-for-loop-statement-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Looking at the ckeditor5 readme, it appears that you need to have the HTML textarea(s) already inserted and then call the create method for each textarea, passing its id as the parameter. I pulled this from the readme:
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method:
<script>
ClassicEditor .create(
document.querySelector( '#editor' )
) .catch( error => { console.error( error ); } );
</script>
You’re ready to go!
So, following those instructions, you should be able to call create for each textarea, in your loop, as long as it's been added to the document before you call create().
Edit: If you really want to use an older version of ckeditor, it looks like a previous question mentions using .replace() or .replaceClass()
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
@YadYoung The selected answer to the following question recommends usingappendChildso that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…
– Snake14
Nov 21 '18 at 18:23
add a comment |
Looking at the ckeditor5 readme, it appears that you need to have the HTML textarea(s) already inserted and then call the create method for each textarea, passing its id as the parameter. I pulled this from the readme:
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method:
<script>
ClassicEditor .create(
document.querySelector( '#editor' )
) .catch( error => { console.error( error ); } );
</script>
You’re ready to go!
So, following those instructions, you should be able to call create for each textarea, in your loop, as long as it's been added to the document before you call create().
Edit: If you really want to use an older version of ckeditor, it looks like a previous question mentions using .replace() or .replaceClass()
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
@YadYoung The selected answer to the following question recommends usingappendChildso that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…
– Snake14
Nov 21 '18 at 18:23
add a comment |
Looking at the ckeditor5 readme, it appears that you need to have the HTML textarea(s) already inserted and then call the create method for each textarea, passing its id as the parameter. I pulled this from the readme:
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method:
<script>
ClassicEditor .create(
document.querySelector( '#editor' )
) .catch( error => { console.error( error ); } );
</script>
You’re ready to go!
So, following those instructions, you should be able to call create for each textarea, in your loop, as long as it's been added to the document before you call create().
Edit: If you really want to use an older version of ckeditor, it looks like a previous question mentions using .replace() or .replaceClass()
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
Looking at the ckeditor5 readme, it appears that you need to have the HTML textarea(s) already inserted and then call the create method for each textarea, passing its id as the parameter. I pulled this from the readme:
In your HTML page add an element that CKEditor should replace:
<textarea name="content" id="editor"></textarea>
Load the classic editor build (you can choose between CDN, npm and zip downloads):
<script src="https://cdn.ckeditor.com/ckeditor5/<version>/classic/ckeditor.js"></script>
Call the ClassicEditor.create() method:
<script>
ClassicEditor .create(
document.querySelector( '#editor' )
) .catch( error => { console.error( error ); } );
</script>
You’re ready to go!
So, following those instructions, you should be able to call create for each textarea, in your loop, as long as it's been added to the document before you call create().
Edit: If you really want to use an older version of ckeditor, it looks like a previous question mentions using .replace() or .replaceClass()
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
edited Nov 21 '18 at 17:15
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
answered Nov 21 '18 at 16:46
Snake14Snake14
28917
28917
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
@YadYoung The selected answer to the following question recommends usingappendChildso that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…
– Snake14
Nov 21 '18 at 18:23
add a comment |
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
@YadYoung The selected answer to the following question recommends usingappendChildso that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…
– Snake14
Nov 21 '18 at 18:23
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
I tried your answer but this is not working. ID on textarea are not good idea because you generate a textarea using for loop with the unique ID so that I tried to use a class instead of ID on textarea but doesn't work. By the way thank you for responding
– Yad Young
Nov 21 '18 at 17:26
@YadYoung The selected answer to the following question recommends using
appendChild so that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…– Snake14
Nov 21 '18 at 18:23
@YadYoung The selected answer to the following question recommends using
appendChild so that your new elements are added to the DOM, and a few other good suggestions to make sure that you can access your dynamically added elements: stackoverflow.com/questions/9902803/…– Snake14
Nov 21 '18 at 18:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416455%2fgenerating-ckeditor-does-not-work-on-for-loop-statement-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
