As a dynamic web site in the construction process inevitably encountered the issue of online editing articles. HTML provides a TEXTAREA tag, but does not actually solve the problem, since textarea is plain text. Unless you use HTML tags when you type, you will get a piece of text that has no structure from beginning to end. Constructing a kind of WYSIWYG online editor through DHTML in Web design is a good solution to this problem.
But what you see is not the only solution. In the process of surfing the Internet, I found that some portal online editors are very special. It's not WYSIWYG (but it provides a preview), but it's a textarea text field, but it doesn't support HTML markup language. Instead, it has its own set of markup languages.
Figure 1
Figure 2
The author felt very fluent, summed up its advantages as follows:
First, it's not many tags, compared to the HTML is very simple, and by carriage return can automatically generate paragraphs, easy to be accepted by the general user. The author thinks that if the Chinese tag is used, it can be accepted by more domestic users.
Second, compared to WYSIWYG editor, users can master their own article structure, generate less garbled.
Third, visibility is much better than HTML, plus the preview feature is better.
Four, because their markup language does not support scripting, so it is more secure.
After the author of some thinking and practice, is to build this kind of their own markup language method of publicity:
First, we identify a simple and necessary markup language for our website. Make sure that you omit some unnecessary. For my part, I identified the markup language for my website as follows:
[picture] The URL of the picture [/Picture]
[Big Title] text content [/headline]
[small title] text content [/small title] (considering the user may be subdivided so plus)
[Bold] text content [/bold]
[Italic] text content [/italic]
[link] url [/link]
Then, provide a mechanism for the browser to read our tags. So, how do we get browsers to read our own identified tags? On the page where the content is displayed, we need to write a program that translates all of our markup into standard HTML tags, but it has to filter out the HTML code that the user has entered before.
First step: Filter the HTML code.
This is actually very simple, just replace all the "<" tag with "<" and replace All ">" with ">". Implemented in ASP using the following statement:
Content=replace (Content, "<", "<")
Content=replace (Content, ">", ">")
(in the above code, the content is the variable that stores what we want to display, and the following is the same meaning if it appears.) )
Step Two: Translate our tags into html
This is relatively complex, as it is not easy to replace all [tags replaced with < and] with > then translate the Chinese (such as the images) into English (such as IMG). There are two reasons:
1 is the content of our tags, according to different classifications need to do different processing:
The first category, which is displayed directly to the user, for example:
[Big title] text [/headline]
At this point it is really just the translation of the label into the corresponding English, such as the above markup translation
The second category, which is not presented directly to the user, such as:
[pictures] Image URL [/picture]
At this point, the contents of the middle of the label "Picture URL" is just the URL we want to display, in HTML as the label of the SRC attribute, and this tag in the HTML is not the end of the tag. So the result of direct translation is definitely wrong.
The third category, direct rendering at the same time as attributes, such as:
[link] url [/link]
2 is not all out of the mark of the place is to translate, for example, sometimes the user needs to use the symbol "[" and the symbol "]" to express their content, and this time if the translation of such tags to "<" and ">" is certainly not in line with the user's mind.
After analyzing the problems, the author will give a reference and a reference program to write the program in the following way.
Because different labels need to translate the same way, so must be for different labels, one by one translation.
For any single token, there may be more of this in an article, or it may not happen at once, the program should first check the beginning of a mark (for example, "picture] picture address [/Picture]" is "[picture]") appears, once the check, and then start from that location check the end tag, If it is also checked, this is the tag we want, and if the closing tag is not checked, then it is not the tag we want, but the content that the user has shown themselves. After checking, the tags are translated into HTML tags, and the contents of the tags are processed differently depending on the type. After sitting, continue checking from the position of the closing tag until the end of the article.
In actual writing, we need to use the idea of recursion. The following is a sample program for translating [picture] picture address [/picture].
Function translateimg (STR)
Start=instr (str, "[Picture]") ' Check the start position of the mark
If Start=0 then Exit Function ' start position is 0, indicating no this tag, then the program ends
End=instr (START,STR, [/Picture] "Check the end tag position after the start position
If End=0 then Exit function ' end tag appears at 0, indicating no end tag, end of program
Midstr=mid (str,start+4,end-start-4) ' mark the middle of the content
Replacestr=mid (str,start,end-start+5) ' tags in the middle, as what will be replaced
Str=replace (Instr,replacestr, "Translateimg Str ' recursively executes this function
End Function
Through the above analysis, I believe that readers can through their own analysis for their own web site to build a set of "myhtml" markup Language.
In the actual development there will be a number of topics need to be breached, such as: tag nested processing, is the user submitted to the database before the translation or the user to browse the article from the database when the translation; To provide users with a number of buttons to automatically insert the tag to facilitate the user's operation experience. This article only makes the use of the hope to attract the reader a little appreciation.
