Interested in the following questions:

  1. How are visual editors (or how to call them correctly?) In the likeness of this (WordPress)? enter image description here

  2. How is the markup stored? Many times I heard that storing HTML markup in the database is bad. Is it so? And what if this is so? How to store?

  3. The most interesting for me is that everything can be seen exactly as it will be on the page in the end. There is no such as, for example, on the same SO. Here we can surround the word with asterisks and it will be bold after the message has been posted. But right now, typing this text, I do not see the word bold. I see him surrounded by stars.

Answers to your possible questions:

  • Yes, I looked at the page code. There is an iframe that references javascript . How it works is the question.

  • I tried to search for the Google-like ones, but the issue is not at all what I expect. It is likely due to the fact that I incorrectly formulate the question.

  • Yes, I have my own thoughts on this. And the most basic one is <div contenteditable> . But how not to try, the maximum that it can give is the same shape as on SO. Plus, I don’t know how to send it by form. Do you really have to copy the contents of the <div> 'with JS and into <input type="hidden"> , replacing ** with <strong> , and __ with <em> ?

In short, I apologize if this question is a duplicate, because I cannot find the answer I need.

Thank.

Closed due to the fact that the issue is too general for the participants aleksandr barakin , Bald , user194374, Denis , Streletz Jul 22 '16 at 14:19 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    1) Visual editors are made on js. The scheme is quite simple - there is a hidden textarea block in which the resulting html code is stored, which after clicking on the save button, for example, is sent to the server, it is checked, screened and saved to the database. There is a block with a contenteditable tag. The content is saved in the textarea when changed. There are control buttons that add new tags or wrap highlighted text (this is done using footswitch, tracking functions for selected text, etc.). There are windows in which additional parameters are entered, etc.

    2) Store HTML markup in DB is a normal practice, and how without it. You just need to carefully screen everything, protect against SQL injection and others.

    3) The option of using a block with the contenteditable tag is just what you need there, everything looks the same as it would look like - the main thing is to keep track of what styles are needed to be connected.

    If you need more details ask questions or try - it's easier to understand how and what happens.

    Help information:

    • Great answer, thanks. But you need to clarify some details. Most of all, I’m interested in the following: I tried to implement something similar (only the part with contenteditable), but I don’t understand how to ensure that the text is "highlighted in real time." For example, I highlighted the word and pressed the "B" button (to make it bold). What should happen next? After all, if you just wrap this word with JS, then it will be like that in a div: the word <b>слово</b> literally <b>слово</b> , and not really bold. Or am I wrong? - smellyshovel
    • No, you're wrong. If you find the “word” in the contenteditable block and replace it with “<b> word </ b>”, it will immediately appear as you want - it will immediately be shown in bold. - Mihanik71
    • Both-on, unexpected turn. So I did something wrong. I will experiment now, and if everything is as you say, then the answer is yours. - smellyshovel
    • one
      Well, in principle, yes, it works. So I thought correctly. Thanks for the answer :) - smellyshovel