Title: HTML Post Editor
Author: mortalis
Published: <strong>9 de abril de 2015</strong>
Last modified: 13 de mayo de 2015

---

Buscar plugins

![](https://ps.w.org/html-post-editor-new/assets/banner-772x250.png?rev=1131211)

Este plugin **no se ha probado con las últimas 3 versiones mayores de WordPress**.
Puede que ya no tenga soporte ni lo mantenga nadie, o puede que tenga problemas 
de compatibilidad cuando se usa con las versiones más recientes de WordPress.

![](https://ps.w.org/html-post-editor-new/assets/icon-128x128.png?rev=1131215)

# HTML Post Editor

 Por [mortalis](https://profiles.wordpress.org/mortalis/)

[Descargar](https://downloads.wordpress.org/plugin/html-post-editor-new.zip)

 * [Detalles](https://es-do.wordpress.org/plugins/html-post-editor-new/#description)
 * [Valoraciones](https://es-do.wordpress.org/plugins/html-post-editor-new/#reviews)
 *  [Instalación](https://es-do.wordpress.org/plugins/html-post-editor-new/#installation)
 * [Desarrollo](https://es-do.wordpress.org/plugins/html-post-editor-new/#developers)

 [Soporte](https://wordpress.org/support/plugin/html-post-editor-new/)

## Descripción

The plugin adds **HTML editor** to the default post editor. The editor is accessible
through a new **HTML tab**. When opening the tab the editor loads the raw HTML source
of the post, formats it and applies **Ace Editor** to the input area. So the edit
area has main features from this web editor: _syntax highlight, line numbers, highlight
of matching tags and brackets, keyboard shortcuts_.

The plugin is based on the [ACE Editor for WP](https://wordpress.org/plugins/ace-editor-for-wp/)
plugin. It’s updated for _WordPress 4.1_ and _Ace editor 1.1.8_.

#### Features

 * Syntax highlighting
 * Line numbers
 * Line highlighting
 * Highlight of matching tags and brackets
 * Syntax checking
 * Multicursor
 * Ace Editor keyboard shortcuts
 * Search box
 * Resizable area
 * Emmet HTML snippets
 * Full screen mode
 * Toggle word wrap option
 * Custom shortcuts
 * Options page

#### Usage

 1. Before switching to the **HTML tab** first make sure you are on the **Visual tab**
    because the script loads the data from the _TinyMCE_ editor which is loaded only
    when the **Visual tab** activates.
 2. When you are on the **Text tab** the _HTML tab_ is disabled and has a _light red
    background_ so you won’t be able to switch to it until you activate the **Visual
    tab**.
 3. When the **HTML tab** is activated the _Text tab_ becomes disabled so you may only
    switch to the **Visual tab**. This is done to prevent the _conflicts_ of content
    which is loaded when appropriate tab is activated.
 4. If you edit some content in the **HTML mode** and want to _save_ it and _update
    the post_ first switch to the **Visual tab** so the edited HTML code loads to the**
    TinyMCE editor**. It’s _required_ because the content synchronization is performed
    only after _switching off the HTML tab_.

#### Working with features

 1.  **Multicursor** lets you edit multiple regions at the same time. You can use **
     default shortcuts** to add remove regions or select multiple blocks with mouse
     holding **Ctrl key**.
 2.  **Default keyboard shortcuts** for the _Ace editor_ can be found on the [Ace GitHub Wiki](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts)
     page or on the [Ace Editor Shortcuts](http://pcadvice.co.nf/blog/ace-editor-shortcuts/)
     page I created for the WordPress version of this editor. Here I selected some 
     shortcuts and _organized_ them by _categories_.
 3.  **The Search box** gives additional functions:
 4.   * Search All instances
      * Use of Regular expressions
      * Whole word search
      * Replace content
      * Replace All
         It shows with **Ctrl+F** and **Ctrl+H** combinations.
 5.  The editor area can be **resized** using the _bottom (southern) handle_ but it
     doesn’t remember its size after switching.
 6.  **Emmet snippets** are used to improve code typing. The _documentation_:
 7.   * [Basic Usage](http://docs.emmet.io/abbreviations/)
      * [Full list](http://docs.emmet.io/cheat-sheet) of HTML and CSS snippets
 8.  **Full screen mode** is not a default Ace Editor feature. I’ve taken the idea 
     from a **demo** page in the [Ace build package](https://github.com/ajaxorg/ace-builds/tree/master/demo).
     The page is named **scrollable-page.html**.
      It adds a new custom shortcut to 
     the editor which toggles the **full/normal** mode. So I set this function to the**
     F11** key. The function extends the editor container to the Wordpess admin boundaries
     but doesn’t hide **top and left menus**. It also works if the _window size_ is
     changed or the left menu is _collapsed_. But to fill the available space in these
     cases the **F11** key must be pressed _two times_ when the editor is in the _full
     screen mode_. If you need to change this F11 key to other write me a request and
     I’ll add an option to the options page.
 9.  **The Word Wrap** checkbox appears when the **HTML tab** is switched to. By default
     the editor has word wrapping _enabled_. You can toggle this option with the checkbox.
     But it only remembers its state in the _current editor session_.
 10. I’ve also added some **custom shortcuts**:
 11.  * **Ctrl+Enter** adds a new line below the current one regardless of what is 
        the current position the cursor on the current line
      * **Ctrl+R** switches to the _Visual tab_

#### The Options Page

 1. **Font size** of the editor may be set in any CSS units _(px, pt, em)_.
 2. **Editor themes** dropdown shows default **Ace Editor** theme list plus my custom
    theme **Sublime** which is the default theme for the plugin.
 3. **The options form** is submitted using **Ajax** so the **page doesn’t reload**,
    just wait until the save button is _enabled_ and the _success message_ appears 
    at the top. Then reload the edit post page to see the editor changes.

#### Other Notes

 1. **Emmet plugin** works on the _specially built package_ for the **Ace Editor**.
    Its source is [here](https://github.com/cloud9ide/emmet-core). And I reduced its
    size by removing the _Underscore.js_ part and _CSS snippets_. So the **final package**
    is [here](https://github.com/mortalis13/emmet-for-ace-css).
 2. When the **HTML tab** is loaded the _source code_ is first represented as one long
    line. So I used the [JS Beautifier](https://github.com/beautify-web/js-beautify/tree/master/js)
    tool and exactly its **beautify-html.js** subscript to format that line so it has
    some readable structure. Additionally I applied my own function to have some blank
    lines before `<hx>`, `<p>` and `<pre>` tags.
 3. I’ve put only the _minified version_ of the **Ace Editor** scripts to the plugin
    package. To get the full **uncompressed** files go to its [GitHub repository](https://github.com/ajaxorg/ace-builds).

#### Resource Links

 1. [Ace Editor Main Site](http://ace.c9.io) and [GitHub repository](https://github.com/ajaxorg/ace).
 2. [Ace Builds GitHub repository](https://github.com/ajaxorg/ace-builds) with sources.
 3. [Ace Editor Demo Pages](https://github.com/ajaxorg/ace-builds/tree/master/demo).
 4. [Ace Editor Keyboard Shortcuts](https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts)
    and [my edition](http://pcadvice.co.nf/blog/ace-editor-shortcuts).
 5. Emmet plugin: [Main Site](http://emmet.io), [Documentation](http://docs.emmet.io),
    [List of Abbreviations](http://docs.emmet.io/cheat-sheet).
 6. [Special Emmet package](https://github.com/mortalis13/emmet-for-ace-css) for the
    Ace Editor.
 7. [JS Beautifier](https://github.com/beautify-web/js-beautify/tree/master/js).

This plugin’s GitHub repository: https://github.com/mortalis13/html-post-editor.

#### Detected Problems

 * When switching to the full-screen mode (F11) and the "Enable full-height editor
   and distraction-free functionality" Screen option is enabled the post tabbar 
   stays on the front.
 * If cursor doesn’t match its established position (e.g., should be in the line
   end after the last character but displays with offset to the left) try installing
   Consolas fonts to the Fonts folder (this problem detected in Windows XP where
   no Consolas fonts installed by default). Install all 4 types of Consolas (Regular,
   Bold, Italic, Bold Italic). I’ve taken them from Windows 7 Fonts folder.

## Capturas

 * [[
 * HTML view of the post, line highlight and matching tag highlight
 * [[
 * Multicursor and highlighting of found occurrences of the selected word
 * [[
 * Search box with RegEx mode (searches for the word with different endings)
 * [[
 * Emmet abbreviation before
 * [[
 * Emmet abbreviation after
 * [[
 * Full screen mode
 * [[
 * Options page
 * [[
 * Saving options

## Instalación

 1. Upload `html-post-editor` folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the 'Plugins' menu in WordPress.
 3. Open edit post page (add new or edit existing post).
 4. Switch to the HTML tab and check the editor loads the HTML source of the post.

## Reseñas

![](https://secure.gravatar.com/avatar/b1680ad5947384f6146b51b995a1294b8c1c8593832e7cd803f51da4d7bd18e1?
s=60&d=retro&r=g)

### 󠀁[does not work on WP 4.4](https://wordpress.org/support/topic/does-not-work-on-wp-44/)󠁿

 [Traks](https://profiles.wordpress.org/traks/) 3 de septiembre de 2016

I This plugin does not work on WP 4.4

 [ Leer todas las 3 reseñas ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/)

## Colaboradores y desarrolladores

"HTML Post Editor" es un software de código abierto. Las siguientes personas han
colaborado con este plugin.

Colaboradores

 *   [ mortalis ](https://profiles.wordpress.org/mortalis/)

[Traduce "HTML Post Editor" a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/html-post-editor-new)

### ¿Interesado en el desarrollo?

[Revisa el código](https://plugins.trac.wordpress.org/browser/html-post-editor-new/),
echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/html-post-editor-new/)
o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/html-post-editor-new/)
por [RSS](https://plugins.trac.wordpress.org/log/html-post-editor-new/?limit=100&mode=stop_on_copy&format=rss).

## Meta

 *  Version **1.0.0**
 *  Last updated **hace 11 años**
 *  Active installations **200+**
 *  WordPress version ** 4.1 o superior **
 *  Tested up to **4.1.42**
 *  Language
 * [English (US)](https://wordpress.org/plugins/html-post-editor-new/)
 * Tags
 * [ace-editor](https://es-do.wordpress.org/plugins/tags/ace-editor/)[admin](https://es-do.wordpress.org/plugins/tags/admin/)
   [html](https://es-do.wordpress.org/plugins/tags/html/)[post editor](https://es-do.wordpress.org/plugins/tags/post-editor/)
   [raw](https://es-do.wordpress.org/plugins/tags/raw/)
 *  [Vista avanzada](https://es-do.wordpress.org/plugins/html-post-editor-new/advanced/)

## Valoraciones

 3 out of 5 stars.

 *  [  1 5-star review     ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/?filter=4)
 *  [  1 3-star review     ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/?filter=2)
 *  [  1 1-star review     ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/?filter=1)

[Añadir mi reseña](https://wordpress.org/support/plugin/html-post-editor-new/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/html-post-editor-new/reviews/)

## Colaboradores

 *   [ mortalis ](https://profiles.wordpress.org/mortalis/)

## Soporte

¿Tienes algo que decir? ¿Necesitas ayuda?

 [Ver el foro de soporte](https://wordpress.org/support/plugin/html-post-editor-new/)