Add WYSIWYG HTML Editor to Textarea Editor in custom widget

Add WYSIWYG HTML Editor to Textarea Editor in custom widget

In this Post We Will Explain About is Add WYSIWYG HTML Editor to Textarea Editor in custom widget With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Add WYSIWYG HTML Editor to Textarea on Your Website Example

In this post we will show you Best way to implement Textarea Editor – WYSIWYG HTML Editor Examples, hear for Add WYSIWYG editor & text area in custom widget with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Download Tinymce

First of all simple download latest Tinymce jQuery plugin here Download TinyMCE

Also Read :   AngularJS Single page app with dynamic meta - AngularJS SEO

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Add WYSIWYG HTML Editor to Textarea) dependencies and the HTML Elements that we have created.

<textarea name="editor-valtextara" id="myinfo-textarea"></textarea>

JavaScript

second then Unzip the downloaded this package and then your package upload Add WYSIWYG HTML Editor to Textarea tinymce folder to js Directory. Include Here JS file to webpage as shown below source code available.

 <script src="js/tinymce/tinymce.min.js"></script>

and then Insert given below scripts to change HTML textarea to Input text editor.

<script>tinymce.init({ selector:'#myinfo-textarea' });</script>

After this loading a main text Tinymce editor you will display its any types og the branding message like as a Tinymce POWERED BY TINYMCE it’s products.

Also Read :   AngularJS Cookies Set Get and Remove Cookies

So simple, If hide and show Product Message, To hide/disable simple “Powered by TinyMCE” disable message

tinymce.init({
 branding: false // here boolean true / false To hide/disable display text label "Powered by TinyMCE".
});

To set TinyMCE Text editor CSS dynemic Height and Width

tinymce.init({ selector:'#myinfo-textarea',branding: false,width: "650",height: "300" });

Full Example: Add WYSIWYG HTML Editor to Textarea

<!DOCTYPE html>
<!--
Post     : Simple Insert WYSIWYG HTML Editor to HTML Textarea Example
Author   : Happy's jayus patel
Blog     : live24u.com
-->
<html>
<head>
<title>Simple Add WYSIWYG editor & text area in custom widget on Live24u.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({ selector:'#myinfo-textarea',branding: false });</script>
</head>
<body style="text-align:left;">
<div>
<h1>Add WYSIWYG editor & text area in custom widget</h1> 

<form method="POST" style="width:60%;text-align:left;margin: 0 auto;">
<textarea name="myinfo-textarea" id="myinfo-textarea"></textarea>
</form>

</div>
</body>
</html>

Save Text editor content to Database using PHP

If you are using form with PHP get simple method , and then you can Fetch HTML textarea Data value using PHP $_GET[“editor-valtextara”] as well as if PHP post method, then simple Post $_POST[“editor-valtextara”] and save as well as store it to mysql database.

Also Read :   Restful insert update edit delete using Angularjs and PHP

$_GET["editor-valtextara"]
$_POST["editor-valtextara"]

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Add WYSIWYG HTML Editor to Textarea on Your Website And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.