Sunday 5 April 2020

TinyMCE example with toggle using on blur event

<script type="text/javascript">
    $(document).ready(function(){
             
            function add(){
                       return  tinyMCE.init({
                        selector: "div#questionEdit textarea",
                        plugins: [
                            "advlist autolink lists link image charmap print preview anchor",
                            "searchreplace visualblocks code fullscreen",
                            "insertdatetime media table paste imagetools wordcount"
                        ],
                        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                        media_dimensions: false,
                        
                        browser_spellcheck : true,
                        media_live_embeds: true,
                        mediaembed_max_width: 450,
                        height : 150,
                        extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style|face]",

                        theme_advanced_toolbar_location: "top",
                        theme_advanced_toolbar_align: "left",


                        setup: function(editor) {

                            editor.on('blur', function(e) {
                                var questionId = $(".questionEditLayout .questionNoLayout").attr('id');
                                var description = $("#" +questionId).attr('description');
                                //var questionContent = $(this).val();
                                var questionContent =editor.getContent();

                                if(questionContent=='' ||questionContent == null ){
                                    if(description){
                                        $('.questionEditLayout #questionEdit').slideDown('slow').before('<p class="panelerror">Description should not empty!</p>');
                                        setTimeout(function () {
                                            $('.panelerror').slideUp("slow", function(){
                                                $(this).remove();
                                            });
                                        }, 3000);
                                    }else{
                                $('.questionEditLayout #questionEdit').slideDown('slow').before('<p class="panelerror">Questions should not empty!</p>');
                                    setTimeout(function () {
                                        $('.panelerror').slideUp("slow", function(){
                                            $(this).remove();
                                        });
                                    }, 3000);
                                }
                                }

                                /*else if(questionContent.length>1500){
                                    $('.questionEditLayout #questionEdit').slideDown('slow').before('<p class="panelerror">Maximum length of hte question should be 1500!</p>');
                                    setTimeout(function () {
                                        $('.panelerror').slideUp("slow", function(){
                                            $(this).remove();
                                        });
                                    }, 3000);
                                }*/
                                else{
                                    $("#" + questionId + " .questionListContainer div.error").hide();
                                }

                                //$("div#dragContainer #addDescription").append(question);
                                if(description){
                                    $(".quizLayout #"+questionId+" div.addDescription").html(questionContent);
                                }else{

                                    $(".quizLayout #"+questionId+" h2.questionLabel").html(questionContent);
                                }
                                //on focuss out remove tini mce
                                editor.remove();  
                            });
                        }
                });  
   
            };
            
            //add tinymce on click
            $("textarea#question_editor").click(function(){
                return add();
            });



    });
</script>

No comments:

Post a Comment