javascript - 动态添加 CKEditor textareas
问题描述
我正在创建一个应用程序,用户可以在其中上传文件并为每个文件添加描述和文件标题。
我正在使用 jQuery 动态添加更多输入,我想在描述中添加基本标记,例如粗体文本、斜体文本等,并决定使用 CKEditor。
第一个 textarea 工作正常,并在用户打开页面后立即启动。
但是,我尝试动态添加的那些不会作为 CKEditor 文本区域启动。
我试过这个脚本,但它不起作用。任何帮助表示赞赏。
<script type="text/javascript">
$(document).ready(function() {
var CKeditor = $(this).find('.dynamic-ckeditor-textarea')
CKeditor.ckeditor()
});
</script>
这是我正在使用的表格。
<div class="row bg-custom">
<div class="col-12">
<form class="add-post-form form-signin widthfix" enctype="multipart/form-data" action="upload-handler.php?id=<?php echo $lastId; ?>" method="post">
<ul id="fieldList">
<li>
<input class="form-control topborder" type='file' name='postFile[]'>
</li>
<li>
<input class="form-control fixborder" type='text' name='postName[]' placeholder='File title / name'>
</li>
<li>
<textarea class='form-control fixborder' id="image-desc-editor" name='postDesc[]' placeholder='File description'></textarea>
</li>
</ul>
<button type="button" class="form-control" id="addMore" name="button">Another file</button>
<br>
<input type="submit" name="" class="form-control" value="Upload files">
</form>
</div>
</div>
这是我用来添加更多输入的 jQuery:
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='file' class='form-control topborder' name='postFile[]'></li>");
$("#fieldList").append("<li><input type='text' class='form-control fixborder' name='postName[]' placeholder='File title / name'></li>");
$("#fieldList").append("<li><textarea id='image-desc-editor' class='form-control fixborder dynamic-ckeditor-textarea' name='postDesc[]' placeholder='File description'></textarea></li>");
});
});
解决方案
我认为你可以这样做。
$(document).ready(function() {
CKEditorChange('image-desc-editor-0');
});
var i = 1;
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='file' class='form-control topborder' name='postFile[]'></li>");
$("#fieldList").append("<li><input type='text' class='form-control fixborder' name='postName[]' placeholder='File title / name'></li>");
$("#fieldList").append("<li><textarea id='image-desc-editor-"+i+"' class='form-control fixborder dynamic-ckeditor-textarea' name='postDesc[]' placeholder='File description'></textarea></li>");
CKEditorChange('image-desc-editor-' + $(this).attr('rel'));
$(this).attr('rel', parseInt($(this).attr('rel')) + parseInt(1));
i++;
});
});
function CKEditorChange(name) {
CKEDITOR.replace(name, {
toolbar: [{
name: 'document',
items: ['Print']
},
{
name: 'clipboard',
items: ['Undo', 'Redo']
},
{
name: 'styles',
items: ['Format', 'Font', 'FontSize']
},
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
},
{
name: 'colors',
items: ['TextColor', 'BGColor']
},
{
name: 'align',
items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
},
{
name: 'links',
items: ['Link', 'Unlink']
},
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
},
{
name: 'insert',
items: ['Image', 'Table']
},
{
name: 'tools',
items: ['Maximize']
},
{
name: 'editing',
items: ['Scayt']
}
],
filebrowserUploadUrl: 'request.php?pID=Upload',
customConfig: '',
disallowedContent: 'img{width,height,float}',
extraAllowedContent: 'img[width,height,align]',
extraPlugins: 'tableresize,uploadimage,uploadfile',
height: 800,
contentsCss: ['https://cdn.ckeditor.com/4.8.0/full-all/contents.css'],
bodyClass: 'document-editor',
format_tags: 'p;h1;h2;h3;pre',
removeDialogTabs: 'image:advanced;link:advanced',
stylesSet: [{
name: 'Marker',
element: 'span',
attributes: {
'class': 'marker'
}
},
{
name: 'Cited Work',
element: 'cite'
},
{
name: 'Inline Quotation',
element: 'q'
},
{
name: 'Special Container',
element: 'div',
styles: {
padding: '5px 10px',
background: '#eee',
border: '1px solid #ccc'
}
},
{
name: 'Compact table',
element: 'table',
attributes: {
cellpadding: '5',
cellspacing: '0',
border: '1',
bordercolor: '#ccc'
},
styles: {
'border-collapse': 'collapse'
}
},
{
name: 'Borderless Table',
element: 'table',
styles: {
'border-style': 'hidden',
'background-color': '#E6E6FA'
}
},
{
name: 'Square Bulleted List',
element: 'ul',
styles: {
'list-style-type': 'square'
}
}
]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<div class="row bg-custom">
<div class="col-12">
<form class="add-post-form form-signin widthfix" enctype="multipart/form-data" action="upload-handler.php?id=<?php echo $lastId; ?>" method="post">
<ul id="fieldList">
<li>
<input class="form-control topborder" type='file' name='postFile[]'>
</li>
<li>
<input class="form-control fixborder" type='text' name='postName[]' placeholder='File title / name'>
</li>
<li>
<textarea class='form-control fixborder' id="image-desc-editor-0" name='postDesc[]' placeholder='File description'></textarea>
</li>
</ul>
<button type="button" class="form-control" id="addMore" rel="1" name="button">Another file</button>
<br>
<input type="submit" name="" class="form-control" value="Upload files">
</form>
</div>
</div>
更新:这是最简单的用法。
function CKEditorChange(name) {
CKEDITOR.replace(name);
}
推荐阅读
- sql-server - 使用 SQL Server 触发器发送电子邮件(根据客户端,收件人电子邮件地址是动态的)
- python - 使用 Python 运行没有文件扩展名的可执行文件
- vue.js - 为什么控制台显示错误:激活器插槽必须绑定,当我已经绑定它时?
- android - 我在 APP 按钮上得到一个红十字
- gitlab - 我如何解决 Git 实验室 CI CD 的关键问题?
- google-cloud-platform - 如果 Cloud Run 中的查询参数长度有任何限制
- html - HTML
- python - 当在 Alembic 中更改列的名称时,是否有一个配置为在 env 中进行配置以正确迁移?
- react-native - React Native Image URI 未显示
- python - 如何为以下标记的 pos 应用分块?(nltk)