-3

i have made a normal text editor.Now user can enter text to that.Now how can i generate html that is text enclosed within p tag and /p tag(tag p because at this i only want normal paragraph),now ok somehow i will enclose every word with that p tag but what if in future i want to add extra features such as links,etc.Also i need to show text as it(i mean the way it is entered in style,size,etc).How would i got to know while parsing text file which user enters that whether i have to enclose a particular word with paragraph tag or link tag

shobhit
  • 7
  • 2
  • I get the feeling you're inverting your approach here. You should define the behavior you want, and then write code that follows the desired behavior. In order to define the behavior you want, explore what _WYSIWYG_ means, and what features it provides to the user. In other words, if you how does a WYSIWYG editor differ from a normal textbox? List the differences, because that is essentially your first draft of the behavior you wish to implement. – Flater Jun 15 '18 at 09:27
  • @shobhit, not all WYSIWIG editors use HTML. They behave as candied_orange described. However, there are multiple intermediate forms that web sites use, such as _markdown_ (like this site), _MediaWiki_ (like Wikipedia), _reStructuredText_, _BBCode_ etc. There are reasons not to use HTML directly. – Berin Loritsch Jun 15 '18 at 20:01
  • HTML was never supposed to be WYSIWYG, it was designed to render differently on different environments. – esoterik Jun 15 '18 at 22:17
  • @berin I get the reason to not use HTML directly. Thanks your comment was the only one which solved my query. – shobhit Jun 16 '18 at 10:01
  • " I seriously don't know how can i do it" is not an anwerable question. As Flater's comment said: you first have to define the problem you want to solve in a proper way (and "I want to generate html from some text" is not a suitable problem description). – Doc Brown Jun 16 '18 at 11:48
  • i have made a normal text editor.Now user can enter text to that.Now how can i generate html that is text enclosed within

    and

    (tag

    because at this i only want normal paragraph),now ok somehow i will enclose every word with that p tag but what if in future i want to add extra features such as links,etc.Also i need to show text as it(i mean the way it is entered in style,size,etc).How would i got to know while parsing text file which user enters that whether i have to enclose a particular word with paragraph tag or link tag.

     – shobhit Jun 16 '18 at 11:57
  • @shobhit: ok, that's much more understandable. But please don't bury your explanations in a comment, better edit your question and place them there, so others will find them there immediately (and if you would have addressed me using the @ sign, I could have answered earlier, since I would have gotten it in my inbox, so I only found your reply by chance today). – Doc Brown Jun 18 '18 at 11:37
  • @doc ok i will keep that in mind from future to use '@'.also i have edited my question. – shobhit Jun 18 '18 at 15:42
  • @shobhit: without the original text before your last edit, your question is now less understandable than before, you should really try to merge both and write a proper question. And can't you please format the question in a way it does not get presented as a big wall of text? My eyes start to hurt when I try to decipher this now. Are asking your questions using a smartphone? If yes: that's not a good idea, chances are high the community here will close your question just because of the horrible formatting. – Doc Brown Jun 18 '18 at 16:03

2 Answers2

0

As I type this I see my text show up in a WYSIWYG editor. Now sure there is a non WYSIWYG text box above it with a blinking cursor that's a little distracting but all in all this is still a WYSIWYG editor.

Why? Because EVERY KEYSTROKE results in me seeing exactly how it will be displayed. That's the secret sauce. You have to build the final display fast enough that it shows up cleanly between keystrokes. Every keypress is a submission you must process.

Now sure there are little complications like when the user decides they don't want italic text after all and need some way to delete your italic codes. Some editors (like Wikipedia) allow you to switch from WYSIWYG to a raw text mode that shows the codes. Others don't (like MS word) which causes confusion. Still others like stackexchange show you both at the same time.

The big thing that makes them all WYSIWYG though is all about showing the result on every keystroke.

candied_orange
  • 102,279
  • 24
  • 197
  • 315
0

You will need to distinguish between an internal representation of how the edited content is stored, and a displayed representation:

  • in the internal representation the textual characters are stored as standard characters, and other things like start and end of bold formatting, underscores, links etc. are included as meta characters. So there might be a meta character for "start of bold", one for "end-of-bold", one for "start of link" (with an associated link address) etc. Line breaks may count as invisible standard characters.

  • the displayed representation is what you users see in the WYSIWYG editor. Note the positional indexes (for example, for remembering the position of the insert cursor or the current selection) are only referring to the displayed non-meta characters. Whenever the internal representation changes, the displayed representation (or the related parts of it) have to be rendered immediately.

  • the HTML representation is, in your scenario, probably something the users will get "on-demand", when they ask for exporting the content in that format.

The problem you then need to solve is how the users can manipulate the internal text representation without actually seeing it. All what they see is the displayed representation, and maybe an insert cursor. By selecting a text and choosing a command like "format bold" from the menu, you editor can easily insert the required meta characters, or remove them when they become obsolete. When adding text, just add standard characters at the place where the insert cursor is. When deleting text, check if meta characters become superfluous (like "begin bold" immeditale followed by "end bold"), so you can remove them, too.

This just a rough outline, nothing complete, but I hope you get the general idea.

Doc Brown
  • 199,015
  • 33
  • 367
  • 565