Need a web-embedded editor that doesn't save in HTML - javascript

Our clients are able to edit some text on our "admin" web site, which then displays to their customers on another "client" web site. They now want the ability to add mark-up like bold, italic, underline (and combinations of the above) plus links to web pages. Unfortunately, because we use a web framework that passes the stored text through a XSLT decoder (don't ask), we can't just save their changes as HTML because otherwise it will screw up the XSLT step.
I was thinking that what I need is something like a Markdown or BBCode editor that stores the text in the database with the Markdown or BBCode markup, and then some javascript on the client side that interprets the markup into HTML. Is there such a thing?

Here are two:
http://attacklab.net/showdown/
http://github.com/openlibrary/wmd (similar or the one SO's markdown editor is based on)

Related

Showing rich text from database

I have stored rich text in my db, and now I would like to show it to the website viewers, but when I echo the content I got this:
<p>sometext</p><strong>text</strong>
I would like to remove the 'P' tags and any other tags from the text.
I have used Ckeditor to store the rich text into DB.
I could use Ckeditor to show the rich text to the website viewers, but Ckeditor is an editor and I would like only to show the rich text.
Is there any in-built php command to convert the stored text into rich text and display it on my website?
Well "rich text" is has its own format. It's not xml like. So for example, a simple file where I will try to infer formatting of:
Hello
This is bold
This italic
Looks like this in "rich text":
{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fnil\fcharset0 Calibri;}}
{\*\generator Msftedit 5.41.21.2510;}\viewkind4\uc1\pard\sa200\sl276\slmult1\lang9\f0\fs22 Hello\par
\b This is bold\b0\par
\i This italic\i0\par
\par
}
So it is not so simple to get this into HTML.
I'ts straight forward on steps to get it into html (some text parsing involved, and a loop) but from your question it doesnt seem like you are (1) aware of it's format, and (2) haven't tried to write code to make it html?
I can add to this answer if you have actually tried on how the parsing steps might go. I can add now but want to get more information so as not to provide useless code, say if you are already using an API that does the deed.
I use Draft.js with React.js but I hope this helps. if you're still facing this issue: You can see the solution in this video
Basically you have to convertToRaw, then JSON.stringify it. Then this can be sent to your backend as a string. To display it, make a GET request for that particular data, then JSON.parse it and then convertFromRaw. Pass this into another RichTextEditor as the editorState but set the readOnly={true}
Find the methods for your particular editor which allows you to convert states and display it.

How can we include a search bar to navigate within the same page by comparing the words in markdown language?

I want to include a search bar in my web page that will take me to the location in that page using the word that is given in the search, i want to code this using markdown language.
Can html,php and javascript be embedded in markdown?
You cannot do this with markdown. You can do it with javascript, so you might want to convert your md into a static website,
Mkdocs is a good solution. It will generate static html files and a full text index so you can search within your document.
You have to generate the site with python, but you can do whatever you like with the code it generates (edit the style, embed in an iframe) https://www.mkdocs.org/
Good luck

blogging app - how to save formatted text and images

I'm starting to work on a blogging app. My question is how do I save the formatted text so that it can be displayed the way it was formatted. For instance, if the editor marks a word as bold, how do I save that information so that it can be displayed as a bold text? In other words, how do I save the dynamically generated css?
There are many ways to do this. One way I might approach this is to save the post content in a format like Markdown. Then you need to use a Markdown to HTML converter that will generate the HTML and CSS for you. Alternatively, you could implement some custom formatting rules of your own, or use an open source WYSIWYG editor that might have a plugin to export to HTML that you can save.

Transforming XML to HTML on the fly, and adding JavaScript events?

I'm running a Django site with XML text stored in TextField properties. It's stored as XML rather than plain text because it's heavily annotated with information about the underlying manuscript, such as abbreviations and symbols. Here's an example:
class Entry(models.Model):
# Name and description.
chapter = models.ForeignKey(Chapter)
latin_text = models.TextField()
Here's an example of the content of latin_text:
<initial type="2">I</initial>n <place type="0"><span>Ricmond</span></place>
ten<abbr type="1">et</abbr> aeccl<abbr type="0">esi</abbr>a
de Cietriz .ii. hid<abbr type="0">as</abbr>.
I'd now like to start displaying that XML text on my HTML pages.
I know I can display raw XML by dropping it into a textarea: the issue is that I'd like to display it in a more beautiful way, with:
styling (all the abbr elements in italics, the place element in bold)
JavaScript events to let the user explore the abbreviations (when the user mouses over an abbr or place, show a pop-up explanation)
I'm not sure if XSLT can do what I need, or even if it can be used alongside HTML. So my question is:
Should I transform the XML into HTML before adding it to the Django database?
Or can I do all the rendering I need on the fly with XSLT or JavaScript?
I would use xslt to transform it and then attach events programmatically with javascript. It is data and converting it before hand prevents you then interpreting it in a different way later. Html should be layout only and separate from the data. You could translate it with Javascript but that will be intensive on the client. Xslt and css will be cleaner and attaching events in js is lightweight.
Not familiar with Django but maybe check this answer out : Can I use XSLT in Django?
Yes, XSLT will do everything you want and is heavily used by those who store XML just like you have. It is why and how XHTML came to be. For those who stored data and text in XML but wanted to present it to web browsers.
Once you have it in (X)HTML form, adding and using javascript is no different.

How to realise safe text editor for editing content

There is different content on site, which is allowed to be created/edited - news, articles, etc.
How to make correct and safe data transfer from editor to database?
I'd like to use wysiwyg editor, because potential users of this editor will be not such experienced users (Markdown and BB-code will be difficult for them, they want like in MS Word =) )
Also I'd like to add restrictions to this editor, for example: no images, only 5 colors, only 3 types of fonts, etc. (This can be done with limited controls of this editor)
My question: How to make this editor safer? How to prevent adding extra-html from user, or <script> tags. Do I have to make a html-filter of data came from database (saved content, that users wrote in editor) while rendering template page of this content (news or article)?
Should I store content in HTML-way in database? (If I want wysiwig-editor and it outputs HTML after saving). Or may be I should convert HTML from editor to bb-code or markdown (will all my limitations and restrictions) and clearing all extra-HTML... And then when getting content from database - I should convert bb-code/markdown to HTML again.
Or maybe there are easier and faster ways to making this safe?
If you are populating the text into the innerHTML of lets say a div, it allows a user to write html and display it as HTML later. However, if you don't want to let people inject HTML you can use the innerText instead. innerText works just like innerHTML but does not hit the HTML parser.
If you plan on using bb code or markdown you would parse the text for the code that needs to be converted and leave the rest as text.
You could also use regex parser to convert special characters to the HTML code equivalent then the bb code or markdown to html
Try this:
When saving to the database:
Replace known well formatted html with bb code replacing <b> with [b]. However ill formatted html will remain as typed <b > will stay <b >. Then do a regex replace on all HTML special characters ( ie < and > )
Then when retrieving from the database, you replace the bb code with html and you are all set.

Categories

Resources