I have just noticed an annoying behavior of TinyMCE editor. When I have written, let's say, a few paragraphs of text, and I want to select some of it and make it a heading (Heading 2 style), the whole text gets that heading style, not only the text I have selected.
This is not happening when I want to apply bolding - in this case it works as expected; only the selected text becomes bolded.
How can I change this behavior? I know there is HTML mode where I can change the style, but I am afraid my clients are not so familiar with HTML and they'd want to use visual mode only.
I guess it is because h2-tags usually are not valid as child nodes of paragraphs.
You may try to adjust the tinymce configuration parameter valid_children according to your needs.
This is the native behavior of TinyMCE and it cannot be changed.
Here is the workaround that I've found. Works great for me
tinyMCE.PluginManager.add('FormatingToolbarButtons', function (editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (name) {
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function () {
if (this.active()) {
editor.execCommand('mceToggleFormat', false, name);
this.active(false)
}
else {
editor.selection.setContent('<' + name + '>' + editor.selection.getContent() + '</' + name + '>');
this.active(true)
}
},
onPostRender: function () {
var self = this, setup = function () {
editor.formatter.formatChanged(name, function (state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
Could you try below:
https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#force_br_newlines/
Try force_p_newlines : true, and see if it works.
Related
I am using TinyMCE plugin. Currently, my font-size option comes with list dropdown but I want slider for font size.
Is this possible with the TinyMCE. Anyone know how can I achieve this with TinyMCE editor?
TinyMCE does not have a built in way to select font size via a "slider". As TinyMCE is open source you can always modify the editor's code to meet your needs.
If you look in the main tinymce.js file you will find code like this:
editor.addButton('fontsizeselect', function() {
var items = [], defaultFontsizeFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
var fontsize_formats = editor.settings.fontsize_formats || defaultFontsizeFormats;
each(fontsize_formats.split(' '), function(item) {
var text = item, value = item;
// Allow text=value font sizes.
var values = item.split('=');
if (values.length > 1) {
text = values[0];
value = values[1];
}
items.push({text: text, value: value});
});
return {
type: 'listbox',
text: 'Font Sizes',
tooltip: 'Font Sizes',
values: items,
fixedWidth: true,
onPostRender: createListBoxChangeHandler(items, 'fontsize'),
onclick: function(e) {
if (e.control.settings.value) {
editor.execCommand('FontSize', false, e.control.settings.value);
}
}
};
});
This is how the current select list is implemented - you can always replace this with logic to implement font selection in a different manner.
I am trying to integrate the Draft.js editor in a project.
The way I am thinking of using it, is to create a new EditorState out of my own state on every render call (the reason for this approach are related to my specific context I am not going to detail here).
What I have not succeeded is to set the cursor position in the Editor.
I have created an example on Codepen:
http://codepen.io/nutrina/pen/JKaaOo?editors=0011
In this example any character I type is prepended to the beginning of the text, instead of being inserted at the cursor position.
I have tried setting the cursor by using:
state = EditorState.acceptSelection(state, this.state.selectionState);
state = EditorState.forceSelection(state, this.state.selectionState);
but without much success.
Any help would be appreciated.
Thanks,
Gerald
A easy way to move the cursor around is to use Editor.forceSelection and a key binding function!
This is what your render function would look like once you have it set up
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.myKeyBindingFn}
/>
);
}
Once you have your keybinding function, you can do something along the lines of
myKeyBindingFn = (e) => {
// on spacebar
if (e.keyCode == 32) {
const newSelection = selectionState.merge({
anchorOffset: selectionState.getAnchorOffset() + 1,
focusOffset: selectionState.getAnchorOffset() + 1,
});
const newEditorState = EditorState.forceSelection(
editorState,
newSelection,
);
this.setState({ editorState: newEditorState });
return 'space-press';
}
};
Feel free to replace anchorOffset and focusOffset with the position you would like the cursor to be in. Using a keybinding function allows better control over events
Your handleKeyCommand function would look something like this
handleKeyCommand = (command: string): DraftHandleValue => {
if (command === 'space-press') {
return 'handled';
}
return 'not-handled';
};
So I have an editable line of text on my website. Whenever the text is changed and is above a certain length, I truncate the text.
Simplified jsfiddle here - http://jsfiddle.net/3kwCr/1/
On subsequent clicks on the text to edit, the truncated value with ellipsis is picked up. How do I get jEditable to pick up the actual value which is present as an attribute in the div?
data: function() { $('.editable-value').attr('value') }
will not work as I have several of these editable lines of text
I need something like
data: function() { this.attr('value') }
where this would the div object to which .editable has been applied to.
Just wrap this into jQuery object so you can use jQuery methods on it. Below is updated code. I also updated the example jsFiddle.
$('.editable').editable(function(value, settings) {
$(this).attr('value', value);
if (value.length > 10) {
return(value.slice(0,10)) + '...';
} else {
return(value);
}
}, {
data : function(value) { return($(this).attr('value')); },
type : 'text',
submit : 'OK'
});
So I'm trying to make an SCXML editor which is basically XML (state machine) with JavaScript blocks in it. I'm close, but I'm having trouble adding hints. It seems to boil down to I don't know the editing mode I'm in when it comes time to hint. I've looked in the CodeMirror object for clues but I'm not seeing it. I'm doing the multiplexing like so:
CodeMirror.defineMode("scxml", function (config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, "text/xml"),
{
open: "<script>", close: "</script>",
mode: CodeMirror.getMode(config, "text/javascript"),
delimStyle: "delimit"
}
);
});
editorXml = CodeMirror.fromTextArea(document.getElementById("editXmlFile"), {
lineNumbers: true,
mode: 'scxml',
indentUnit: 4,
autoCloseTags: true,
matchBrackets: true,
extraKeys: {
"'>'": function (cm) { cm.closeTag(cm, '>'); },
"'/'": function (cm) { cm.closeTag(cm, '/'); },
"' '": function (cm) { CodeMirror.xmlHint(cm, ' '); },
"'<'": function (cm) { CodeMirror.xmlHint(cm, '<'); },
"Ctrl-Space": function (cm) { CodeMirror.xmlHint(cm, ''); }
}
});
Note in the extraKeys where the XML hinting is working, how do I get the JavaScript hinting in there? From the JavaScript hinting help, it appears I'd do something along the lines of:
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);
}
... extraKeys: {"Ctrl-Space": "autocomplete"} ...
But either way, I need to know the mode I'm in (XML or JavaScript) to know to use simpleHint versus xmlHint. Anyone know how this might be done?
EDIT: cm.getMode().name and cm.getOption('mode') just return scxml when I'm in either section
Thanks!
I think you should be able to dispatch on CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(POS).state).mode.name, where POS is the {line, ch} position that you're interested in. It will return a name like "xml" or "javascript", describing the inner mode at that position.
did somebody manage to sort multiple items at once with jquery.ui.sortable?
we are working on a photo managing app.
select multiple items
drag them to a new location.
thanx
I had a similar requirement, but the solution in the accepted answer has a bug. It says something like "insertBefore of null", because it removes the nodes.
And also i tried jQuery multisortable, it stacks the selected items on top of each other when dragging, which is not what i want.
So I rolled out my own implementation and hope it will save others some time.
Fiddle Link.
Source code:
$( "#sortable" ).sortable({
// force the cursor position, or the offset might be wrong
cursorAt: {
left: 50,
top: 45
},
helper: function (event, item) {
// make sure at least one item is selected.
if (!item.hasClass("ui-state-active")) {
item.addClass("ui-state-active").siblings().removeClass("ui-state-active");
}
var $helper = $("<li><ul></ul></li>");
var $selected = item.parent().children(".ui-state-active");
var $cloned = $selected.clone();
$helper.find("ul").append($cloned);
// hide it, don't remove!
$selected.hide();
// save the selected items
item.data("multi-sortable", $cloned);
return $helper;
},
stop: function (event, ui) {
// add the cloned ones
var $cloned = ui.item.data("multi-sortable");
ui.item.removeData("multi-sortable");
// append it
ui.item.after($cloned);
// remove the hidden ones
ui.item.siblings(":hidden").remove();
// remove self, it's duplicated
ui.item.remove();
}
});
There's a jQuery UI plugin for that: https://github.com/shvetsgroup/jquery.multisortable
jsFiddle: http://jsfiddle.net/neochief/KWeMM/
$('ul.sortable').multisortable();
... or just define a 'items' option to your multisortable that way (for example) :
$('table tbody').multisortable({
items: 'tr'
});
you can use shvetsgroup/jquery.multisortable
but it will create problem.. because, that js is designed only for tags...
but customize it to use it, its very simple i'll tell you how????
at first download that .js and use it in your program...
step 1. open the js file...now edit the following lines...
$.fn.multiselectable.defaults = {
click: function(event, elem) {},
mousedown: function(event, elem) {},
selectedClass: 'selected',
items: 'li'
};
the above are lines from 107 to 112....
there you can see "items: 'li'
in that use your tag which you are used to enclose those image like if you are using, or or anything you are using like this
$.fn.multiselectable.defaults = {
click: function(event, elem) {},
mousedown: function(event, elem) {},
selectedClass: 'selected',
items: 'div' // or any tag you want...
};
and 249 to 254
selectedClass: 'selected',
placeholder: 'placeholder',
items: 'li'
};
}(jQuery);
change the line " item:'li' " with your tag like this
selectedClass: 'selected',
placeholder: 'placeholder',
items: 'div' // or anything else
};
}(jQuery);
if you are working on textboxes inside those envelopes.. you have to get rid of these lines too
// If no previous selection found, start selecting from first selected item.
prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
var prevIndex = prev.index();
after that comment line...
add a line code that search textbox or check box or any interaction element inside it...
like this..
// If no previous selection found, start selecting from first selected item.
item.children("input").focus(); // customize this code to get your element focus...
prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
var prevIndex = prev.index();
and also to indicate selected tags or elements... use styles like this
div { margin: 2px 0; cursor: pointer; }
div.selected { background-color: orange }
div.child { margin-left: 20px; }
actually i used div.. instead of that you can use any tag you wish...
hope will help u.... if it is not... read again.. and ask again....
wishes