I want JQuery UI Spinner to display a plus and a minus sign instead of up and down arrows.
I've extended the JQuery UI Spinner as such:
$.widget("ui.spinner", $.ui.spinner, {
options: {
icons: {
down: "icon custom-down-icon",
up: "icon custom-up-icon"
}
}
});
With these classes I can then style the up and down spinner "buttons" as I prefer.
This DOES change the class of the s containing the spinner icon as I want, but it doesn't change the actual HTML character inside the s.
HTML being generated:
<span class="ui-icon icon icon-plus">▼</span>
Any idea where this character comes from? And how I can change it by extending the Spinner widget.
PS. Just setting options when initialising the widget is not really a viable option here.
I ran into something very similar. I'm not sure how to change it by just extending the widget itself and had to come up with something quick so I just had jQuery look for the class and replace the HTML inside the span:
$(document).ready(function() {
$('span > .icon-plus').html('*new plus button*');
});
The HTML character that is loaded depends on the class of the span, I think the "custom-icon" ones are just for the example.
There is a full list of the icons available here:
http://api.jqueryui.com/theming/icons/
Just pick the one you want (there are a couple of +s and -s) and follow the instructions here:
http://api.jqueryui.com/spinner/#option-icons
This is my code if it helps:
$('input[class="itemLevel"]').spinner({ min: 0, max: 5, icons: { down: "ui-icon-carat-1-w", up: "ui-icon-carat-1-e"} });
You can extend default buttons by calling a widget constructor
$.widget( "ui.spinner", $.ui.spinner, {
_buttonHtml: function() {
return "" +
"<input class='ui-spinner-button ui-spinner-up' id='buttonadd' type='button' value='+' />" +
"<input class='ui-spinner-button ui-spinner-down' id='buttonremove' type='button' value='−' />";
}
});
And then attach spinner to element:
$('#spinner').spinner()
Include this link in your head:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Related
I'm using a custom plugin for CKEDITOR4 that does the following:
var pluginName = 'flowctrl';
var style = new CKEDITOR.style({ element: 'pre', attributes: {'class: flow'}});
editor.addCommand(pluginName , new CKEDITOR.styleCommand(style));
editor.attachStyleStateChange(style, function (state){
!editor.readOnly && editor.getCommand(pluginName).setState(state);
});
editor.ui.addButton('Flow_Control' {
label: 'Flow Control',
command: pluginName,
toolbar: 'insert'
});
In short, it changes <p> block that the cursor is on to <pre> and adds the class "flow"
Much like selecting "bold" for text, the button is pressed in while you're inside this <pre> block.
When you toggle the button off, it changes the <pre> back into <p>, however it retains the class "flow".
I'm fairly new to CKEDITOR, so I'm not sure what I'm missing in this context.
Any help is greatly appreciated.
I applied kendo editor on a div element rather using textarea as it's giving some issues in iPad. Now, I don't want the editor to have toolbar to format text.
I tried applying styles as none & set tools to an empty array but still the toolbar appears with a draggable button in it.
<div id="targetdiv" contenteditable="true" style = "resize: none;width:
100%
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>
<script>
$("#targetdiv").kendoEditor({
tools: []});
</script>
The toolbar appears though the editor it initialized with no tools, as in image below.
Approach 1: (Not working)
<style>
.k-editor-toolbar
{
display:none;
}
</style>
Approach 2: (Not working)
$('.k-editor-toolbar').hide();
Approach 3: (partially works)
Added a select event but still the toolbar appears for an instant and then disappears.
$("#targetdiv").kendoEditor({
tools: [],
//Fires when the Editor selection has changed.
select: function (e) {
let editor = $("#targetdiv").data("kendoEditor");
editor.toolbar.hide();
});
If you don't want to show the toolbar define an empty tools in the KendoUI editor initialization:
$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});
If you want to disable the edition, you should use:
$(editor.body).attr('contenteditable',false);
you can try this one as well
.k-editor-toolbar
{display:none !important;}
Finally,
I have to subscribe for the open event of the editor toolbar and prevent its execution. This resolved my issue.
let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
e.preventDefault();
});
I am using a responsive image technique setting a max-width of 100% with CSS.
This isn't working for any images added through CKEditor, as an inline style is added.
In CSS I have added a style to override the width, which works, but height: auto doesn't, so the images is stretched.
I need to find a way to stop CKEditor from adding the inline style in the first place.
I am using CKEditor 4.x
Thank you
A far better alternative to the accepted answer is to use disallowedContent (see docs), as opposed to allowedContent.
Using allowedContent requires you to create a rather large white-list for every possible tag or attribute; where as disallowedContent does not; allowing you to target the styles to ignore.
This can be done like so:
CKEDITOR.replace( 'editor1', {
disallowedContent: 'img{width,height};'
});
Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your config.allowedContent that you don't want to have width and height in <img> styles, then editor will automatically convert styles to attributes. For example:
CKEDITOR.replace( 'editor1', {
allowedContent:
'img[!src,alt,width,height]{float};' + // Note no {width,height}
'h1 h2 div'
} );
then:
<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>
becomes in the output:
<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>
and, as I guess, it completely solves your problem.
You can listen to instanceReady event and alter any element before saving, in your case the img tag
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function (element) {
// check for the tag name
if (element.name == 'img') {
var style = element.attributes.style;
// remove style tag if it exists
if (style) {
delete element.attributes.style;
}
}
// return element without style attribute
return element;
}
}
});
});
I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:
CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.
However, it is interesting, that this works fine everytime:
CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?
I tried manually write this by the source-mode:
<html>
<head>
<title></title>
</head>
<body>
<p>
This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using CKEditor.</p>
</body>
</html>
And the Javascript (onclick action) does not work. Any ideas?
Thanks a lot!
My final solution:
editor.on('contentDom', function() {
var elements = editor.document.getElementsByTag('span');
for (var i = 0, c = elements.count(); i < c; i++) {
var e = new CKEDITOR.dom.element(elements.$.item(i));
if (hasSemanticAttribute(e)) {
// leve tlacitko mysi - obsluha
e.on('click', function() {
if (this.getAttribute('class') === marked) {
if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked_unique);
}
} else if (this.getAttribute('class') === marked_unique) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked);
}
});
}
}
});
Filtering (only CKEditor >=4.1)
This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:
http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
http://ckeditor.com/blog/CKEditor-4.1-Released
Advanced Content Filter guide
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
Read more here: config.extraAllowedContent.
on* attributes inside CKEditor
CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.
There's no configuration option for this, because it wouldn't make sense.
Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );
Clickable elements in CKEditor
If you want to observe click events in editor, then this is the correct solution:
editor.on( 'contentDom', function() {
var element = editor.document.getById( 'foo' );
editor.editable().attachListener( element, 'click', function( evt ) {
// ...
// Get the event target (needed for events delegation).
evt.data.getTarget();
} );
} );
Check the documentation for editor#contentDom event which is very important in such cases.
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand