I am using CKEditor 4 and trying to customize a toolbar to show to non-Admin users of our software. I know how to remove the "Image" button from the toolbar to prevent non-Admins from inserting image elements into our templates. However, I still want them to be able to edit an existing image within a template by double-clicking on it. With the Image insert button removed, I can still perform this action and the resulting dialog displays the source, alt text, and image preview portions. But, the Width, Height, and Ratio Lock controls are hidden. Upon inspecting the markup, it looks as though the table of class cke_dialog_ui_hbox that resides several nodes up from the txtWidth container has an inline display style set to none.
Is there a way to hide / not show the Insert Image toolbar button while still displaying the width, height, and ratio lock controls in the Image dialog box?
I have tried using config.removeButtons as well as config.toolbar and specifying the buttons that I want displayed in the insert group but the presence of the button or not appears to impact the plugin functionality by arbitrarily hiding certain controls.
I learned through Fiddling that the styles attribute on an img definition in the allowedContent object determines whether or not the width and height fields display in the image dialog box.
CKEDITOR.editorConfig = function( config ) {
allowedContent = {
img: {
attributes: true,
classes: true,
styles: 'width,height'
}
}
};
Either I missed that in the documentation somewhere or it just wasn't readily apparent to me.
Fiddle:
https://jsfiddle.net/a913q0mz/
Sounds like the best solution will be to hide the button with CSS.
In your theme (e.g. ckeditor/skins/moona-lisa) open editor.css and add this at the bottom:
a.cke_button.cke_button__image { display: none; }
Save and do a force refresh (Ctrl-Shift-[click refresh]) and you should be good.
Related
I use CkEditor BalloonEditor:
BalloonEditor.create(document.querySelector('#editor'), { ...options... });
By design the balloon toolbar of CkEditor 5 is only shown when I mark some text in the editor. That's totally okay for standard text operations as making a text bold, italic or changing its colors.
But if I want to insert something (image, table, media) I first must type something, mark it, so that the toolbar is shown before I can insert new content. That is not practical. So actually the balloon editor is great for changing existing content, not to insert new content.
My idea now is, that I want to open the toolbar by clicking with the right mouse button, showing the toolbar instead of the browser's context menu. Nice would be if the toolbar then only contains actions to insert new content (as inserting image, table, media) and the actions for formatting content (as bold, italic, font color) disappears or at least are disabled.
So basically I would implement something like:
<div id="editor" oncontextmenu="showContextMenu(event)">
...
function showContextMenu(event) {
event.preventDefault();
// --> Open here the balloon toolbar at the current caret position. How?
}
I tried finding a solution with a hack:
When clicking with the right mouse button, I inserted a space character at the clicked position and marked/selected it automatically so that the CkEditor balloon editor opened the toolbar. That worked so far, but then I had this undesired space character in the document and I struggled to remove it gracefully afterwards. Furthermore the context menu also contained the text formatting actions (as bold, italic and so on, since there was text - the inserted space selected).
Another idea would be to develop an own toolbar completely detached from CkEditor and then using Commands to insert the appropriate commands as #denov has suggested in his solution. But I think this should actually be possible to achieve with the CkEditor API by using the class ContextualBalloon. But how?
Does anyone have any idea how to achieve this or can guide me with some directions?
Thx!
For images you can just drag the image into the editor.
Commands are the way to interact with the editor. The Images plugin uses the ImageInsertCommand
assuming you have the editor assigned to the global window object you could do
function showContextMenu(event) {
event.preventDefault();
window.editor.execute('imageInsert', { source: 'https://upload.wikimedia.org/wikipedia/commons/8/8d/Frog_on_palm_frond.jpg'} )
}
Unfortunately, it's not possible to show the balloon toolbar if the selection is collapsed. This behaviour is defined here.
I have a view with a lot of UI buttons. I want some of the buttons to show and some to be hidden depending on my dynamic content. This can be done with button.isHidden = true. The problem is that the layout still set its constraints to the hidden buttons which create a lot of empty space.
You can see the empty space at the bottom in the picture where the buttons are hidden. So, is it possible to make the buttons "gone" instead of hidden? In Android Studio there is a isGone code (can't remember the exact code) that not only hides the button but removes the height and width of it as well.
KendoUI version 2013.3.1119
Using Kendo MVVM
I have a color selector that I have build that uses a flat color picker and a color picker using a palette. They both function correctly but the layout of the flat color picker is off where the track for the slider does not render to the appropriate width.
If the flatcolorpicker is loaded directly in a page and not in a kendo window it renders correctly.
There are not any special settings I am applying.
<div id="flatColorPicker"
data-role="flatcolorpicker"
data-bind="value: colorPaletteValue, enabled: enableColorSelection, events: { change: colorPaletteChange }">
</div>
What I have tried
Removed all other html around it, same result within the window.
Tried to forcefully set the size of the track.
Used Chrome dev tools to manipulate the CSS.
Stepped through the Kendo UI javascript to see where it renders initially.
What worked, but not a resolution
Manually re-size the window using the mouse after initial load, it then corrects itself.
Has anyone else experienced this or has any other ideas to try?
KendoUI Window settings:
{
title: "Set Color",
resizable: false,
draggable: false,
width: 550,
height: 300,
actions: ["Close"]
}
Ran in to the same issue:
I don't know if this will fix it for you, but I fixed it by making sure the picker's container element was visible before instantiating it. My code used to look like:
$picker.kendoFlatColorPicker({
// config
})
$container.show(); // $container contains the $picker
Turns out if I just reverse the order it started working:
$container.show(); // $container contains the $picker
$picker.kendoFlatColorPicker({
// config
})
I'm calling handleNotableTypeSelect method on the click of the check box, everything is working fine but the page jumps to the top.
this.$hideInactiveCheckbox.click(
this.handleNotableTypeSelect.createDelegate(this));
handleNotableTypeSelect: function(e) {
//e.preventDefault();
if (this.$hideInactiveCheckbox.attr('checked')) {
this.isActive = "^active$";
this.$connTable.fnFilter(this.isActive, 1,true);
}
else {
this.$connTable.fnFilter('', 1);
}
//return false;
}
My case was that the checkbox was hidden (due to CSS design). the original input checkbox had position set to 'absolute' so when the user clicked the checkbox the page "jumped" to the real checkbox position.
EDIT:
In some cases there are styled "fake" checkboxes. the real checkbox element is hidden in some bad practice way.
My case was that the real checkbox element had absolute positioning and hidden and that cause the page jump to top of the window.
Possible solution:
Check if the checkbox element has the following CSS rule
position: absolute;
if yes, removing this rule can fix this issue.
This may related to the following issue:
input checkbox in div jumps to top of page on firefox
I've actually been seeing errors about this in all kinds of frameworks, and for the most part, people post framework specific answers. If you're hiding the check box, try using display: none on it, it seemed to work for the post above. I'm still trying to hunt down a fix (since I'm not hiding my checkboxes, I'm trying figure out why checkboxes in a modal cause the screen to jump to the top of the modal on click).
Several frameworks and css tricks hide the checkbox using position: absolute.
That is correct because we need to hide the checkbox only from screen, while Screen Readers must have access to it in order to announce it correctly. But display:none hides it from them too and users with accessibility issues can't click it.
The most suitable solution is to add position:relative to checkbox container and adjust checkbox position using top: if needed.
If your check box has position: absolute, in most cases just wrapping it (input and label elements) with a div should be enough.
If the checkbox has been positioned absolute to hide it and the interaction occurs on the label (which is commonplace when styling checkboxes beyond the default UI), the page will scroll to wherever the checkbox input is positioned despite the click event occurring on the label. so if you've added top:-9999px; for example, the page will jump right up to where it's now positioned.
What you want instead, is to remove it from the rendered layout without moving it away from the label. to do this, add a container div to the label and input, and add position:relative; to it. Then add the following code to the input itself:
position:absolute;
top:0; left:0;
visibility: hidden;
opacity: 0;
I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.
I have a left pane and a center pane. I dynamically generate div
when the user clicks on the left pane. The divs are generated and
dropped on the center pane. The divs are draggable and resizable.
Everything works fine with dragging and resizing on the visible center
area. The moment I drag the div beyond the bottom, the scroll bar on
the center pane appears and it seems the center pane is extending to
accommodate the new position of the dragged div. But the moment I try
to resize the div or add another div, it jumps to the top section of
the div and resets the scrollbars. I checked the center div height in
firebug and it remains at the same height when initialized
even after dragging the new div beyond the bottom.
Here is the test page html code.
Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.
Click on "Add new"
Drag the newly added div beyond the bottom of the center pane.
The center pane shows the scrollbar as it is suppose to.
If you check the center div's height in firebug, it is not changing
Now try resizing the newly added div by dragging its handle
It jumps to the top and the center box loses its scrollbar.
I could not paste the complete html page so here is the reference to the code at the bottom of this thread
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee
And here is the test link http://jsfiddle.net/yZc63/
I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.
I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.
You can check the solution here http://jsfiddle.net/c7wrT/
Is adding the dynamic div directly to the html body a good approach?
I ran into same situation and this answer helped.
https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});