hurricanejames / react-tinymce-input Goto Github PK
View Code? Open in Web Editor NEWA React Component to Control a TinyMCE Input
A React Component to Control a TinyMCE Input
Hi I am using your tool for a note editing app, and I am having trouble setting the height of the input control. I can set the width by passing a style to the props of the TinyMCEInput component, but height seems to have no effect.
I have decided to use the auto-resize plugin from tinymce.
Any chance of implementing the defaultValue prop?
BTW This project is much more convenient than the default one for tine-mce!
line 134 Can you change
for(var i = 0, len = DIRECT_PASSTHROUGH_EVENTS.length; i < len; ++i) {
event = DIRECT_PASSTHROUGH_EVENTS[i];
editor.on(event.toLowerCase(), function(tinyMCEEvent) {
var handler = _this.props['on' + event];
if(typeof handler === 'function') { handler(tinyMCEEvent); }
});
with
for (var i = 0, len = DIRECT_PASSTHROUGH_EVENTS.length; i < len; ++i) {
(function(event){
editor.on(event.toLowerCase(), function (tinyMCEEvent) {
var handler = _this.props['on' + event];
if (typeof handler === 'function') {
handler(tinyMCEEvent);
}
});
})(DIRECT_PASSTHROUGH_EVENTS[i])
From React 15.5's release notes:
- Added a deprecation warning for React.createClass. Points users to create-react-class instead.
- Added a deprecation warning for React.PropTypes. Points users to prop-types instead.
This results in projects that are using that version of React to have warnings due to react-tinymce-input.
I propose going with React's recommendations, but I don't know how that will affect the backwards compatibility of this project, if you really want to maintain compatibility all the way back to React 13.
Could just be config
?
I see a error when do steps :
Thank you so much.
(My English is not good, sorry for the mistake)
Hey,
Firstly, great work on this, I tried the other react tinymce but I agree with you, it was too low level and didn't play nice when you wanted react to update the content.
Your implementation is perfect except two things..
Thanks for the awesome work!
Mike
I get an error when compiling:
Module not found: Can't resolve 'create-react-class'
Example: https://stackblitz.com/edit/react-sk9ruu
The example was based on #28, but the config value seems to have nothing to do with it. I also saw some related discussion in #19 but there hasn't been any movement on that.
In FF, if you leave a space after a word and stop, the space disappears after a short time. In Chromium, the space gets replaced with a
and thus doesn't disappear visually.
Tested in FF 62 on Ubuntu 18.04.
Edit: I suspected it might be a bug with TinyMCE itself, but in this minimal example with the latest version, I couldn't reproduce the issue.
I've found that you have setTimeout
here, and component blinks with textarea
before it shows an editor, could you make this setTimeout optional?
componentDidMount: function componentDidMount() {
this.initTimeout = setTimeout(this.initTinyMCE, 100);
this.initStartTime = Date.now();
}
I currently provide custom events for tinyMCE to allow for other components to work with the text editor,
can you provide a working example of the otherEventHandlers
code, as it's not very clear how you would run code like this:
setup: (editor) => {
editor.addButton('my button', {
icon: false,
id: 'myButtonID',
text: null,
onclick: (editor) => {
console.log(editor.getContent())
},
});
},
I'm using TintMCEInput as suggested:
<TinyMCEInput value={this.state.text} onChange={this.handleEditorChange} onFocus={this.handleFocus} onBlur={this.handleBlur} tinymceConfig={config} />
But focus is not working - blur does.
handleFocus: function () {
console.log("FOCUS POCUS!");
this.setState({
focused: true
});
},
handleBlur: function () {
console.log("BLURRED BLUR!");
this.setState({
focused: false
});
},
Hi,
I've just updated my react-tinymce-input from 1.2.0 to 2.0 and the prop 'value' can't be populated anymore, my tinyMce stay empty instead of displaying the text from its prop (which I console logged and it wasn't empty). Is there a new way to use it ?
Thanks in advance
First of all, thanks for the great job on this control! I've been happily using it in my projects.
But I'm experiencing a problem when using it in combination with the forced_root_block config option. When it's set to an empty string, the trailing space seems to get trimmed after about half a second.
So if you're typing slowly, your words don't have spaces between them.
Here's a minimal example that reproduces the issue:
https://stackblitz.com/edit/react-yhkgu9
When I update a tinymceConfig attribute, the editor is not updated.
return (
<div className={`form-group ${className}`} id={`${id}-container`}>
<TinyMCEInput
{...input}
tinymceConfig={{
plugins: 'lists',
toolbar: disabled ? false : 'undo redo | bold italic | alignleft aligncenter alignright | numlist bullist',
menubar: !disabled,
statusbar: !disabled,
height: 350,
branding: false,
skin_url: './static/assets/tinymce/skins/lightgray',
readonly: disabled ? 1 : 0,
entity_encoding: 'raw',
relative_urls : false,
document_base_url : "/",
}}
/>
</div>
);
disabled is passed into this component via props, but has no effect on the TinyMCEInput component
Hi
I am facing an issue of this kind:
I select font size as 36pt and then if I select bold/italic/underline options, the font size resets to default. In the menu bar it still shows 36pt as selected.
Thanks
Amul
Hi,
There are issues with the peer dependencies for this project. The current version of React is 15.0.2, for some reason they went from 0.14.0 to 15.0.0 when they bumped the version.
The issue is that that react is listed as: "react": ">=0.13 <0.15"
for this project which obviously means that version 15.0.0 doesnt work. I need 15 for some other dependencies.
Is it possible to bump the peerDependency for react up to 15 ?
Cheers,
Mike
Tinymce randomly jumps on ipad.
Could you please let us know if its possible to fix this?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.