Tiny - Html Editor Control

On your website, if you want to have any html editor control, so that you can write your content and do all the html formatting via tool or you can put html to it etc..

Fyi - The below sample data is as per the implementation I have done with my ASP.net core web application but same you can apply with other language of application as well as it basically in java script.

Control name : Tiny html editor. First you have to register your self and it will give you one of the API Key which you have to use to access the Tiny js to build the control -

Login URL and get you API key : https://www.tiny.cloud/auth/login/

API Key : *********************

So the JS URL will be like : https://cdn.tiny.cloud/1/********************* /tinymce/5/tinymce.min.js

Here if you see the JS url is accessible with the API key which you got post registration. So even you can download the complete JS and then you can use offline in your code.

So here are the code example to design your control and make sure the above JS is also included in your code base. In below code base the text area  id and the tiny selector id must be same, so that it will bind with you html text area control and on form post you can get the value from the text area :

<textarea id="html_editor" asp-for="BlogModel.Details"></textarea>

                                    <span asp-validation-for="BlogModel.Details" style="color:red"></span>

                                    <script>

                                        tinymce.init({

                                            selector: '#html_editor',

                                            plugins: 'a11ychecker advcode code preview casechange formatpainter linkchecker lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker image link',

                                            image_caption: true,

                                            toolbar: 'addcomment showcomments casechange table image link code preview',

                                            toolbar_drawer: 'floating',

                                            tinycomments_mode: 'embedded',

                                            tinycomments_author: 'Author name'

                                        });

                                    </script>

Output -