/    Sign up×
Community /Pin to ProfileBookmark

Making a WYSIWYG Editor???

Ok, I have spent an entire day trying to find a good tutorial on this. Google, for the first time, has really failed to come up with the goods.

Basically, I want to make a really simple HTML WYSIWYG editor for a website I’m developing where users can upload their creative writing (poetry, short stories etc.). All I need is a textarea/iframe space where they can paste or type out their poem, add simple formatting (bold, italics, underline, left/right align and justify), and know that when they click ‘submit’ it gets sent to my database with all the relevant HTML tags. Also, poems need line breaks and paragraph breaks (ol’ <br> and <p>) to be distinct to show lines and stanzas.

ANYWAY – I have worked out how to write an iframe where you can do these things except:

  • 1.

    Users have to hold shift when pressing Enter to get a <br> result.

  • 2.

    I have no idea how to collect data from an iframe and send it from the form to a corresponding PHP page/script which logs it in a database.

  • Excuse what might seem like ignorance – I’m much more accustomed to writing PHP and MySQL and these fiddly javascript things always throw me off balance. Also, there are apparently far fewer javascript tutorials on the internet than PHP/MySQL ones it seems.

    And before anyone suggests FCKEditor or TinyMCECIENAHGFD or whatever, no thanks, I don’t want one of those, I want to make my own from scratch.

    It’s really those two problems I’ve listed that are the main ones – so if anyone has any advice / solutions, I’d really appreciate it.

    to post a comment
    JavaScript

    0Be the first to comment 😎

    ×

    Success!

    Help @excelsior9 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...