Every web designer and coder needs a good web page editor to create and edit HTML, CSS and JavaScript code. Notepad (Windows) and TextEdit (Mac) are great tools to get you started, but as you gain more experience, you will want to use a more solid and convenient tool.
There are hundreds of great editors to choose from, but many of them are paid. And if you don't want to violate copyright, and the budget does not have the funds to buy a commercial product? This article explores some great free editors.
- WYSIWYG editors. These are graphic editors that allow you to build a page layout and set styles visually, as in the well-known MS Word word processor. They are a handy tool for building page designs, although as every seasoned web designer knows, the code will still have to be tweaked to get a great result.
- Text editors. It is a tool for directly editing HTML and CSS code. Some editors are general purpose and do not have special options to support web code. Others are specialized for using web languages \u200b\u200bsuch as HTML, CSS, JavaScript, and PHP, and have built-in properties for quickly entering HTML tags, CSS properties, and so on. Many of these editors allow you to view a web page in a separate window.
KompoZer (Windows, Mac, Linux)
KompoZer is a great choice if you need a visual editor on a tight budget
Komodo Edit is a good editor, easy to learn but powerful and extensible
Although it is a general-purpose editor, it supports HTML and CSS, and has contextual autocomplete for HTML tags and CSS properties, as well as a collection of code inserts for various HTML elements. In order to get the most out of Komodo, you need to install the HTML Toolkit extension, which contains wonderful properties such as tag auto-close, CSS preview, and a temporary text generator.
Komodo Edit allows you to view the edited pages in any installed browser, or use the built-in browser in a separate window, so you can edit and see the result of changes at the same time.
The editor has a built-in function for uploading files to the site (FTP, FTPS, SFTP, or SCP), and you can also group your files nicely using the project manager option.
Very useful feature Code\u003e Select Block... It highlights the current main HTML block, such as the currently closed div or ul element. A very convenient function when you need to select an entire section on a page for copying or moving.
Komodo Edit has a lot of powerful and useful features, such as using regular expressions for find / replace, the ability to execute external commands, and so on. Fortunately, the editor also has a good help system that makes it easy to master the full power of Komodo Edit.
Aptana Studio (Windows, Mac, Linux)
Aptana Studio is a complete integrated web application development environment with a wide range of plugins. Although you can only use it as a HTML / CSS / JavaScript code editor
Notepad ++ is a great replacement for Notepad from Windows. Although it doesn't have the same set of options as other editors, it is great for editing HTML, CSS, JavaScript, and other code files.
PSPad is another general purpose editor for Windows with a wide range of features useful for HTML and CSS coders
jEdit is a cross-platform text editor with powerful macro command and plugin features. Install XML plugin if you need to edit web pages
TextWrangler is a lightweight general purpose editor. Despite the lack of special features for web development, it can be used to work with web pages.
Vim is definitely tricky to learn, but if you get through it, you will never want to go back!
The grandfather of text editors for programmers Vim (a direct descendant of the vi editor) is an open source console text editor. It is installed by the default editor on almost all flavors of Unix, including Linux and Mac OS X. The editor is also available for use on Windows and many other systems.
Vim is not a system that you can install and start using right away without ever having to deal with it. Most editing commands include weird combinations like wq and /. It also has three editing modes: mode insertsin which the text is entered; visual mode for selecting text; and command mode for entering commands. This functionality is a legacy of Unix from the days when there were no windows or a mouse.
Why did he get on the list? Once you master it, you will be convinced of its speed and power. With a few commands, you can do something in seconds that can take minutes in other editors.
there are a large number of Vim macros and plugins that make it easy to work with HTML, CSS and JavaScript code, including syntax highlighting, auto-completion, HTML Tidy, and browser preview. Here is a large list of useful links:
- Vim Omni autocompletion
- HTML / XHTML editing in Vim
- home page
Fraise (Mac)
Fraise is an intuitive editor for Mac, with enough features for web editing
Like TextWrangler and gedit, Fraise is a wonderful lightweight editor that's a pleasure to use. It is a fork from the editor. It is relatively new and does not have a proper web server. It is currently only supported on Mac OS X 10.6 (Snow Leopard), that is, if you are using version 10.5 then you will have to download Smultron.
Fraise has some awesome web editing options:
- Code highlighting for HTML, CSS, JavaScript, PHP and several other programming languages.
- Close Tag (Command-T) to close the current tag. This really saves time when entering lists.
- Convenient preview with built-in browser (using WebKit), with very convenient Live Update option? which refreshes the browser as soon as the markup and CSS has changed on the edited page.
- Advanced Find option that supports search / replace using regular expressions.
- Support for blocks for quickly entering HTML tags and CSS properties.
- Some handy commands for manipulating text, such as validating HTML and converting characters to HTML elements.
Fraise is worth exploring if you're on a Mac and want a handy editor with more features than the built-in TextEdit.
PHP Is an excellent language for creating web pages. It is currently supported by most hosting providers and is the leader in programming languages \u200b\u200bfor creating dynamic websites. The beginning of the creation of PHP is considered to be 1994, when Rasmus Lerdorf created a simple set of scripts for processing HTML documents ... Perhaps because at the time of creation the PHP processor was written in C, the syntax of the languages \u200b\u200bis very similar ...
1st place. Phpstorm
PhpStorm is a cross-platform development environment for the PHP language. The program is a multifunctional and intelligent editor for PHP, HTML and JavaScript. There are many features of the program, of which I would like to note the possibility of analysis and coding on the fly, the error prevention function provides unsurpassed performance.
2nd place. Sublime text
Simple, free, convenient editor for various code. Of the advantages, one cannot fail to note a pleasant interface, ease of use, and flexible configuration. Also, an undoubted plus is that this editor is multiplatform. I really liked the function of multiple selection and editing, this function is not available in other editors. It works like this: you hold down Ctrl and after selecting lines of text, they are edited simultaneously. Also in this editor there is a function of hot keys for any actions. There are not so many plugins yet.
3rd place. Komodo IDE
Komodo is a professional IDE for major web programming languages \u200b\u200bincluding Python, PHP, Ruby, Perl, HTML, CSS, and JavaScript. You will enjoy this editor and develop faster using the complete set of tools. Key features include code folding, multi-window editing, smart syntax checking, highlighting, powerful snippets and handy tool macros, and other performance-enhancing features. The sleek interface frees up space and allows for creativity.
4th place. Expression Studio
This is not just an application, this is a whole software package developed by the company Microsoft. This package includes: a visual editor, tools for interface design, graphic design, and many other tools.
5th place. PhpED
The program has many tools that are very useful in development both in PHP and in other languages \u200b\u200bthat the editor supports. The built-in web server is used to debug web applications. You might spend a lot of time and effort in setting up at first, but it's worth it. Also, the disadvantage of the program is that there is no distribution kit for MAC and Linux.
6th place. PHPEdit
In the arsenal of this editor, there is not only syntax highlighting, but also the function of automatic filling, code checking, there is also a built-in debugger. It's not good that there are no Russian-language textbooks yet, and you won't be full of leadership. There are also no distributions for MAC and Linux.
7th place. Dreamweaver
When using this program, you can simultaneously view the design and code of the page, hints and autocompletion are also used. Search and replacement of symbols is conveniently organized. On the official website of the program, you will find many commercial and non-commercial plugins for this program.
8th place. phpDesigner
This code editor is specially tailored for PHP, of course with its help you can create and edit projects in other languages, but it will be ineffective. Of the shortcomings, the lack of cross-platform is immediately striking, this editor is only for Windows. Unlike other editors, you cannot change the font size in it (who knows, maybe the eyesight is poor, but that is exactly what most programmers have). The program also lacks a convenient vertical selection. But despite all the shortcomings, phpDesigner has the best code highlighting, it is very well organized, in general, try it - you will find out.
9th place. PHP Studio 2010
The editor itself is a development environment for PHP. It allows you to code faster using a large number of features such as built-in server, web browser and more. Like most editors, there is a syntax checker, support for various encodings, and support for several development languages.
10th place. RadPHP
RadPHP is geared towards those with little coding experience. Among the advantages, one cannot but note the syntax highlighting, the presence of a built-in browser and debugger, the ability to create breakpoints, ease of use is immediately noticeable. There is a technical support organized at the highest level. One of the shortcomings is that there are no distributions for MAC and Linux.
So, recently we got acquainted with the most environments for developing applications in Java, this time we will touch on PHP. Distributing prizes in a similar subjective way, let's take a look at the list of the best:
Best Free IDE - NetBeans
So, history repeats itself and reveals the NetBeans IDE rating, which means we have to say a few more kind words about it. First, it supports Russian, which is vital for many PHP developers. Secondly, NetBeans supports all known frameworks, including Zend, Laravel, Doctrine, CakePHP, Smarty, Yii, and Symfony2. In addition, javascript, HTML, CSS and PHP in the most recent versions are naturally supported.
Best Paid IDE - PHPStorm
This IDE is ideal for full-fledged full-stack web development. Also supports Symfony, Zend, Yii, CakePHP frameworks, main CMS systems Magento, Drupal, Wordpress, Zend Debugger and Xdebug debuggers, and for the frontend you have CSS3, HTML5, Sass, CoffeeScript, TypeScript, Stylus, Less and a bunch of other tools. The software environment is supplied free of charge for teachers and students of specialized universities, for open source projects, and for those who need 30 trial days. In other cases, you will have to pay.
Most underrated IDE - Sublime Text
The latest third version of Sublime Text is a general development environment, the main charm of which is in a huge number of plug-ins. One of them is PHP IDE. The package includes everything you need: debuggers, testers, an editor and support for popular frameworks. Working with Sublime Text is easy and convenient.
Most popular IDE - Eclipse PDT
Another representative of the past rating. In general, its popularity is due to the vastness of the possibilities (accordingly, people working in other languages \u200b\u200bwill find it convenient to stay on this particular product), supported languages \u200b\u200band the number of bundled packages. We are interested in PDT (PHP Development Tool) with Eclipse-specific features: syntax highlighting, coding assistant, refactoring, templates, debugging, validation, and much more.
Best Cloud IDE - Cloud 9
Cloud 9 is yet another representative of the omnivorous development environment, which, together with the build quality, makes its popularity unattainable for competitors from the cloud world. For free, you get a limit of one job, which is quite enough to assess the possibilities. If you want to work as a team, prepare $ 19 (or 1 symbolic dollar if you have a student team).
Simplest IDE - PHP Designer
As you can imagine, the title of the simplest IDE imposes restrictions on functionality. In this case, the main disadvantage is work in only one OS, namely Windows. Otherwise, it is more of a code editor with extensions than a full-fledged development environment. But sometimes that's good too, isn't it?
Best Unpopular IDE - CodeLobster
You won't find a huge community of CodeLobster developers, and the reference documentation is also pretty sparse. But that doesn't change the fact that it's a great IDE that supports Drupal, Joomla, Wordpress, Yii, Symfony, Laravel, Smarty, CakePHP, Phalcon, jQuery, AngularJs, Nodejs.
Most Promising IDE - Zend Studio
Let's conclude the review with a powerful product from Zend Technologies, or rather dry statistics:
Debugging with Zend Debugger, Xdebug, Z-Ray integration;
SVN, CVS, Docker, Git Flow support;
Ability to view MySQL, SQLite, PostgreSQL and other DBMS;
Dojo library support;
High-quality code editor, with functions of analysis, correction, refactoring, indication, generation, etc .;
Support for cloud services Microsoft Azure and Amazon AWS;
Free handling of JavaScript, CSS, HTML and of course PHP (4 and 5);
Zend Studio Toolbar developer panel for IE and Mozilla Firefox browsers.
Probably my dear reader has more than once faced a situation when the final web project was oriented not towards a narrow circle of web programmers or people "introduced" into the system, but exclusively beginners, for whom the most important aspect is, of course, simplicity and practicality, but the most basic is of course associativity and beauty.
Recently I had to develop a project for the organization of writers in Ukraine, in which, of course, there are "a lot of programmers", and I had to look for a solution to simplify the system interface, especially when it came to writing articles and other manually edited site content.
I've tried a decent variety of visual editing systems, and of course I have a definite impression of each of them, both good and bad.
As part of this project, I tried three visual editing systems, which are certainly worthy of attention, and will be discussed in this article. These programs are: TinyMCE, WYM Editor, HTMLArea.
Well, of course, these programs cannot be put in one row, at least according to their functionality and purpose. It would be tantamount to comparing the capabilities of the built-in Notepad editor and commercial Microsoft Word. After all, each of this program is special, and belongs to a certain class. Therefore, today we will talk about it.
The tale of TinyMCE
Well, this program, in my opinion, occupies an honorable pedestal of primacy in the market for similar products, as it has the most functional interface, "portability", associativity, and all the while - relative speed. But to say this means not to say absolutely nothing, since these superficial praises cannot reveal all its advantages, among which: the most elaborated API-interface among all the above systems, simplicity and clarity, rather fast processing time (given the level and quality of the actions), as well as the quality of external data processing. For example, you can simply copy text from a Word document, and if configured correctly, the system translates it in a very, very similar format, with the relative purity of the code that complies with the standards, which is put forward by the main trendsetter in the WWW - W3C. But, of course, there is no honey without tar, and in this case, there are disadvantages. Among them is the inoperability on the Opera browsers ending with 8.4, on which the system will not work at all. And, of course, taking into account all its capabilities and multi-browser compatibility, at the output we get a rather voluminous source code, namely 1.9 MB, but I believe that the size pays for itself in full.
So let's say you have some form.html document that contains some form, with a TextArea field. But how do you make it WYSIWYG?
It's very simple, for this you first need to connect the main TinyMCE class, after which the prototype of the TinyMCE object will automatically become available in the document, which is the main API of the system through which the program communicates and configures it.
Let's look at the simplest use case for a program, using a document with a form and a TextArea element as an example:
Listing 1.1
Some TextArea element
In this simplest case, we will see an editor with a minimal set of functions for standard text formatting as a field for editing, but no more. A similar approach can be used in a project to create a chat, forum, guestbook, and more. For more complex options, we have an additional set of functions and methods, which we will now talk about.
But let's talk first about the parameters that we pass to the class initialization method - init ().
We pass some hash as a parameter, in which the value of the mode element corresponds to "textareas", and the value of the theme element corresponds to "simple". The `mode` element denotes a method to" replace "standard textarea with WYSIWYG. It can be "textareas", "exact" and "specify_textareas".
In the case of "textareas", we instruct the editor to convert all TextArea elements to editable elements. In other cases, we manipulate certain fields for editing, the identifiers of which must be listed as the value of the elems element, separated by commas.
In turn, the "theme" element means nothing more than the current type of editor's design and can take the following values: "simple" and "advanced".
In our case, when we use the "simple" type, we only connect the standard editor functions, and at the same time cannot change its functionality much, as I already said - this is quite suitable for small projects, as well as for those that require high connection speed.
Now let's look at working with the editor while the "advanced" theme is on.
In this case, we have a flexible interface in editing, full editing of all functions used by the editor, as well as a few more points.
Well, let's say you started a project of some electronic journal or Internet publication, in which the possibility of creating articles by the administration is of principle. At the same time, it should be borne in mind that the program interface should be as similar as possible to the interface of the most used Word, which is familiar to us, and also have a sufficient number of functions to embody all the editor's ideas regarding the formatting of the article text, and there should never be such questions as : "Where do you need to click?", "Why doesn't it show :.", "Where did all the text go?"
For more rare occurrence of such questions (but you can't get away from them :) we will now slightly change the current version of the editor and add the following functions:
- Automatic formatting of pasted text
- Add formatting functions
- Change the location of the control panels
- Set the editor language
- Add a spell checker
Well, let's discuss more precisely what we want to see in the editor:
- The formatting bar is on top
- No status bar
- Language of the editor - Russian
- Formatting functions: bold, italic, underline, font, size, text style, color, fill.
- Structural formatting functions: table, alignment, tabulation, list
- Additional functions: insert an image, insert, preview, insert a hyperlink, "rollback" and "return" functions, and, probably, we will introduce printing.
Well, there is a formalization of the task, now let's decide how we will implement it.
To implement the autoformat function for text pasted from outside, you must specify the hash-list parameter - "paste_auto_cleanup_on_paste", which takes a boolean value (true || false), and depending on this, formats the external text passed from the clipboard.
When using this parameter, the following parameters should also be used:
Paste_convert_headers_to_strong: (true | false), paste_strip_class_attributes: "all", paste_remove_spans: (true | false), paste_remove_styles: (true | false)
Well, I don’t voice them as their names are already associative. Well, we solved the problem with the insert, and now we need to solve a few more tasks that we set earlier. But now let's talk about the program panels, as this is quite important when designing the visual display of the editor.
There are two kinds of panels, namely the toolbar and the statusbar.
The first panel contains functional buttons, as well as other tools for formatting and editing text.
Each of these panels can have its own position (bottom or top), that is, we have the ability to quite flexibly change their positions in the editor. To do this, you can use the parameters:
Theme_advanced_toolbar_location: (top | bottom | none), theme_advanced_statusbar_location: top | bottom | none)
In this case, depending on the value of the parameter, the final position of the panel will be set, or if the parameter is set to "none", then the panel will not be displayed at all.
And yet, the toolbar has such a parameter as alignment, according to the value of which, the panel's elements will be centered. The theme_advanced_toolbar_location parameter is responsible for centering the elements, and can take standard values: center, left, right (the center parameter is set by default).
So, with the panels sorted out, but do you need to add something to them?
After all, by default, it will simply be empty, with a minimum set of values, because such an editor is not needed, is it?
For placement, elements, or in other words - buttons, must be divided into several categories, each of which may contain elements (not) separated by a separator sign. For abstraction of groups in the program, the concept of buttons is used, and for setting a group as the value of the theme_advanced_button (n + 1) parameter, where n is the current number of the group, a set of elements that should belong to it are specified.
Although you can, don't worry too much about typing, because by default in the toolbar you can already find a standard set of necessary alignment, formatting and other functions, but this is only available in the "advanced" theme mode.
To set the editor language, you just need to add the "language" parameter with the value "ru".
Well, let's see what happened with me:
Listing 1.2.
This is all the code. It looks quite cumbersome, but overall it is quite simple to understand.
Well, let's take a look at its anatomy. First, we pass the most important parameters, namely: method of "replacing" text fields, editor theme type, editor language, as well as a list of plugins to be connected. By the way about them. As far as you have noticed, if you read carefully, then within the framework of this text we have not yet mentioned them.
Plugins are some external modules that are needed to implement certain functions of the program. Plugins are located in the `plugins` folder, from where they are connected to the program at the time of the call. To use plugins in the program, you first need to list them separated by commas, as parameters of the `plugins` element, and then add the appropriate button to the panel to use them.
Also in the example in Listing 1.2, we used the inserdate plugin, for which we later set the dateFormat and timeFormat parameters, which enter the format of the time and date used, respectively. They are set according to the specification of the timestamp function.
It is also worth mentioning other interesting functions used in the example:
- paste_remove - if the mode is true, the editor filters all data received from the buffer and deletes the spa containers.
- paste_convert_headers_to_strong - if true, the editor changes all headers (h1, h2, h3, h4, h5, h6) in the clipboard to elements
- paste_auto_cleanup_on_paste - filter for data from the clipboard (applicable to data from MS Word)
Here, in my opinion, is enough for a general overview of the system. However, we have not yet considered a fairly large number of API methods, without which it is often very difficult to imagine working with an editor. But I promise that we will consider them in the next issues of MK.
