I am building a web app that allows users to write their own html pages using the Froala editor integrated on my website.
The editor works really well and provides a great degree of control as well but, there is a small problem I am facing with the bold button. If you highlight some text inside the editor and click on the bold button, in the editor the text does become bold but in the corresponding html which is generated has a simple <strong> tag around it. Now when you load that html on a browser when it is delivered via a link or any other service, it does not show up as bold unless we write some css for it.
What I would like to know is:
Is this the correct behaviour?
Is there any fix or option that we need to control on Froala to make
it look bold?
Apart from writing custom css for it, if there are any options please let me know.
You can check out the said behaviour on one of the demo pages they have: Froala Demo
Thanks in Advance!
PS: Let me know if you guys need code samples from my end, I have not done anything(custom) apart from the samples available on their website.
Related
I have a froala editor integrated into one of my web applications which is based on net core 3.1.
I use the code view to write html pages in it and switch back to the html view before I save the page to the DB. Every time I insert a form tag on the page and switch back to the html view and then back to the code view I notice that Froala has removed the form tags entirely!
Can anyone please highlight the issue here?
Settings I have tried:
htmlUntouched: true,
htmlRemoveTags: [],
And as per the Froala doc:
The form tag is definitely allowed. So I fail to understand what is going wrong here.
Please let me know if you know the solution or any ideas would be greatly appreciated!
Thanks in Advance!
This appears to be a problem with browsers stripping out the <form> tag when the Froala editor is itself on the page inside a parent <form> tag. One suggestion in the github bug reports is to change the settings to iframe: true, although that may lead to other undesired consequences.
I am trying to use a text editor (without using an IDE e.g. eclise/IntelliJ) where I can analyse an HTML file e.g. which tags are unevenly used and also format HTML documents in a way that it picks up each tag and organises so that the document is more human-friendly.
I currently have notepad++ and Sumblime Text 2 on my machine. If there is any specific plugin that helps to do the job, could someone please advise?
** REASONING **
I have a messaging service that uses email templates and one of these has a bug somewhere. It's generating a misaligned (i.e. odd) tag which can be visible if I was to put it in some audit trail (gets picked up in a tabular view). I would like to use a text editor to check the buggy tag.
KR,
In notepad++ you can do that if your open and closing tags are below eachother for example
<div>
something here
</div>
but if you have it inline like this
<div>something here</div>
you cannot do much with it.
Is this what you are asking?
Also if you want the vertical tab lines to be visible click on the "show indent guide" in the top toolbar
There are several online tools that can format the HTML for you. Do a quick Google search for "online html formatter" and try a couple out. Some will provide more options than others. Once formatted properly, it'll be human readable and probably be pretty easy to spot the stray tag.
I've create one blog using html5 and css3. I need to add new posts on that blog by clicking a button. If I'll click that button one text area has to be open and it'll have the options like adding image, video and text. For example the text area that will be used to create questions in stack overflow site. Please help me to make this one...
Regards,
Sandra
You need to use some sort of server side language. You can use PHP/ even add your theme in wordpress so that you can add required functionality
You have to use a rich text editor wrote in Javascript ( you can find some on Internet) and also, you have to write some PHP to send the the input from textarea( when click on submit or publish button) to a table in database.
Examples of rich text editors:
http://www.tinymce.com/ and
http://nicedit.com/
About the php part, you can find some examples on http://www.w3schools.com/php/.
Now this is very tricky thing. I have recently seen that many blogs do have facebook comment plugins where anyone can comment and place relevant links.
But the problem is those links are in text and are not hyperlink or you can say not clickable.
I found here in this article post right down you can see a facebook comment plugin, there you can see a text link is a hyperlink.
http://www.huffingtonpost.com/2014/11/25/black-friday-apple-deals-2014_n_6211754.html
Now my question how did that user do that? i mean from text to hyperlink. Becz normally it won't happen.
I have searched lot of stuff in google but i am not able to get the correct method.
The user doesn't make something that looks like a hyper-link display as a hyper-link, the webpage does!
What happens is that the scripting behind the page is using a reg is looking for a regular expression to pattern match URLs in the comments. When a match is found it'll be displayed as a hyper-link, if it doesn't match the regex it just displays as flat text instead of a hyper-link This either built into the Facebook comment plug-in or the website itself.
When text gets passed to HTML it has no way of telling what is and is not a link However if you process it through a script to identify links as being links you can tell it to display them as hyper-links rather than just plain text.
A great example/explanation of this is over at http://regexr.com/39i0i
Tl;Dr
Users don't make it happen, the plug-in/webpage make it happen.
With the exception of plug ins that require you use link tags, in the case of the page you linked though that is all that version of the Facebook plugin.
I have a textarea where I let users write some HTML.
They can then click a "Preview" link that triggers ajax that sends the raw HTML to a controller that uses JSoup to sanitize it (it returns the sanitized string).
I then display the sanitized HTML in a modal dialog box.
This all works wonderfully except that the modal dialog box has CSS styles cascade down from the rest of my site, and I want to display the HTML preview without any styles.
I've searched a lot (e.g. I found Any way to display some heavily-styled HTML in isolation from the rest of site's styles?) but wasn't able to figure out a solution.
I appreciate your help!
-Ryan
You could write the preview to a text file on the server then open an iframe to it with a template absent of the site's css.
I bet your problem stems from generic css selectors though. Things like
div p{
background:#fff;
}
Or maybe not so generic, but so non specific that it is being caught by your preview.