I am using react.js
I'm trying to build a blog page.
there is a texterea tag to write a blog for the user.
now I want to add the function that allows users to add words that are linked.
so that when i show the text from that input words that are linked are clickable
enter image description here
like the blue words in wiki in the image above.
pardon my mistakes (1st question in StackOverflow)
I know about dangerouslysetinnerhtml. but not sure if it's the right way to do so. because then users can modify the code inside (i think). so what is the safe and right way to do so
Reading your case Markdown seems best option as it also supports links insertion. For rendering user entered markdown you may use library like React Markdown. For writing markdown textarea is fine as long as you write markdown syntax properly but you may want to consider libraries like React textarea markdown editor to make things easier.
Related
I am pretty new to reactjs. I was assigned with a task which consists of generating the "privacy policy" of the website. The layout of the page kinda looks like a readme of github.
1.header
***some points in block letters***
A. subsection
B. another subsection
- item
- item
C. a)item
b)item
I could easily do with simple header and paragraph tags with some styling. But we've included translations in the page, so all of the texts are coming from a json file incorporated with export default defineMessages() from messages.js.
Is there any way there is some kind of markup or template which will make my work easier?
n.b. Being a novice to reactjs, I tried my best to make the question as much simple as I could. Any help will be appreciated!
I added one field which is of type text as single line. Now I need to make some
of the text as underline.for example:-
He is a good employee.
I want underline in employee text. How can I add that in contentful?
👋🏻
When you're using the Markdown editor the problem the problem is not with Contentful but rather the markdown specs themselves. They do not provide the "underline" functionality.
The question about underline is a common question. The idea of markdown is to only care about content and not really the representation (e.g. "bold" translates to the html strong element which stands syntactically for important parts) though.
IMO underlined text can also be confused with links too easily.
If you have to make this work you can either bring in inline HTML (has the downside that you'll loose cross-platform compatibility because not every system can deal with HTML) or you handle the underline functionality in your application consuming Contentful with some CSS for example.
E.g. assuming that you want to highlight something in your application/website I could see that the "bold"/"strong" meaning could work for you.
Overall rule of thumb with markdown is thinking of the document structure and content rather then it's appearance. "These are important words in this paragraph" (👍) vs. "These are words that should be underlined" (👎).
In Contentful write the text under Markdown as:-
He is a good <u>employee</u>
Now in our reactjs application we can write:-
dangerouslySetInnerHTML={{
__html: employee.childMarkdownRemark.html,
}}
Hence if we render the output in the childMardownRemark.html under dangerouslySetInnerHTML then employee will come as underline in our UI.
Hi everyone I am developing an website and I wanna use one block similarly to this link https://careers.mit.edu/#block-views-facts-block.
Which it contains the flowing text and i liked it by the way so i wanna do it similar to this.
Would be grateful if any one suggest me the right way to do it.
they are using Drupal Views to output a text blocks, after custom animate function in JS/JQuery
check this file
https://careers.mit.edu/sites/default/files/js_injector/js_injector_2.js
Drupal.Careers.scrolling_text_animate
and few more to handle text position ...
animate function is quite big, you can do similar or look for an JQ plugin
I was watching some videos on Egghead.io about AngularJS. The creator of the videos uses Webstorm (and, I believe, works for them). One feature I noticed is that he can set different syntax highlighting within different scopes or quotation marks. So, in code like the following (from an AngularJS directive)
return {
template: '<div>something</div>',
// ^^^ these guys ^^^
}
...he can get the inside of the quotation marks to highlight as HTML.
I use Sublime Text 2, and am fairly wedded to it. Is there an existing feature/plugin for Sublime that could handle a case like this? If not, is something like this technically possible using the Sublime Text 2 API?
I don't think it's built in, but it's certainly possible. I've been doing some work with graphviz and wanted to do something similar. Labels can be generated with html like syntax. Anyways, I played around with the .tmLanguage file and added a new pattern to match the context where html like entries were valid (I look for label = <). The patterns I used for the captures aren't that good, but it works for fine for me. This give me the following, which I think is similar to what you are looking for.
I don't know anything about AngularJS, so I can't help you with anything specific to that, but it is certainly possible. Note that in the image below, the last <table></table> are just to show that highlighting doesn't occur there.
Edit:
Forgot to include this in the original post, but here is my updated tmLangauage file. That first pattern is what I added(link). I used PlistJsonConverter to go from JSON to plist, then saved the file as .tmLanguage. Hope this helps.
#skuroda is right, I implemented #skuroda's code with an additional plugin to easily edit HTML within an AngularJS directive JS file. The result is HTML syntax highlighting within a directive JS file and additional functionality to remove string related delimiters while editing templates.... Sublime AngularJS HTML Template Plugin
I need to insert images into the copytext of a blogpost. I tried different wysiwyg-editors and different image-plugins, but so far every plugin or editor I tried directly adds an <img>-tag into the text.
My problem is, that I want to change the markup of the images when the frontend is rendered. Is there any plugin that does not add an <img>-tag, but some short code or so that gets translated into an -tag when the field is rendered, similar to wordpress?
That way I could hook into the process and change the markup of the images...
Lately I've been working on a combination of these modules to work with customized markup:
CustomFilter
BUEditor
Markdown filter
Markdown Editor for BUEditor
BUEditor and Markdown filter will give you markup-based input that you can than manipulate via RegEx with CustomFilter.
CustomFilter is kind of confusing and a bit of a pain to use, so be ready to bang your fist into your head a few times, but it's totally worth it. It' much easier than the alternative, which would be defining your own custom filter module.