question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

can't edit link while using tinymce-react npm package

See original GitHub issue

Using TinyMCE react npm package and can’t edit link.

https://www.npmjs.com/package/@tinymce/tinymce-react

image

  <Editor
            initialValue={this.state.text || '<p></p>'}
            init={{
              height: '200',
              auto_focus: true,
              menubar: false,
              statusbar: false,
              plugins: 'hr lists table textcolor code link',
              toolbar: 'bold italic forecolor link | alignleft aligncenter alignright | hr bullist numlist table | subscript superscript | removeformat code',

              // allow custom url in link? nah just disabled useless dropdown..
              anchor_top: false,
              anchor_bottom: false,

              table_default_attributes: {
                border: '0',
              },
            }}
            onChange={this.handleChange}
          />

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
liesislukascommented, Jul 16, 2018

I see in package file: "@tinymce/tinymce-react": "2.2.4", check this short video:

jul-17-2018 01-42-07

All I need to do is to select text, add URL to an external page and would be great if the preselected value would be to open link in new tab. Now it allows selecting couple anchors on the page that even not exist.

I have no errors in the console or in webpack/babel.

0reactions
liesislukascommented, Dec 4, 2018

@Mohammad-Eslahi-Sani i fixed this. It was issue on my side. on the screenshot you can see that i used dialog from another dependency and it grabbed the focus. You may experience same thing. Something is taking the focus from tinymce. Or added css pointer-events rule and skips pointer events.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React integration | Docs - TinyMCE
The Official TinyMCE React component integrates TinyMCE into React projects. This procedure creates a basic React application containing a TinyMCE editor based ...
Read more >
TinyMCE not working: possible causes and fixes
There are a couple of possible reasons of TinyMCE not working - you can fix those easily and we prepared detailed instructions for...
Read more >
React Integration - TinyMCE
Integration with React is easily done with our @tinymce/tinymce-react package. This how-to shows you how to setup a project using react, tinymce and...
Read more >
URL handling options | Docs - TinyMCE
For URLs with the same domain as the page containing the TinyMCE editor. If set to: true — All URLs created in TinyMCE...
Read more >
Emulating an online document editor with TinyMCE in React
Step 1. Import and configure tinymce-react · npx create-react-app tinymce-document-editor · cd tinymce-document-editor npm install --save @tinymce ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found