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.
Related
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
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'm attempting to write a an add-on for Google Docs using Google App Script that performs syntax highlighting. I'm using hightlight.js to perform the highlighting on the selected text and attempted to replace the selected text with formatted text. Is there a way to just insert the HTML returned from highlight.js, or do I need to do something more to format the text properly for Google Docs?
No, you cannot insert HTML "as" Google Docs (AFAIK). You can insert it as regular text, but the tags will be shown, etc, just like when you view a page source.
Google Docs have its own "DOM" structure and you'd have to "parse" your HTML into Docs' format. Appending paragraphs and text elements and setting their attributes. It's going to be a bit cumbersome to do, but is surely possible.
Another possibility is to upload the HTML to Google Drive and set the convert flag, letting Google Drive do this hard task for you. Then you grab the resulting Doc and append/replace it to the current document you're working on, a much easier task (but it's not a single-line code). The down-side is that it'll take that much longer for your Add-On to retrieve the value. You'd have to test it to see if that's acceptable.
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.