When my text has center or right aligment and press enter key no problem. But when typing shift+enter or alt+enter or ctrl+enter, the aligmnet is not working.
Image capture
Anyone can help ?
Thanks.
you can use handleReturn to solve this,just like
<DraftEditor handleReturn={handleReturn} />;
function isSoftNewlineEvent(e: React.KeyboardEvent<HTMLInputElement>) {
return (
e.which === 13 &&
(e.getModifierState('Shift') || e.getModifierState('Alt') || e.getModifierState('Control'))
);
}
// handleReturn
const handleReturn = (event: SyntheticKeyboardEvent) => {
if (isSoftNewlineEvent(event)) {
setEditorState(RichUtils.insertSoftNewline(editorState));
return 'handled';
}
return 'not-handled';
};
Related
I believe my if/else statements are not running and end up not making the changes to the elements I target. When I run it, I believe the parent element is not being called correctly for the first function. For the second function, it is stating that it's not a node?
Function expandArticleBody()
Find the article in which the button that was clicked belongs.
If the text on the button that was clicked is a V, then set the display property of the article's body to none. Also set the text on the button to >.
If the text on the button that was clicked is not a V, then set the display property of the article's body to block. Also set the text on the button to V.
function highlightArticle()
Find the article in which the button that was clicked belongs.
If the text on the button is +, then add the .highlight class to the article and set the text on the button to -.
If the text on the button is not +, then remove the .highlight class from the article and set the text on the button to +.
function expandArticleBody() {
const allBtns = document.querySelectorAll(".expand_button");
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
let parent = event.target.parentElement;
let text = event.target.innerHTML;
if(text !== "V"){
parent.style.display = "block";
event.target.innerHTML = "V";
} else if(text == "V"){
parent.style.display = "none";
event.target.innerHTML = ">";
}
});
});
}
function highlightArticle() {
const highlight = document.querySelectorAll(".highlightBtn");
highlight.forEach((btn) => {
btn.addEventListener("click", (event) => {
let text = event.target.innerHTML;
if(text == "+"){
event.target.classList.add(".highlight");
event.target.innerHTML = "-";
} else if(text !== "+"){
event.target.classList.remove(".highlight");
event.target.innerHTML = "+";
}
});
});
}
Even I set forceParse option to false, when I paste a text into the input box, it auto set to today.
For typing, I can type in any letters, but for the pasting (ctrl + v) is not working, if the pasting text is not in the correct format then.
How can I disable(ignore) the paste auto-collect action so that I can paste any letter into the input box? I do formatting manually when blurring from the input box.
$('#yourcalenderid').datepicker({
forceParse: false
});
http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#forceparse
As commented, in bootstrap-datepicker.js line 508 change it to the following
paste: function(e){
/* var dateString;
if (e.originalEvent.clipboardData && e.originalEvent.clipboardData.types
&& $.inArray('text/plain', e.originalEvent.clipboardData.types) !== -1) {
dateString = e.originalEvent.clipboardData.getData('text/plain');
} else
if (window.clipboardData) {
dateString = window.clipboardData.getData('Text');
} else {
return;
}
this.setDate(dateString);
this.update();
e.preventDefault(); */
},
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';
};
I'm using Chart.js (doughnut chart) and I would like to ask if is there any choice to highlight area programmatically? I mean - when I click on a button, then the specific area will be highlighted.
Thanks for your reply.
Just loop through the doughnut segments, match based on label and swap / restore the fill color.
function highlight(label) {
myDoughnutChart.segments.forEach(function (segment, i) {
if (segment.label == label) {
if (segment.fillColor == segment.highlightColor)
segment.restore(["fillColor"]);
else
segment.fillColor = segment.highlightColor;
myDoughnutChart.render();
}
})
}
Fiddle - http://jsfiddle.net/35of1Lzg/
I've disabled tooltips and the tooltip highlight by setting tooltipEvents = [], but if you want them back you can always remove it from the options, but then hover / mouseout and the button click will do the same thing.
To popup the tooltip too when highlighting use this
function highlight(label) {
myDoughnutChart.segments.forEach(function (segment) {
if (segment.label == label) {
if (segment.fillColor == segment.highlightColor)
segment.restore(["fillColor"]);
else
segment.fillColor = segment.highlightColor;
myDoughnutChart.render()
}
})
var activeSegements = [];
myDoughnutChart.segments.forEach(function (segment) {
if (segment.fillColor === segment.highlightColor) {
activeSegements.push(segment)
}
});
myDoughnutChart.showTooltip(activeSegements, true)
}
http://jsfiddle.net/jdr5381e/
FYI the fiddles are no longer working, you'll need to replace the links to the Chart.min.js
I used these to get them working: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js
The functions below I'm using to add my custom buttons to the TinyMCE. The buttons are displaying fine while in the "Visual" mode. However, when I switch over to the "Text" mode, I'm not seeing them.
In the script below, I've commented out the lines that filter for rich_editing mode. What am I missing?
function addbuttons() {
global $page_handle;
// Don't bother doing this stuff if the current user lacks permissions
if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') )
return;
// Add only in Rich Editor mode
//if ( get_user_option('rich_editing') == 'true') {
$svr_uri = $_SERVER['REQUEST_URI'];
if ( strstr($svr_uri, 'post.php') || strstr($svr_uri, 'post-new.php') || strstr($svr_uri, 'page.php') || strstr($svr_uri, 'page-new.php') || strstr($svr_uri, $page_handle) ) {
add_filter("mce_external_plugins", array (&$this, 'add_tinymce_plugin' ), 5);
add_filter('mce_buttons', array (&$this, 'register_button' ), 5);
add_filter('mce_external_languages', array (&$this, 'add_tinymce_langs_path'));
}
//}
}
function register_button($buttons) {
array_push($buttons, 'separator', 'nextpage' , 'CustomCodes' );
return $buttons;
}
function add_tinymce_plugin($plugin_array) {
$plugin_array['CustomCodes'] = $this->path . 'plugins/custom/editor_plugin_src.js';
return $plugin_array;
}
function add_tinymce_langs_path($plugin_array) {
// Load the TinyMCE language file
$plugin_array[$this->pluginname] = CB_ADMIN . '/tinymce/langs.php';
return $plugin_array;
}