I am planning to develop a blogging platform using the MERN stack, and I need a rich text editor for editing the blog posts. The editor should be programmer-friendly. I was thinking about an editor like that StackOverflow is currently using, where we can add code snippets and run them at the same time.
So are there any react libraries that provide that kind of functionality with a rich text editor?
Or do I have to get a library like react quill and modify it according to my requirements? And I want to know whether it is possible to add such functionality.
suggestions are greatly appreciated.:)
there's few good editors you can use for that purpose. below are some of my recommendations
if you want a github like editor ( the github markdown editor ) https://uiwjs.github.io/react-md-editor/ this will be a really good choice. it comes with code highlighting and all those cool features by default with GitHub inspired styles.
in case you are more interested in to stack-overflow type editor i can recommend you the Stack Overflow's Combination Rich Text / Markdown Editor. you can find it from https://editor.stackoverflow.design/
if you are more interested on simplicity and want something more simple without lot of features i can recommend you https://www.npmjs.com/package/react-markdown-editor-lite this editor. for the most part its all right
also there's many more other choices like Facebook's draft.js. but i think above text editors will be better choice for your use case.
Related
I know that is possible to programmatically format a text in Codename One using something like "Rich Text View". But in my use case the user can do basic formatting of the text.
For example, see the following two screenshots of the Protonmail app. How can I do something similar with Codename One?
In the first screenshot, "Taglia" means "Cut" and "Copia" means "Copy".
In the second screenshot, "Grassetto" means "Bold" and "Corsivo" means "Italic".
We don't support that. This behavior is very inconsistent between platforms and pretty limited in all native platforms so implementing it in a cross platform way isn't practical.
However, since all platforms have good HTML5 support it's pretty easy to implement it with a WebView by embedding a web based rich edit widget. Since these consistently work with HTML the results are cross platform and should be easy to work with. In the past we had a CKEditor cn1lib but I think it's out of date by now. The core concept should work though and should be much easier to implement as we now support the html package for deploying web resources. So you can take any HTML based text editor and just place the files under the src/html directory then open that hierarchy for editing.
What is the easiest way to implement WYSWYG in react that can support formatting as what we have here on stackoverflow that we can easily format code blocks or even better as what we can see on medium site?
You can try Draft.js
Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
Sorry if you find this question silly or off-topic but I have the following issue. I am experimenting with ReactJS and trying to write simple blog-like Single Page Application.
I want users to write posts on my blog with rich features for text decoration. So I am going to allow them to use some html tags. The problem is: what is the best way to render users' input data?
I simply can get their html input, escape dangerous html tags (like script etc.), and then just use dangerouslySetInnerHTML to render raw html. Is it a good approach? Are there some ReactJS specific features to solve my problem?
Thanks!
No, if you can, avoid dangerouslySetInnerHtml. This is also stated in the offical react documents:
In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.
One possible approach would be to define a specific input format as #canaan seaton stated.
My idea would be to use a component like draftjs to render rich text content and to give the editors the ability to see what they get (wysiwyg). Draftjs is really easy to understand and there are plenty resources and additional packages (like syntax highlighting, ...) out there.
Off course you can also use any other rich text editing component.
The Quill documentation says:
Users have already used [Quill] to add embedded slide decks, interactive checklists, and 3D models.
In the interest of learning Quill better, can anyone point to specific examples of these types of Quill projects on the web?
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.