Comments (21)
@TinyMCE-User
@androb
@spocke
@fyrkant
from tinymce-react.
not tinymce instance. I can't use language_url , Because it will report an error with 'can't find tinymce'
from tinymce-react.
Are you using the tinymce-react component?
from tinymce-react.
@fyrkant yes,I use tinymce-react
from tinymce-react.
I'm not sure I understand the problem you are having, is tinymce not being loaded on the page or are you not able to find the tinymce instance? You should be able to set all setting as in vanilla tinymce in the init prop to the editor.
from tinymce-react.
I also think it would be great to get the editor instance. I need this instance to be able to insert content with setContent among other things. Today I'm using the global tinymce.activeEditor method but to be able to get the instance with a method (getEditor() maybe?) feels more intuitive.
from tinymce-react.
You can use the tinymce.get('ID')
to get the instance of the editor, where the ID is the one you set on the component <Editor id="ID" />
. Or use the editor as a controlled component: https://github.com/tinymce/tinymce-react#using-as-a-controlled-component
from tinymce-react.
Ah, sorry clicked the close button.
from tinymce-react.
It's just a matter of preference I guess. The setContent-call was just an example. I'm using more methods under the editor-object (https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/). It's nice to not being forced to use the global object when using the editor within a React component.
from tinymce-react.
Where would you want a getEditor
method though, can't really put a method on the <Editor />
component right? 🤔
from tinymce-react.
I get the Editor instance by:
<Editor ref={node => this.references.editor = node} />
Then I would like to be able to use:
this.references.editor.getEditor().<api-method-here>
from tinymce-react.
I don't like using the ref prop like that, ref
should only get the html element reference. You could use the setup callback in the init object to get a reference to the editor instead if you don't want to use the tinymce global. I think something like <Editor init={{ setup: (editor) => this.editor = editor }} />
should work.
from tinymce-react.
Ah I didn't think of that. That will work for me, thank you.
from tinymce-react.
Hello @fyrkant !
I'm using tinymce-react and i would like to make a simple button that apply a custom style (like a custom Bold or Italic button).
First i add my custom style
style_formats: [
{
title: 'MyCustomStyle',
block: 'div',
classes: 'my-custom-class',
},
then I add a custom button :
setup: function(editor: Editor) {
editor.ui.registry.addButton( 'MyCustomButton', {
text: 'Apply custom style',
onAction: function() {
// editor have fire but no formatter
editor.formatter.toggle(btnName);
editor.fire('change');
},
});
},
Before react i was doing tinymce.activeEditor.formatter.toggle('MyCustomStyle')
but I can't now... How can i apply a style from a button with react component (preferably without using ref or getEditor(id))? Is there a cleaner way to do so?
from tinymce-react.
@IamFonky You already have the editor in your example, right? editor.formatter.toggle('MyCustomStyle')
If you need the editor somewhere else you could store a reference to the editor from the setup function and pass it around.
from tinymce-react.
Sure but as you can see in my comment, formatter doesn't exists on the editor object (I loged it to be sure but nope)
from tinymce-react.
Strange, the formatter should be available on the editor. I can see if I'm able to help you if you reproduce the issue here codesandbox
from tinymce-react.
Here's a printscreen.
I have to go now but i'll make a simple one on codesandbox tomorow to show you.
Thx for your quick answer!
from tinymce-react.
Here you are, you can see in the codebox console that there is no formatter at all ;)
https://codesandbox.io/s/fervent-rosalind-nugp0
from tinymce-react.
I see why now, the formatter along with some other parts are set up a bit later in the editors initialization process and are not available at that point. The editor fires an 'init'-event when everything is done and at that point it's possible for you to access the formatter. With tinymce-react this is possible to do in two ways, see here: https://codesandbox.io/s/naughty-matsumoto-ycjsq?fontsize=14
from tinymce-react.
Ok, that's perfect!
Thank you very much!
from tinymce-react.
Related Issues (20)
- Chrome Browser Based Bug and high memory usage after sometime HOT 2
- Useless Image reload triggered at keyup event, when cache is disabled HOT 7
- Uploading images with TinyMCE does not replace the src attribute inside the image tag HOT 5
- Cursor jump back to start when pressed any key in the keyboard. HOT 2
- Uncaught ReferenceError: tinymce is not defined HOT 5
- The editor refreshing anytime i click on other element
- Upload large video more than 100 MB HOT 2
- Selector type doesn't support string in react. HOT 2
- react18 + tinymce/tinymce-react, use image_caption and file_picker_callback HOT 2
- Error TS for use readonly with React JS (Editor) HOT 1
- About this.elementRef.current?.OwnerDocument.DefaultView question HOT 4
- Toolbar Sticky not working properly HOT 6
- Cursor jumps to the start when I start typing HOT 4
- I found a bug while trying to use the Merge Tags feature in "codepen"
- "@tinymce/tinymce-react": "^5.1.0" NOT FIND HOT 3
- Cannot find module '@tinymce/tinymce-react' or its corresponding type declarations HOT 2
- GPL usage not working HOT 1
- [Solved] `licenseKey` is not working as intended but `license_key` did. Test failing on `license_key` HOT 1
- Issue with table border highlighting
- MIME type skin error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tinymce-react.