Classic Rich Text Format in a webpage - javascript

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.

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.

I've got RTF in my clipboard. In node.js, how do I modify it without losing the formatting?

I'm trying to automate the modification of text in an online rich text editor. Here is a similar example of the type of text editor I'm talking about: https://www.slatejs.org/examples/richtext The one I'm dealing with is more sophisticated: it allows you to have links in your text.
I've figured out how to get this RTF text into my clipboard. I've also figured out how to paste my clipboard into the text editor. But, what I haven't figured out is how to modify the RTF in my clipboard in an automated way; I can paste it into Google Docs, modify it by hand, copy it, and then paste it back in, but I don't want to take those manual steps.
To keep it simple, let's say I want to prepend a line that says Link and goes to www.example.org when you click on it. I want the rest of the content to remain the same.
I don't really care what kinds of crazy steps I have to do between having the code in my clipboard and getting the modified version back in my clipboard, so long as it's automated. I'm developing in node.js, so I'd like a solution in that language.
I've been googling for a while now, and I can only find libraries that convert from RTF to something, or vice versa. I haven't found any libraries that actually modify the RTF and keep it as RTF.

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.

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.

Which wysiwyg editor in Drupal will give me most control over markup?

At the moment I'm using the wysiwyg module for Drupal with tiny_mce. However, it keeps inserting all kinds of superfluous spans and other trash elements in my markup. I want to use wysiwyg mostly for semantic markup with css classes, any inline styles are a problem, because I have to clean up my html by hand - sort of defies the purpose of having a wysiwyg editor altogether. What other wysiwyg editor should I try, which will behave more sensibly?
WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.
BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.
In my experience ck editor is a very good solution.
The only problem i have seen it have is drop a instead of leaving a box blank
It has paste plain text and paste from word features that prevent extra markup from being dropped in
When working with a cms i think what is important usually is not how well you can enter markup, as a developer you can usually just use a text area and drop html, but how the editors will enter content.
Ck editor usually produces very clean results, as long as direct pasting from Word does not take place
As people have helped me out in the comments, there are two ways to integrate it with Drupal
WYSIWYG API module, and standalone module cKEditor
I really wanted to go with CKEditor myself but after trying to get rid of that adding breaks and spaces everywhere stuff I had to revert to plain text input.
I am currently considering markitup!, which you may want to investigate as well.
I am hopeful as I have good experiences with it on WP but I didn't get to try it on Drupal just yet.
I would suggest BUEditor, you can configure all buttons and thus control the output
Unfortunately I have yet to find an editor that doesn't try to mess with your code in one way or another. In Drupal, I've tried TinyMCE, FCKEditor, and CKEditor. In non-Drupal projects I've used Ephox EditLive and the YUI 2 Rich Text Editor. All of them try to "fix" or autoformat your code in one way or another, and to that end they are all frustrating. Of that group, Ephox EditLive is the worst offender, and ironically it's the only one that isn't free.
I've resigned myself to plain text editing in Drupal whenever there's a slight chance I may need to control the underlying HTML. My WYSIWYG editor is off by default; I whitelist pages in as needed. It's tedious, but for me it's better than playing tug-of-war with the WYSIWYG for control.

Categories

Resources