I can't find a way to limit the height of the ckeditor window.
I've tried all the solutions I've found through google and none work: Tables, divs, config commands after the CKEDITOR call like this is supposed to work but doesn't:
<script type='text/javascript'>CKEDITOR.replace('cTitle1');CKEDITOR.config.height = '800px';</script>
I have the latest version of ckeditor.
I don't want to limit it globally, just specific instances because there are times I want it to be regular size, and times I need it to be less tall.
Thanks in advance.
You can pass configuration object directly to replace method:
CKEDITOR.replace( 'editor', {
height: '400px'
} );
If you want to prevent the editor from resizing, you can also set config.resize_enabled to false in the configuration object:
CKEDITOR.replace( 'editor', {
height: '400px',
resize_enabled: false
} );
Please take a look at this example.
If you only want to limit height when the editor is being resized, you can add config.resize_maxHeight to the configuration object. Check the "Editor Resizing Customization" sample and documentation for more options and examples.
Related
In CKEditor, I added my custom image button, which directly trigger a file input. However, images can only be rendered when the Image plugin is in use.
I don't want to have 2 image buttons on the toolbar, is there a way to hide the Image button, but still use it (like display: none but in a more structural way?)
Thanks in advance.
Since 'CKEditor 4.1' you have something which is called Advanced content filtering.
This allows you set enable or disable certain tags.
The easiest way to allow the images to be displayed is to add
config.allowedContent = true;
in your config.js file. But this will allow everything.
To just add the enablement of the 'img' tag you can add it in the 'extraAllowedContent' element when you create the CKEditor
var myEditor = CKEDITOR.replace(editorId, {
extraAllowedContent : 'img(*){*}[*]'
});
There is removeButton option for CKEditor config, will it work for you ?
config.removeButtons = 'Image';
I would like the ability to add a class to images which are added to the body field in Drupal.
I want to keep things as simple as possible for our users, whereby they don't have to add classes etc. Ideally they would just click on the image button in the toolbar, paste the URL or upload an image and set align either left or right:
Image properties for adding images in CKeditor
I've tried several options, including: CKEditor adding class to img tag but I cannot get anything to work.
The path to CKEditor is to the CDN //cdn.ckeditor.com/4.5.4/full-all
I'd like to us my own SCSS to make the images float left or right at desktop, and be centered for the small breakpoint.
The text format is 'filtered HTML'.
Is there any way I can get this to work?
Many Thanks
Update
Because I'm using the CKEditor CDN, I've added the following to my local 'ckeditor.config.js' file
config.extraPlugins = 'image, dialog, dialogui';
// Enable local "imagetoolbar" plugin from /myplugins/imagetoolbar/ folder.
CKEDITOR.plugins.addExternal( 'image', '/plugins/image/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialog', '/plugins/dialog/' 'plugin.js' );
CKEDITOR.plugins.addExternal( 'dialogui', '/plugins/dialog/' 'plugin.js' );
// extraPlugins needs to be set too.
CKEDITOR.replace( 'news', {
extraPlugins: 'image, dialog, dialogui'
} );
The example I copied this from has 'news' as the CKEDITOR.replace, which I'm sure is wrong, what should this be? https://www.pluginsforckeditor.com/Tutorials/149/How-to-add-a-plugin-to-CKEditor/en/n149.aspx
You can modify the image plugin in order to have the class of the image already entered. So users just have to paste URL or upload an image.
Fill the default field with what you want.
I hope to help you.
Question: I would like add custom styles to the dropdown in ckeditor, e.g. to show a Button style adding an a tag with class btn. Is there a way to do so within Bolt CMS?
(source: jonathanschmid.de)
Attempt: I was hoping to be able to add styles via the general.wysiwyg.ck config key, but there doesn't seem to be a suitable option. I managed to achieve what I wanted by editing bolt-public/view/js/ckeditor/styles.js – but I guess it's not update-safe.
Does anyone know of a safe way to achieve this within Bolt CMS? If not, I'll try forking to suggest adding general.wysiwyg.ck.styles to config.
There's an official guide about styles.
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'Button', element: 'a', attributes: { 'class': 'btn' } }
] );
and
config.stylesSet = 'my_styles';
Then if you put the selection into a link, you can apply the style.
However, if you'd like to create a link from scratch, use CKEDITOR.editor.insertHtml within a custom command and expose it as a button in the toolbar. Styles combo does not insert new elements.
Is it possible to use the stylesheet parser in full page mode? I can get either of these features to work, but not both. For example, the following settings result in an empty styles combo box.
var editor1 = CKEDITOR.replace('editor1', {
contentsCss: ['myStyles.css'],
stylesSet: [],
fullPage: true,
allowedContent: true
});
If I comment out the "styleSet: []" line, then the combo box gets populated with the default styles, and mine don't get added. On the other hand, if I comment out "fullPage: true", then my styles get added, but I'm not in full page mode.
I'm using the latest version of ckeditor (4.4.7). Thanks for any help ...
I am trying to edit an entire html using fck editor. So that should contain tags like html, body ,DOCTYPE etc. But my problem is when I submit the data, fckeditor forcefully remove the above tags from the content. I want to avoid this. Is there any configuration issue there.
-Arun
look at this config option. CKEDITOR.config.fullPage. I believe it will permit you to edit the full page (and will preserve the contents) (i haven't used it.)
'ckEditor' (as it's now known) shouldn't allow html/script tags directly within the content. However if you have the latest version there is a 'source' view which allows all the source to be edited directly and may give you what you want.
Arun User this one .This is best solution for you.
var CKcontent = false ;
$(document).ready(function(){
// setup ckeditor and its configurtion
CKEDITOR.replace( 'content1',
{
//fullPage : true,
customConfig : 'config.js' ,
toolbar : 'BasicToolbar' ,
height : "300"
});
});
Set only fullpage : false if not show HTML content otherwise set true
Note: it implemented by me in our development