/* prakash chandra */ /* using javascript objects */ var editor={ /*parent node*/ wrapper : "

", /*1st child*/ tool_bar : "

", /* 2nd child and parent for main editor textarea and editable div */ editor_body : "

", /*child nodes..*/ text_area : "", editable_div : "

", img_editor : "

", left_image : "

", form_part : "

", inputs : '', buttons : '

' } // composer.js + handler.js part $(function(){ //jquery //composer $('.editor').before(editor.wrapper); $('.editor').hide(); var height = '300px'; var width = '100%'; var bg = '#fff;' height = $('.editor').data('height'); width = $('.editor').data('width'); bg = $('.editor').data('bg'); $('.editor-wrapper').css('min-height',height); $('.editor-wrapper').css('min-width',width); $('.editor-wrapper').css('background',bg); $('.editor-wrapper').append(editor.tool_bar); $('.editor-toolbar').css('background',bg); for (var i = 0; i < editor_tools.length; i++) { $('.editor-toolbar').append(editor_tools[i]); } for (var i = 0; i < dropdowns.length; i++) { $('.editor-toolbar').append(dropdowns[i]); } $('.editor-wrapper').append(editor.editor_body); ///fonts and headings for(var i=0;i<=6;i++){ if(i==0){ $('.dropdown-headings').append('

paragraph

'); continue; } $('.dropdown-headings').append('

h'+i+'

'); } for(var i=1;i<=7;i++){ $('.dropdown-font-size').append('

font-size :'+i+'

'); } var fonts = []; fonts[0] = 'serif'; fonts[1] = 'cursive'; fonts[2] = 'Arial'; fonts[3] = 'halvatica'; fonts[4] = 'script'; fonts[12] = 'tahima'; fonts[9] = 'Times New Roman'; fonts[7] = 'fantasy'; fonts[8] = 'mangal'; fonts[6] = 'Dancing script'; fonts[10] = 'Arial black'; fonts[11] = 'sans serif'; fonts[5] = 'monoscript'; fonts[13] = 'monospace'; for(var i=0;i'+fonts[i]+''); } $('.editor-body-wrapper').append(editor.text_area); $('.editor-body-wrapper').append(editor.editable_div); $('.wysiwyg-area').css('min-height',height); $('.editor-wrapper').append(editor.info_pannel); //image editor counter $('.editor-wrapper').append(img_wrapper.img_inner); $('.editor-wrapper .img-counter').append(img_wrapper.images_part).append(img_wrapper.img_editor); $('.editor-wrapper .img-editor').append(img_wrapper.left_image); $('.editor-wrapper .img-editor').append(img_wrapper.form_part); $('.editor-wrapper .img-editor .form form').append(img_wrapper.inputs); $('.editor-wrapper .img-editor').append(img_wrapper.buttons); $('.img-counter').css('top',$('.editor-toolbar').height()); $('.img-counter').css({'height':$('.editor-body-wrapper').height(),'width':$('.editor-body-wrapper').width()}); /* image editor form inputs */ $('.img-title').before('

image name'); $('.img-url').before('

image url'); $('.img-alt').before('

image alt text

'); $('.img-height').before('

image height

'); $('.img-width').before('

image width

'); $('.img-caption').before('

image caption

'); $('.img-align').before('

image alignment

'); /*toolbar operations--*/ $('.code').click(function(){ $(this).parent().siblings('.editor-body-wrapper').children('.editor-textarea').slideToggle(); $(this).parent().siblings('.editor-body-wrapper').children('.wysiwyg-area').slideToggle(); $(this).siblings().toggleClass('disabled'); }); $('.full-screen').click(function(){ $(this).parents('.editor').toggleClass('editor-fs'); var final_width=$('.editor-fs').width(); var init_width=$('.editor').width(); if (final_width !=null) { $('.full-screen i').removeClass('fa-expand-arrows-alt bg-danger'); $('.full-screen i').addClass('fa-arrows-alt-h bg-danger'); $('.full-screen').attr('title','back to normal'); $('.img-counter').css('width',final_width); } else{ $('.full-screen i').removeClass('fa-arrows-alt-h bg-danger'); $('.full-screen i').addClass('fa-expand-arrows-alt'); $('.full-screen').attr('title','expand editor'); $('.img-counter').css('width',init_width); } }); /* inser image button operations--*/ $('.img-button').click(function(){ var counter = $(this).parents('.editor-toolbar').siblings('.img-counter'); counter.slideToggle(); $('.img-counter iframe').contents().find('body img').on('click',function(){ var img_url=$(this).attr('src'); $('.img-counter iframe').hide(); $('.img-editor').show(); $('.img-editor').css('width',$('.img-counter').width()); $('.left-image').html($(this).clone()).append(''); $('.left-image img').attr({'width':80+'%','height':300+'px'}); //show data in editor form var img_name = img_url.split('\/'); $('.img-title').val(img_name[img_name.length-1]); $('.img-url').val(img_url); $('.img-alt').val(''); $('.img-height').val($('.left-image img').height()); $('.img-width').val($('.left-image img').width()); $('.img-caption').val('image caption'); $('.img-height').change(function(){ $('.left-image img').css('height',$(this).val()); }); $('.img-width').change(function(){ $('.left-image img').css('width',$(this).val()); }); //when insert button clicked--- $('.cancel').click(function(){ $(this).parents('.img-editor').hide(); $(this).parents('.img-counter').hide(); $('.img-counter iframe').show(); $('.left-details form').reset(); }); $('.change').click(function(){ $(this).parents('.img-editor').hide(); $('.img-counter iframe').show(); }); }); $('.counter-close').on('click',function(){ $(this).parents('.img-counter').hide(); }) });//end Composer.js part //events and handler start var iframe; $('.wysiwyg-area').each(function(i){ var editorArea = $('.wysiwyg-area')[i].contentWindow.document; editorArea.open(); // optionally write content here editorArea.close(); editorArea.designMode = "on"; $($('iframe').contents().find('body')).append(placeholder_text); $($('.wysiwyg-area')[i].contentWindow.document).on('keydown',function(e) { if (e.keyCode === 13) { editorArea.execCommand('insertHTML', false, '

'); return false; } }); $('.editor-tools').on('mousedown',function(e) { var targ = $(e.target); if (targ.is('input')) { $(this).focus(); } else{ e.preventDefault(); } }); $('.editor-toolbar a').on('click',function(e) { var command = $(this).data('command'); iframe = $(this).parents('.editor-toolbar').siblings('.editor-body-wrapper').children('.wysiwyg-area'); if (command == 'blockquote' || command == 'code') { iframe[i].contentWindow.document.execCommand('formatBlock', false, command); } if (command == 'heading') { iframe[i].contentWindow.document.execCommand('formatBlock', false, $(this).data('value')); } if (command == 'para') { iframe[i].contentWindow.document.execCommand('insertParagraph',false, 'P'); } if (command == 'fontname') { iframe[i].contentWindow.document.execCommand('fontName', false, $(this).data('value')); } if (command == 'fontSize') { iframe[i].contentWindow.document.execCommand('fontSize',false, $(this).data('value')); } if (command == 'createlink') { var url= $(this).siblings('input:eq(0)').val(); // url = prompt('Enter the link here: ', 'http:\/\/'); var url_text = $(this).siblings('input:eq(1)').val(); if(url_text===''){ url_text = url; } iframe[i].contentWindow.document.execCommand('insertHTML', false, ''+url_text+''); } if (command == 'insertOrderedList') { iframe[i].contentWindow.document.execCommand($(this).data('command'), false, "newOL" + Math.round(Math.random() * 1000)); } if (command == 'insertUnOrderedList') { // url = prompt('', 'http:\/\/'); iframe[i].contentWindow.document.execCommand('insertUnOrderedList', false, "newUL"); } if (command == 'insertTable') { // url = prompt('', 'http:\/\/'); iframe[i].contentWindow.document.execCommand('insertHTML', false, "

heading1	heading2	heading3

"); } else iframe[i].contentWindow.document.execCommand($(this).data('command'), false, null); }); $('.back-color').on('change',function(e){ iframe = $(this).parents('.editor-toolbar').siblings('.editor-body-wrapper').children('.wysiwyg-area'); iframe[i].contentWindow.document.execCommand('backcolor', false, e.target.value); }); $('.fore-color').on('change',function(e){ iframe = $(this).parents('.editor-toolbar').siblings('.editor-body-wrapper').children('.wysiwyg-area'); iframe[i].contentWindow.document.execCommand('forecolor', false, e.target.value); }) $('.insert-image').on('click',function(){ iframe = $(this).parents('.img-counter').siblings('.editor-body-wrapper').children('.wysiwyg-area'); //defining variables var img_url = $('.img-url').val(); var height=$('.img-height').val(); var width=$('.img-width').val(); var alt=$('.img-alt').val(); var img_align = $('.img-align option:selected').val(); var caption = $('.img-caption').val(); var img='

'; iframe[i].contentWindow.document.execCommand('insertHTML',false,img); $(this).parents('.img-editor').hide(); $(this).parents('.img-counter').hide(); $('.img-counter iframe').show(); $('.left-details form')[0].reset(); }); $($('.wysiwyg-area')[i].contentWindow.document).on('keydown',function(){ $('.editor-textarea').val($(this).contents().find('body').html()); }) $('.editor-textarea').on('blur',function(){ $(this).siblings('.wysiwyg-area').contents().find('body').empty().append($(this).val()); }); }); /* end handl er -*/ //drop down opener ---- $(document).on('click',".st-ed-dropdown-opener",function(){ var drpDwn = $(this).data('target'); var drpContent = $(drpDwn).children('.st-dropdown-content'); $(drpDwn).slideToggle(); if ($(this).position().left <= drpContent.width()+50) { $(drpContent).css({'top':$(this).position().top + $(this).height(),'left':+$(this).position().left}); $('.arrow-down').css('left', 0); $('.arrow-up').hide(); } else{ $(drpContent).css({'top':$(this).position().top + $(this).height(),'left':+$(this).position().left - $(drpContent).width() + 20}); $('.arrow-up').css('left', $(drpContent).width()-20); } $(drpDwn).on('click',function(e){ tar = $(e.target); if (tar.is(drpDwn)) { $(this).hide(); } }); }); });//end jquery /*-------------\ end pp-notes.js \-----------------------------*/

WYSIWYG editor | Rich text editor | jquery | css #MoodToday