Create your own visual Web HTML editor

zhaozj2021-02-16  43

It is a pleasant thing to implement a visual HTML editor in your own web page. If you use IE5.0 Brower, do not look at the implementation method below.

First, basic work

First of all, of course, some Button pictures are collected, such as cut (), centered (), bold (), etc., this is not a hard thing, open FrontPage 2000, press the Print key, then to Photoshop Paste, Set the selection zone to a fixed size (16 * 16), then one selects CUT, CTRL N (new), Paste, Save Optimizied, Of course, if you find a direct GIF file, you don't need this.

Only font color selection picture () and brush color selection picture () has a little skill, in order to allow users to choose different colors, the corresponding font color (or brush color) can appear related colors, you can put pictures A small piece of area DELETE is dropped below, which can form transparent colors below, and then set the background color of the picture to the desired color, such as the red font color, is blue. And in JavaScript is available: the ID number of the picture .Style.BackgroundColor = Color is implemented.

Another trick is how to form a dynamic mouse effect in the Web, as follows:

MOUSE is not on an object: Mouse moves to an object: Mouse is pressed on the object:

There are many ways to implement such a method in intranet, and some use a MOUSE method, and some are multi-picture methods, and more. Here, the author uses a dynamic CSS method to achieve, not only simple, but also very easy to write a program.

We first define a set of styles that generate up, dwon and normal effects, as follows: (The following effect is generated on the background color to D0D0C8, if your background color is not, please modify the RGB value)