Just like the headline says, I am unable to edit links on CKEditor. I have a fresh installation and when I type in a text that I want to mark as a link, the link pop up opens with all the fields and buttons but they don't work - with exception of the Browse server button.
They are not even in disabled color, they just don't work! Drop-down menus don't open and text areas/fields are not editable! I have tried to update with the latest jquery version, I tested without other plugins that also use javascript and would might get in conflict but it still does not work. Yes, I have also tested with a clean cache! The only way to edit a link is to do it on source mode.
So, any suggestions on what the problem is?
Here is the config.js:
CKEDITOR.editorConfig = function( config ) {
config.filebrowserBrowseUrl = 'kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = 'kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = 'kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = 'kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = 'kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = 'kcfinder/upload.php?type=flash';
// Define changes to default configuration here.
// For the plete reference:
// !/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Subscript,Superscript';
// Se the most mon block elements.
config.format_tags = 'p;h1;h2;h3;h4;h5;pre';
// Make dialogs simpler.
config.removeDialogTabs = 'image:advanced;';
config.language = 'sv';
config.extraPlugins = 'format,horizontalrule,templates';
CKEDITOR.config.autoParagraph = false;
config.allowedContent = true;
};
Just like the headline says, I am unable to edit links on CKEditor. I have a fresh installation and when I type in a text that I want to mark as a link, the link pop up opens with all the fields and buttons but they don't work - with exception of the Browse server button.
They are not even in disabled color, they just don't work! Drop-down menus don't open and text areas/fields are not editable! I have tried to update with the latest jquery version, I tested without other plugins that also use javascript and would might get in conflict but it still does not work. Yes, I have also tested with a clean cache! The only way to edit a link is to do it on source mode.
So, any suggestions on what the problem is?
Here is the config.js:
CKEDITOR.editorConfig = function( config ) {
config.filebrowserBrowseUrl = 'kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = 'kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = 'kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = 'kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = 'kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = 'kcfinder/upload.php?type=flash';
// Define changes to default configuration here.
// For the plete reference:
// http://docs.ckeditor./#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Subscript,Superscript';
// Se the most mon block elements.
config.format_tags = 'p;h1;h2;h3;h4;h5;pre';
// Make dialogs simpler.
config.removeDialogTabs = 'image:advanced;';
config.language = 'sv';
config.extraPlugins = 'format,horizontalrule,templates';
CKEDITOR.config.autoParagraph = false;
config.allowedContent = true;
};
- JSFiddle? You config looks OK. – oleq Commented Jan 8, 2015 at 10:52
- What should I do there? – viriato Commented Jan 8, 2015 at 10:58
- 1 Create a sample that works so the issue can be reproduced. – oleq Commented Jan 8, 2015 at 13:33
- Any messages in the browser developer console? – Joel Peltonen Commented Jan 9, 2015 at 6:16
- @Nenotlep yes, 2 and both say the exakt same thing: TypeError: d.browser is undefined - what does this mean? – viriato Commented Jan 13, 2015 at 7:31
5 Answers
Reset to default 2This post might be helpful: CKEditor + Magnific Popup. Link editing does not work
Here is one more example (based on CKEditor5):
let theEditor;
ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote']
})
.then(editor => {
theEditor = editor;
})
.catch(error => {
console.error(error);
});
$.fn.modal.Constructor.prototype.enforceFocus = function() {};.ck-editor__editable {
min-height: 150px;
}
body {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999);
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor./ckeditor5/10.0.1/classic/ckeditor.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<textarea name="content" id="editor">
<p>Lorem ipsum dolor sit ameta quam, nec bibendum neq</p>
</textarea>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>CKeditor Link is not working in modal, below solution solved the issue
.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
z-index: 10055 !important;
}
For me, I have solved it by setting:
.ck.ck-balloon-panel {
z-index: 1050 !important;
}
@Penny-Liu was right with her link. It has to do with a conflict between models (bootstrap, magnificpopup, and possibly others).
For magnific pop-up the solution is easy:
$.magnificPopup.instance._onFocusIn = function(e) {
if( $(e.target).hasClass('ck-input') ) {
return true;
}
$.magnificPopup.proto._onFocusIn.call(this,e);
};
try this code where your modal form is:
$.fn.modal.Constructor.prototype.enforceFocus = function () { };