Javascript 具有多个文本区域的文本编辑器
我有一个打开对话框的按钮。在对话框中,我有一个表单,其中有一个按钮,单击此按钮后,我将另一个表单附加到此表单中。因此,我必须将ckeditor添加到我附加的所有文本区域。但这对我不起作用。文本区域不可编辑 这是我的表单,单击按钮后附加Javascript 具有多个文本区域的文本编辑器,javascript,jquery,html,forms,ckeditor,Javascript,Jquery,Html,Forms,Ckeditor,我有一个打开对话框的按钮。在对话框中,我有一个表单,其中有一个按钮,单击此按钮后,我将另一个表单附加到此表单中。因此,我必须将ckeditor添加到我附加的所有文本区域。但这对我不起作用。文本区域不可编辑 这是我的表单,单击按钮后附加 <form id="q_options"> <div class="rightcontact"> <button type="submit">Remove</button> <
<form id="q_options">
<div class="rightcontact">
<button type="submit">Remove</button>
</div>
<div class="leftcontact">
<div class="form-group">
<p>Score<span>*</span></p>
<span class="icon-case"><i class="fa fa-male"></i></span>
<input type="number" name="q_score" id="q_score"/>
</div>
</div>
<div class="form-group">
<p>Option-text<span>*</span></p>
<span class="icon-case"><i class="fa fa-male"></i></span>
<textarea name="option_text" id="option_text" rows="10" cols="100"></textarea>
</div>
</form>
主要形式是这个。上面有一个按钮,用于将表单添加到此表单
<form id="question">
<h1>Question</h1>
<div class="leftcontact">
<p>Difficulty<span>*</span></p>
<div class="check-boxes">
{% for obj in q_diff_objects %}
<input type="radio" name="ques_difficulty" value={{obj.id}}>{{obj.name}}</input><br>
{% endfor %}
</div>
</div>
<div class="form-group">
<p>Question-text<span>*</span></p>
<span class="icon-case"><i class="fa fa-male"></i></span>
<textarea name="question_text" id="question_text" rows="10" cols="100"></textarea>
<div class="validation"></div>
</div>
<div class="form-group">
<p>Media-url<span>*</span></p>
<span class="icon-case"><i class="fa fa-male"></i></span>
<textarea name="option_text" id="option_text" rows="10" cols="10"></textarea>
<div class="validation"></div>
</div>
<button type="submit" class="add_options">Add Option</button>
<div id="q_option_div">
<p>option</p>
</div>
<button type="submit" class="bouton-contact">Send</button>
问题:
困难*
{q_diff_objects%}
{{obj.name}}
{%endfor%}
问题文本*
媒体url*
添加选项
选择权
发送
因此,它是一种给定错误,例如:CKeditor的实例已经存在当您添加第二个表单时,看起来您正在添加具有重复ID的元素。确保每个ID都是唯一的,并为每个需要成为编辑器的文本区域调用
CKEDITOR.replace
函数
<textarea name="option_text_1" id="option_text_1" rows="10" cols="100"></textarea>
<textarea name="option_text_2" id="option_text_2" rows="10" cols="100"></textarea>
CKEDITOR.replace('option_text_1');
CKEDITOR.replace('option_text_2');
CKEDITOR.replace('option_text_1');
CKEDITOR.replace('option_text_2');
添加第二个表单时,您似乎正在添加具有重复ID的元素。确保每个ID都是唯一的,并为每个需要成为编辑器的文本区域调用CKEDITOR.replace
函数
<textarea name="option_text_1" id="option_text_1" rows="10" cols="100"></textarea>
<textarea name="option_text_2" id="option_text_2" rows="10" cols="100"></textarea>
CKEDITOR.replace('option_text_1');
CKEDITOR.replace('option_text_2');
CKEDITOR.replace('option_text_1');
CKEDITOR.replace('option_text_2');
试试这个
<textarea id="first_textarea" name="first_textarea" class="form-control editor">
<textarea id="another_textarea" name="another_textarea" class="form-control editor">
<script>
$(".editor").each(function () {
let id = $(this).attr('id');
CKEDITOR.replace(id, options);
});
</script>
$(“.editor”)。每个(函数(){
设id=$(this.attr('id');
CKEDITOR.replace(id,选项);
});
试试这个
<textarea id="first_textarea" name="first_textarea" class="form-control editor">
<textarea id="another_textarea" name="another_textarea" class="form-control editor">
<script>
$(".editor").each(function () {
let id = $(this).attr('id');
CKEDITOR.replace(id, options);
});
</script>
$(“.editor”)。每个(函数(){
设id=$(this.attr('id');
CKEDITOR.replace(id,选项);
});
简单的制作方法
<textarea name="Text1" id="editor1"></textarea>
<textarea name="Text2" id="editor2"></textarea>
<textarea name="Text3" id="editor3"></textarea>
<textarea name="Text4" id="editor4"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor2' );
CKEDITOR.replace( 'editor3' );
CKEDITOR.replace( 'editor4' );
</script>
CKEDITOR.replace('editor1');
CKEDITOR.replace('editor2');
CKEDITOR.replace('editor3');
CKEDITOR.replace('editor4');
简单的制作方法
<textarea name="Text1" id="editor1"></textarea>
<textarea name="Text2" id="editor2"></textarea>
<textarea name="Text3" id="editor3"></textarea>
<textarea name="Text4" id="editor4"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor2' );
CKEDITOR.replace( 'editor3' );
CKEDITOR.replace( 'editor4' );
</script>
CKEDITOR.replace('editor1');
CKEDITOR.replace('editor2');
CKEDITOR.replace('editor3');
CKEDITOR.replace('editor4');
对于具有选项的多个项目,您可以使用:
<script>
$(document).ready(function () {
$(".editor").each(function () {
let id = $(this).attr('id');
CKEDITOR.replace(id, {
toolbar: [{
name: 'clipboard',
items: ['Undo', 'Redo']
},
{
name: 'styles',
items: ['Styles', 'Format']
},
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
},
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
},
{
name: 'links',
items: ['Link', 'Unlink']
},
{
name: 'tools',
items: ['Maximize']
},
{
name: 'editing',
items: ['Scayt']
}
],
});
});
});
</script>
$(文档).ready(函数(){
$(“.editor”)。每个(函数(){
设id=$(this.attr('id');
CKEDITOR.replace(id{
工具栏:[{
名称:“剪贴板”,
项目:[“撤消”、“重做”]
},
{
名称:“样式”,
项目:[“样式”、“格式”]
},
{
名称:“基本样式”,
项目:['Bold'、'Italic'、'Strike'、'-'、'RemoveFormat']
},
{
名称:'段落',
项目:['NumberedList'、'BulletedList'、'-'、'Outdent'、'Indent'、'-'、'Blockquote']
},
{
名称:'链接',
项目:[“链接”,“取消链接”]
},
{
名称:“工具”,
项目:[“最大化”]
},
{
名称:'编辑',
项目:['Scayt']
}
],
});
});
});
对于具有选项的多个项目,您可以使用:
<script>
$(document).ready(function () {
$(".editor").each(function () {
let id = $(this).attr('id');
CKEDITOR.replace(id, {
toolbar: [{
name: 'clipboard',
items: ['Undo', 'Redo']
},
{
name: 'styles',
items: ['Styles', 'Format']
},
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
},
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
},
{
name: 'links',
items: ['Link', 'Unlink']
},
{
name: 'tools',
items: ['Maximize']
},
{
name: 'editing',
items: ['Scayt']
}
],
});
});
});
</script>
$(文档).ready(函数(){
$(“.editor”)。每个(函数(){
设id=$(this.attr('id');
CKEDITOR.replace(id{
工具栏:[{
名称:“剪贴板”,
项目:[“撤消”、“重做”]
},
{
名称:“样式”,
项目:[“样式”、“格式”]
},
{
名称:“基本样式”,
项目:['Bold'、'Italic'、'Strike'、'-'、'RemoveFormat']
},
{
名称:'段落',
项目:['NumberedList'、'BulletedList'、'-'、'Outdent'、'Indent'、'-'、'Blockquote']
},
{
名称:'链接',
项目:[“链接”,“取消链接”]
},
{
名称:“工具”,
项目:[“最大化”]
},
{
名称:'编辑',
项目:['Scayt']
}
],
});
});
});
我可以将类名与ckeditor一起使用吗,因为textarea是我要附加的格式。我需要所有的文本区域都处于活动状态。也许,但你真的需要有唯一的名称和ID。在保存或发布表单时,您将如何判断哪个文本区域是什么?当添加第二个表单时,使用增量值或变量对名称和ID进行搜索和替换:ID=“option\u text\uu{0}”
ID=“option\u text\u 3”
我可以将类名与ckeditor一起使用吗,因为textarea是我要附加的表单。我需要所有的文本区域都处于活动状态。也许,但你真的需要有唯一的名称和ID。在保存或发布表单时,您将如何判断哪个文本区域是什么?添加第二个表单时,使用增量值或变量对名称和ID进行搜索和替换:ID=“option\u text\uu{0}”
ID=“option\u text\u 3”