Develop Reference

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

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.

How do I format code on my own website?

I'm using prettify for color coding but my code is still flat and not indented correctly, how do I format it so it looks similar to github gist or pastebin? (I'm aware you can embed from these sites but it doesn't look very professional).

If your code is flat, you will need to rewrite it - as in github. Maybe you could even find an autoformatter, but it will be as language-dependent as the highlighter.
If your code is only displayed flat, you might need a <pre> tag around it or set the css property white-space:pre to the surrounding element.

I would use gist.github.com. It looks petty professorial. If still want only CSS and you are on ruby CodeRay.

Depending on your needs, CodeMirror's automatic formatting might suit.
With their formatting extension, you can just do:
editor.autoFormatRange(from, to);
Here's a demo of it in action.
You'd also get the ability to edit your code snippets - and if you don't want that, you can turn it off with the editor.readOnly() function.

Here is what I would do, your welcome to go about it differently:
I would write my code in an editor, (like Notepad++, because it's ultra awesome).
I would make sure my code was formatted the way I wanted.
I would highlight the area of code I wanted and copy it.
I would then switch to the "html" tab in my Wordpress post editor.
I would type out an opening and closing <pre> tag. If I were using prettify I would type in <pre class="prettyprint"></pre>
I would paste my code between the opening and closing <pre> tags I just created.

What's the best method for creating a simple Rich-Text WYSIWYG editor?

I need to create a simple rich-text editor that saves its contents to an XML file using arbitrary markup to indicate special text styles (e.g: [b]...[/b] for bold and [i]...[/i] for italic). All the backend PHP stuff seems fairly straightforward, but the front-end WYSIWYG portion of the feature seems a bit more convoluted. I've been reticent to use one of the currently-available JavaScript-based WYSIWYG editors because the rich-text options I want to allow are so limited, and these applications are so fully-featured that it almost seems like more work to stip them down to the functions I need.
So, in setting out to create a bare-bones rich-text editor, I've encountered three approaches:
The first two approaches use the contentEditable or designMode properties to create an editable element, and the execCommand() method to apply new text styles to a selected range.
The first option uses a standard div element, executes all styling commands on that elements contents.
The second option uses the editible body of a window enclosed in an iframe, then passes any styling commands initiated from buttons in the parent document into its contentWindow to alter selected ranges in the contained body. This seems like several extra steps to accomplish the same effect as option one, but I suppose the isolation of the editable content in its own document has its advantages.
The third option uses a textarea overlaying a div, and uses the oninput JS event to update the background div's innerHTML to match the input textarea's value whenever it changes. Obviously, this requires some string finagling to to convert elements like newline characters in the textarea to <br/> in the div, but this would allow me to preserve the integrity of my [/] markup, while relegating the potentially-messy DOM manipulation to front-end display only.
I can see benefits and drawbacks for each method. the contentEditable solutions seem initially the simplest, but support for this features tends to vary across browsers, and each browser that DOES support it seems to manipulate the DOM differently when implementing execCommand(). As mentioned before, the textarea/div solution seems like the best way to preserve my arbitrary styling conventions, but the custom string-manipulation procedure to display rich text in the output div could get pretty hairy.
So, I submit to you my question: Given the development goals I've outlined, which method would you choose, and why? And of course, if there's another method I'm overlooking that might better serve my purpose, please enlighten me!
Thanks in advance!

Have you looked at http://php.net/manual/en/book.bbcode.php? This is your answer. If you are having doubts, then you are doing something wrong. :-)
Then use JS to track keyup event and simple AJAX to print preview of the input. Just like in stackoverflow.
NB It would be far more efficient to generate the preview using plain-js BBcode approach. However, do not overcomplicate stuff unless you necessary need it.

The problem with BBCode, Markdown, ... is that it's not that trivial for genpop. I suggest looking at widgEditor, it is by far the simplest WYSIWYG editor I've seen to date. It was developed some time ago, so I am not sure about compatibility, but it sure is an inspiration.
I would have included this only as a comment, since it does not directly answer your question, but I am fairly new to SA and could not find out how to do that. Sorry.