I followed draft-js document to create a very simple demo of draft-js.
Everything seems work well, but when I open the url in Chrome, I can only see a white blank page (there is a hidden editor component there but is not visible)
There is no error on the console of the browser.
The demo project is here: https://github.com/js-demos/react-draft-js-demo, you can clone it and follow the readme to run it.
I have reviewed the code very carefully, but can't figure out why.
If you just use the sample code on the official website of Draft.js, you will see nothing on the page. It's just a blank text input field. If you click that field, you could type something. Draft.js is not a out of the box plugin, but a "a framework for building rich text editors in React".
Hope you figured it out, if not (or for anyone else), the solution for me was two step:
Download the Draft.css file and include it in your source code.
Reference said file in your index.html as such:
<link rel="stylesheet" href="./src/components/Draft.css" />
In other words, your problem was to do with the styling of the Draft-js Editor, since for you the editor was 'hidden' i.e. without any discernible box around it etc.
Actually, I tried a lot to solve this problem but in vain. What I did is using another package that is built on the top of draft js, and It's working fine.
you can find it here:https://jpuri.github.io/react-draft-wysiwyg/#/
I'm no genius, but might I recommend this:
https://www.youtube.com/watch?v=XGxdCXyMC7k
In short, it looks like the default is just a Rich Text Editor enabler type thing. You want more of a single instance, like their demo in the 'Rich Styling' section of the docs.
Related
I'm a bit diving into a rabbit hole when it comes to implementing a rich text editor. Currently using react-quill, but want to implement a concept of template variables and/or allowing users to choose templates.
I know there is TinyMCE out there, but the self-hosted setup is very unstable and the cloud provided setup is not stable in the country I am residing. :(
I am pretty much looking into implementing something similar to this:
https://ambassify.github.io/tinymce-variable/
That would replace {{ mustache }} syntaxes with a bit more visual appealing element, that cant be edited but can be deleted.
So the thing I tried so far was using this as an example to insert Embed/blots in the QuillJS text editor. But this doesnt really insert things using mustache syntax, and also when a user chooses a whole template, then the variables are not being highlighted.
Example of a template a user could choose:
Hey {{ receiver.fullname }},
Some message here
Thanks!
{{user.first_name}}
{{user.company.name}}
How it shoud look like:
The user has the option to edit the template they chose, and after clicking on send. Taking the same template they edited (with the variables) to the next email window.
So my question here is, does anyone have a recommendation on how to accomplish this and which wysiwyg-editor might offer the right solution for this (besides TinyMCE)?
I recommend you to use tiptap framework.
This is an headless wysiwyg that gives you full control on the editor.
They provide a simple extension system which could perfectly match your need.
React Mentions does this very nicely IMO. You can use markup and displayTransform attributes to transform the entry into a tag like structure. Also the data attribute will let you define the available selections.
I'm using react-select to create a dropdown for an open-source application which uses React/Redux and Electron. I'm using the bog-standard example code provided by react-select for this. However, when running, while the select box shows, clicking it seemingly does nothing. The dropdown that's meant to appear does not. When inspecting the HTML sources, it shows that when it's clicked, something does appear in the HTML, but this isn't visible in the app.
This is quite a large application and I don't know how much value there is in posting snippets of code; this one file alone is 500LoC. Does anyone have any ideas why this might be happening though?
The problem was the "overflow" option of the CSS was set to "hidden" by default. Setting this to "visible" in the CSS resolved this and now I the box appears as intended.
If anyone else has a similar issue, pause the application at runtime using the "debugger" command in console and check the CSS stylings of the element in question. I found this by accident but could help for future!
I'm working on a couple of features for a project that I created a few months back when I was first learning React. I wanted to add a wysiwyg editor to one of my forms so that a user could have more control with the "about" section of an event page (i.e. embed media and images, html source code editing, font formatting, etc.)
The editor that I'm using is TinyMCE 5.0.
This project is a Rails backend and React frontend. (I'm not using Redux - this project was a way to practice React when I first learning it.)
You can find my last commit here if you would like to see my code
The Problem
I'm able to get the wysiwyg editor rendered. I can also type and format text inside the editor's body. When I click on the code icon or image embed icon (like in the gif below), a new modal appears but when I click into it to type, the text cursor appears and then disappears. So I can't type and it seems that the text area and fields become inactive (for lack of a better term - I'm still somewhat in the beginning of my coding journey.)
I just signed up and TinyMCE gives access to premium plugins as well, so I don't think it's an issue with my account permissions/subscription.
I'm also not receiving anything in the console but if there's any help you can provide, it would be appreciated!
Thanks!
TinyMCE 5 editor - text cursor issue - text areas become inactice
It is highly likely that the library you are using for your modal (that contains TinyMCE) is not allowing focus to go elsewhere. As you have not stated the library you use for your modal I can't tell you anything about how to address this but we know this is an issue with common libraries like Bootstrap:
https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog
Whatever you are using should have a similar ability.
In the screenshot below we see the (useful!) source code for an XYPlot chart. The problem is - well if I were to actually want to use the code .. how to do it? Notice that the Edit menu item is disabled. So presumably there may have been cut and paste there .. but ..
So is there a workaround for this (well .. besides whipping out iTerm, cutting to the directory of the source and launching vim manually ..)
This is an oversight in the demo application. The 'Edit' menu is used to copy and paste chart images when charts are being viewed. The menu is disabled for the other tabs.
It does, of course, make sense that the user should be able to copy and paste the demo source code from the 'Source Code' tab rather than be required to find the relevant source file in the download. I will update the code to enable this.
I tried to fix this in source code. However the whole ant/build.xml and even the codebase are broken in multiple ways.. See here: JFreecharts Demo Code does not build? . I have contacted Object Refinery about a series of issues in their demo build script and setup.
This is a hard question to search for as "help" and "documentation" generates a lot of false hits. I basically want to show some simple documentation or help in my Silverlight app. And I don't want to write this in XAML, obviously, so I would love to be able to add a WordPad (or similar, free and easy) document to my app that would get display with some basic formatting in Silverlight.
Any ideas?
Try embedding an iframe using an iframe overlay, then you can load any HTML-like content.
There is an excellent explanation of how to do this here:
http://www.wintellect.com/cs/blogs/jlikness/archive/2010/09/19/hosting-html-in-silverlight-not-out-of-browser.aspx