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.
Related
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.
Two IMPORTANT clarifications first:
1. I'm looking for advice about VS2017/19, NOT VSCode.
2. I've looked through other threads about this. Link them if you so desire, but please explain what you want me to see in those threads.
Problem:
When I write html in a .tsx file, it does not autocomplete the html tags. (It does recognize the html tags, however - no problem there).
Attempted solutions:
1. In tools > options > text editor, I looked for settings pertaining to JSX. Under HTML I see the setting for autocompleting tags. However I do not see anything for JSX. I see typescript, but there are no settings there about jsx.
2. I've looked into creating my own legacy language service. This looks like it may work but is sort of reinventing the wheel. I can't believe it would be so hard to get autocompletion in JSX.
3. There may also be some extension I can write? I'm not familiar with writing vs extensions.
On learn.microsoft.com/en-us/visualstudio/javascript/javascript-in-vs-2017?view=vs-2019#/JSX they say "JavaScript in Visual Studio 2017 has rich support for the JSX syntax that allows HTML tags within JavaScript files." It really seems to imply that what I'm looking for exists... somewhere.
Any help is appreciated. Thanks.
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.
I have a problem using the their latest WPL v 4.2.1. The stripping of suspect HTML, javsacript and styling is so aggressive it strips out ALL the CSS.
I understand that CSS can be easily used to inject malicious javascript using URL references, but this also means im losing all the innocent styling that makes my content look readable. The last thing i want displayed on my aspx pages is boring 'plain' text.
My question: Is there another library on the market/the web which I can use which will not strip off my styling elements completely? By that i mean selectively removing only the possibly malicious attributes within the CSS.
I have tried searching but without much luck. If anybody knows of one, could you post the answer here please? I know the current source code can be modified but I'd really like to use an available project if there is one as i'm not very knowledgeable with cross site scripting.
Thanks a ton!
I am working on a news web page and I will like to know what are the best practices for storing the news articles into the database. The problem is that if I store the news articles in pure text I lose the ability to insert links or provide any HTML formatting to the news's body when I show them on the page. On the other side, I've seen that storing it already formatted in HTML or XML or any other formatting language could couple the database info to an HTML environment.
So, is there any way to accomplish this? I've been thinking in store the news both ways into the database. Is there any better approach to solve this problem?
I am using php (Symfony2 being more specific) and if the markup language are the way to do this, which one do you recommend?
Thanks in advance
Most systems that I have developed / worked on have stored both the marked up content and the original base content. The primary reason to store the original base content is that the layout (Css, styles, Html design, etc.) is typically frequent to change.
It can add significant overhead to a migration / upgrade project when upgrading the website design and then having to write custom parsers to strip out the markup.
You should use ckEditor for your link markup or HTML like
--- namelink, www.example.com ---
Then your php format it.