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.
Related
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 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.
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.
I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.
I am using the Ace Editor, but I do no use JavaScript a lot so I'm finding it hard to make it actually work without a proper documentation.
I'm working on a local PHP file editor.. so open files etc, works fine, setcontent works like a charm. But now I want to save the editor's information back to the file.
In itself not really a problem. But how do I retrieve the var code.
If I use document.write it will not show the current information in the editor
If I could print out what is in the editor I could save the data. But I don't know how to provide a valid callback for getValue
Can someone please give me a little bit more information on what to do?
Simply say:
editor.getSession().on('change', function(){
editor.getSession().getValue();
});
editor.getSession().getValue()
Where editor is the instance of the editor. If you're using jQuery along side of Ace, what I've been doing is preserving the editor instance on the DOM element.
var editor = ace.edit('...');
$('#editor').data('editor', editor);
Later on if you need to get the value back you can then just do...
$('#editor').data('editor').getSession().getValue();