I'm using CKEditor 5 as a text editor in a React app. I have a button on a page which when clicked will insert the text "Button was clicked" inside the CkEditor. How can i achieve this? I know CKEditor has the setData method but how will my button click even be able to access the CKEditor?
My ckeditor
<CKEditor editor={ClassicEditor} />
My button
<Button onClick={this.handleClick}>Click Me</Button>
handleClick
handleClick = e => { /* setData in the editor */ };
Step 1:
Before Handle click in ckEditor declaration you need to handle onInit method.
In onInit method CkEditor will give you an instance of editor. You need to save this instance in your local variable.
Step 2:
inside handle click you can use this:
editor.model.change(writer => {
writer.insertText("Button was clicked", editor.model.document.selection.getFirstPosition());
});
Related
i'm new in react, i have a button and i'm using google 3D-model viewer. I want when i click on button then take value of button which is an image and render it to the 3D model, my problem is in the button :
<Button id="normals2" value="/WaterBottle_normal.jpeg" type="submit" onClick={handleClick}>Generate</Button>
and im handleClick function i have
document.querySelector('#normals2').addEventListener("submit", (event) => {
createAndApplyTexture('baseColorTexture', event);
});
Hello i want to loading a button when i am clicking it. My problem is that my buttons are created dynamic. I am using antd styling for the button. My code is below
<Button
loading={this.state.myLoader}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
I was trying using inside onclick method a state that can become true when this function in executed, my problem with this is when i click a button all the button are loading, but i want to loading only the selected button. How i can do this? Inside my onclick method i can take the id of the button that is clicked every time
Try this
this.state = {
myLoader: []
}
In onClick pass the index to the function
this.myFunction = (r, i) => {
const loader = [...this.state.myLoader];
loader[i] = true;
this.setState({myLoader: loader)};
}
in the button
<Button
loading={this.state.myLoader[i]}
onClick={() => this.myFunction(r,i)}>
Clickme!
</Button>
Google recently announced a new way of user-signing-in here.
https://developers.google.com/identity/gsi/web?hl=en
With this tutorial, the button was created by adding HTML code or javascript.
which looks like,
But since the button is all created and rendered in a new Iframe, I can’t customize the button style as I want.
Is there any way to change the button style as it was offered before?
Previously, I used
window.gapi.load('auth2', () => {
const auth2 = window.gapi.auth2.init(options);
auth2.attachClickHandler(
idButtonRef.current,
{},
onSuccessCallback,
onFailCallback,
);
});
idButtonRef.current is the button and all I need was just attach the button and eventlistener as the above code shows. So I was able to create the button style as I want.
Is there a way to do this with a new way of google user signing?
It's my own (and not elegant) way to customize button. I make "right" Google button invisible and then add click handler to my custom button. We need to trigger click() on div with role=button attribute.
My example with plain JavaScript, but you should easily make something similar with React.js:
CSS:
.g_id_signin {
display: none;
}
HTML:
<div id="g_id_onload"
data-client_id="{{GOOGLE_CLIENT_ID}}"
data-login_uri="http://localhost:3000/google"
data-ux_mode="redirect">
</div>
<div class="g_id_signin"
data-type="icon"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<button id="custom-google-btn">Continue with Google</button>
JavaScript:
const googleBtn = document.getElementById('custom-google-btn');
googleBtn.addEventListener('click', () => {
document.querySelector('.g_id_signin div[role=button]').click();
});
I have multiple button on the screen , I want that user either click this button to route to the new item or user could have close this , for that i have given the close icon within the button so that user can close that if they want , but when i am trying to give onclick function to the icon within the button it does not work
how could i do that ???
Here is the demo code
https://codesandbox.io/s/material-demo-rbkr8
try wrapping it with a div onClick like this?
const doSomething = () => {
alert('click here');
}
<div onClick={doSomething}>
<DeleteIcon className={classes.rightIcon} />
</div>
I am happy I can use font-awesome in my projects. I want to put some bars as my open/close button for my menu. The icon itself is not clickable, but the small area between the icon and the border still activates the onClick. The console.log I put in my event handler shows that the icon does not pass the 'name' property needed to activate the state change. Does anyone know how to get around this?
I have tried wrapping it in span and i elements. The icon does show up, but is just not activating the onClick, probably because it is not passing the 'name' property.
My event handler:
menuClick(event) {
/*event.preventDefault();*/
const name = event.target.name;
console.log(name);
this.setState({[name]:!this.state[name]})
}
My button:
<button
name="menuOpen"
style={props.data.menuOpen ?
buttonStyle :
null}
onClick={props.menuClick}
className="menuOpenButton">
<FontAwesomeIcon name="menuOpen" icon="bars" size="3x" />
</button>
and the props are being passed to the child like this:
<Header
data={this.state}
menuClick={this.menuClick} />
Changing the event handler to look for the currentTarget fixed it.
const name = event.currentTarget.name