When converting an iOS web view with multiple stacked editors to autogrow plugin, I have the following issues:
I had default margin, font, and font size styling in the editor which is now ignored - I've tried setting this styling everywhere I can think of to no effect - can these be changed?
The editors respect the minimum height, but only seem to get focus if tapped near the top of the editor content space.
The only solution I could figure out was to edit plugin.js directly, in replaceCache():
if ( body ) {
body.setStyle( 'font-family', 'Avenir Next' );
body.setStyle( 'font-size', '13pt' );
body.setStyle( 'height', 'auto' );
body.setStyle( 'width', 'auto' );
body.setStyle( 'min-height', CKEDITOR.env.safari ? '0%' : 'auto' ); // Safari does not support 'min-height: auto'.
}
Related
I'm using CKEditor 5 inside of tabs that have a fixed height. When I type into the editor and consequently increase it's height, it gets cut off from the bottom because its in a fixed height container with overflow: hidden. I can call the resize method on the tabs to resize it, that's not the problem. The problem is I can't find any documentation for a resize event in CKeditor. How can I know when the height of the editor changes?
I tried the resize event on the contenteditable div but it doesn't fire
ClassicEditor.create(richEditor).then( editor => {
// console.log( editor );
document.querySelector('.ck-editor__editable').addEventListener('resize', () => {
updateTabs();
});
}).catch( error => {
console.error( error );
});
I want to have a window xtype that contains just an of its own size but when I show my window, it shows up as a tiny square in the middle of the screen (not the actual size of the image). I've tried using this block of code
listeners:{
afterrender: function(me){
me.el.on({
load: function (evt, ele, eOpts){
me.updateLayout();
},
error: function(evt,ele,eOpts){
}
});
}
}
to update the layout of the parent window from within the image xtype, but this makes the window not centered and centering the window during an afterrender event isn't working. Am I missing something simple? I also have the maxWidth and maxHeight configs of the image set to Ext.getBody().getViewSize().width and height respectively.
Sencha had a good reason not to use xtype: 'image' for their own icons etc.
xtype: 'image' only works with fixed width and height, so you can't even preserve aspect ratio, as far as I know.
What you want to do is to have a container and set the background-image of the container.
xtype: 'container',
style: 'background-image: url(\'image.jpg\'); background-repeat:no-repeat; background-position:50% 50%; background-size:contain'
or even just use the window: https://fiddle.sencha.com/#view/editor&fiddle/244n
When editing content that includes a table in ckeditor, it shows a border around table cells even though there is no border in the markup. This seems to be a convenience feature, so I'd like to be able to toggle it, perhaps via a checkbox in the toolbar. Is this possible? Perhaps there is a plugin of some sort that I have not configured? Thanks for your help.
Screen shot of table borders
This this best example to hide table border. Key player is : startupShowBorders: false,
$(function () {
var editor = CKEDITOR.replace("textarea", {
width: 750, height: 500, fullPage: true,
extraPlugins: 'stylesheetparser',
allowedContent: true,
qtBorder: '0',
startupShowBorders: false,
////pasteFilter: 'semantic-content',
//// Custom stylesheet for editor content.
//// contentsCss: ['content/css/html-email.css'],
//// Do not load the default Styles configuration.
stylesSet: []
});
});
There is one problem when I work with ckeditor. I press on icon for adding images, then modal window appears and I put direct image link in the special field, in this moment width and height detected automatically and it writes to style for ex:
<img src='#some images direct link' style='width:SOME WIDTH;height:SOME HEIGHT'>
Can I disable this automatic function? Or I have to delete this style by myself every time?
You could write a rule for your config that would remove the style tag on elements.
var editorRulesObject = {
elements: {
img: function( el ) {
if(el.attributes.style) {
el.attributes.style = '';
}
}
}
};
CKEDITOR.on('instanceReady', function( e ) {
// Ensures that any non-styled text, or text input without any tags will be correctly styled.
CKEDITOR.instances[e.editor.name].dataProcessor.dataFilter.addRules( editorRulesObject );
CKEDITOR.instances[e.editor.name].dataProcessor.htmlFilter.addRules( editorRulesObject );
});
In 2020, since version 4.5.0, it is much easier to switch off the annoying automatic filling in of height and readiness.
New there is the config option "image_prefillDimensions".
config.image_prefillDimensions = false;
Documentation: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
The user still has the possibility to fill in the height and width automatically by clicking on the button [Reset size (circle arrow)].
I am using ckeditor and I have set the textarea size correctly via code:
CKEDITOR.replace( 'editor1', {
width: 468,
height: 132
} );
I have also deactivated the resizing correctly with code:
config.resize_enabled = false;
My problem is that the textarea's height still allows for text to be typed and the textarea expands vertically. I want the textarea to be set via a certain height and not move past that. So no more text can be entered once the height has been met.