Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    376
    Thanks
    46
    Thanked 1 Time in 1 Post

    How to make a basic live preview?

    Hello,

    Imagine making this thread yourself and seeing, as you type, it being shown in a live preview version. I would like to touch the basics on this and start working upon creating a more and basic version.

    For the time being, I would like to know how to have a text area alike the one you use to submit a new thread or reply to one with one or two basic BB-Style codes, however I would like them not to show the brackets and continue as normal font, I would like in the text area for you to start typing in bold whilst the bold is active and for all of this to also show in the live preview area which is not the same size.

    Thank you for your help,
    Best Regards,
    Tim

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Search for "rich text editor" or "html wysiwyg editor". Studying an existing project should be an excellent way to learn this.

  • #3
    Regular Coder
    Join Date
    Nov 2010
    Posts
    376
    Thanks
    46
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Airblader View Post
    Search for "rich text editor" or "html wysiwyg editor". Studying an existing project should be an excellent way to learn this.
    Thank you. I have now come across a very basic JSFiddle of which can show the HTML which is brilliant I presume to show things live.

    Could someone please give me an insight on how to switch the class of the following:
    Code:
    $('#italic').live('click',function(){
        richTextEditor.contentDocument.execCommand('italic',false,null);
        richTextEditor.focus();
    });
    First of all, #italic will need to be changed to .italic so I can have more than one on the page. The click function, I would like to implement an active class to show that italic is currently enabled.

    Also, without duplicating the entire thing, how can I implement more than one and to remove the on function?

    The JSFiddle: http://jsfiddle.net/d2L2A/
    Best Regards,
    Tim

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Posts
    376
    Thanks
    46
    Thanked 1 Time in 1 Post
    The new update of the JSFiddle: http://jsfiddle.net/d2L2A/27/

    It has a live preview view, I am not sure how good it is, however I could not get the editor area to be in a textarea, just the iframe...

    I was trying to merge them and when you click to view the code, I was trying to get that to echo in the preview area instead of an alert.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •