动态添加CKEditor文本库
动态添加CKEditor文本库
提问于 2018-06-07 03:44:56
我正在创建一个应用程序，用户可以上传文件，并为每个文件添加描述和文件标题。
我使用jQuery来动态添加更多的输入，我想在描述中添加一些基本的标记，比如粗体文本、斜体文本等，所以我决定使用CKEditor。
第一个文本区域工作正常，并在用户打开页面时立即启动。
然而，我试图动态添加的那些不会被初始化为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>");
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-07 04:23:42
我想你可以这样做。
$(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);
}Stack Overflow用户
发布于 2018-06-07 21:14:59
也许这两个代码会有所帮助：
var编辑器，html = ''；函数createEditor() { if ( editor ) return；var config = {}；editor = CKEDITOR.appendTo( ' editor '，config，html )；}函数insertEditorScript(){ var externalScript = document.createElement(‘脚本’)；externalScript.setAttribute( 'src'，'https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js‘)；document.head.appendChild( externalScript )；var createCKE = window.setInterval( function() { if( CKEDITOR ){ createEditor()；clearInterval( createCKE )；} }，100 )；}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50728375
复制相关文章
相似问题