blogging app - how to save formatted text and images - javascript

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.

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.

Inserting RTF content in to Quill displays plain text

I am simply attempting to insert rich text format content in to the editor via the API call insertText(), however, this is inserted as plain text. Is this intended? Is there no way to insert rtf content in to the editor via the API? If this is not possible, please suggest a better alternative.
I've tried other API calls such as setContent etc. We are currently using the DevExpress rich text editor, however it is very slow and an utter pain with our current implementation as it was made for MVC based projects, but we use a single page app built on Ember.
var quill = new Quill('#rtf-editor', {
modules: {
toolbar: false
},
theme: 'snow'
});
var bindingContext = this.get('bindingContext');
quill.disable();
quill.insertText(0, bindingContext.get('content.termsOfUseText'));
I would expect rich text format content to appear with all formatting, however it just appears as plaintext
Example of actual outcome:
{\rtf1\deff0{\fonttbl{\f0 Segoe UI;}}{\colortbl ;\red0\green0\blue255 ;}{\*\defchp \fs18}{\stylesheet {\ql\fs18 Normal;}{\*\cs1\fs18 Default Paragraph Font;}{\*\cs2\sbasedon1\fs18 Line Number;}{\*\cs3\ul\fs18\cf1 Hyperlink;}{\*\ts4\tsrowd\fs18\ql\tscellpaddfl3\tscellpaddl108\tscellpaddfb3\tscellpaddfr3\tscellpaddr108\tscellpaddft3\tsvertalt\cltxlrtb Normal Table;}
This is the sort of thing that appears in the editor, in case I wasn't clear enough.
Referring to the API documentation, it appears that Quill's insertText is not the appropriate way to do this (the text parameter appears to accept plain text and the next parameter format appears to accept the formatting that needs to be applied to that plain text).
It it not clear what kind of representation the rich text you have has, but in terms of Quill, it understands rich text in terms of Deltas and one possible way that I see to do what you intend to do is to somehow have your rich text converted to HTML and then use the quills dangerouslyPasteHTML method to insert that HTML into the editor.
Refer the documentation for more info: https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

Classic Rich Text Format in a webpage

I am trying to build a webpage in which a user can edit a Rich Text that comes from an RTF blob.
RTF is saved with "Classic format", so for example the content of the blob is like this:
{\rtf\ansi\deff0{\fonttbl{\f0\froman Tms Rmn;}{\f1\fdecor
Symbol;}{\f2\fswiss Helv;}}{\colortbl;\red0\green0\blue0;
\red0\green0\blue255;\red0\green255\blue255;\red0\green255\
blue0;\red255\green0\blue255;\red255\green0\blue0;\red255\
green255\blue0;\red255\green255\blue255;}{\stylesheet{\fs20 \snext0Normal;}}{\info{\author John Doe}
{\creatim\yr1990\mo7\dy30\hr10\min48}{\version1}{\edmins0}
{\nofpages1}{\nofwords0}{\nofchars0}{\vern8351}}\widoctrl\ftnbj \sectd\linex0\endnhere \pard\plain \fs20 This is plain text.\par}
All the javascript widgets I find online are HTML editors, so one solution is convert from and to HTML to close the loop, even if in this way I will lose some information in the process. This will work for sure.
Anyway since i need in the short term to maintain the RTF format i would prefer to edit RTF directly in the browser, any idea on how to do?
In future I plan to upgrade the edit content from RTF to HTML so any TinyMCE-like editor will work fine.
Thanks.
After doing further research all i found is this javascript library that allows only to display RTF.
It seems there is a "gap in the market": all widgets focus on HTML.
This PHP related SO question is somehow a duplicate of my question.

Does JSON store formatted text and maintain the format

I am adding a text editor to a web app. I want the user to be able to create the text as they want: bold, underlined, colored, etc. If I store this in a JSON will it maintain the format or will it just be plain text when I retrieve it once again?
I researched online and didn't come across anything that could help answer my question.
I am using NicEdit on my website
Your question is too vague. What editor program are you using? As an example: if you use tinymce, you can retrieve and store the formatting by calling:
tinyMCE.get( theTextAreaInput.id ).getContent();
This will return a string similar to:
<p><b>This is bolded,</b> but this is not</p>
EDIT: nicEdit works exactly the same way:
[nicInstance].getContent()
http://wiki.nicedit.com/w/page/521/Javascript%20API
And FYI: nicEdit recommends you switch to tinyMCE.
Nicedit is no longer under active development, you might want to try CKEditor or TinyMCE instead.
It all depends on how your editor stores the data behind the scenes. If you're storing some sort of markup (or markdown as the case may be in recent editors), then you should be ok. Otherwise, it's going to be stored as plaintext.

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

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)

Categories

Resources