Title: HTML Post Editor
Author: mortalis
Published: <strong>Igbe 9, 2015</strong>
Last modified: Èbìbí  13, 2015

---

Ṣàwárí àwọn plugin

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

Plugin yìí **kò tíì ṣe àyẹ̀wò pẹ̀lú àwọn ìtújáde mẹ́ta pàtàkì tó kẹ́yìn ti WordPress**.
Ó lè jẹ́ pé a kò tọ́jú tàbí ṣe àtìlẹ́yìn fún un mọ́, ó sì lè ní àwọn ọ̀ràn ìbámu
nígbà tí a bá lò ó pẹ̀lú àwọn ẹ̀yà WordPress tuntun.

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

# HTML Post Editor

 Láti ọwọ́ [mortalis](https://profiles.wordpress.org/mortalis/)

[Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/html-post-editor-new.zip)

 * [Àwọn àlàyé](https://yor.wordpress.org/plugins/html-post-editor-new/#description)
 * [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/html-post-editor-new/#reviews)
 *  [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/html-post-editor-new/#installation)
 * [Ìdàgbàsókè](https://yor.wordpress.org/plugins/html-post-editor-new/#developers)

 [Ìrànlọ́wọ́](https://wordpress.org/support/plugin/html-post-editor-new/)

## Àpèjúwe

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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá:’
    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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’ve taken them from Windows
   7 Fonts folder.

## Àwọn àwòrán ìbòjú

[⌊HTML view of the post, line highlight and matching tag highlight⌉⌊HTML view of
the post, line highlight and matching tag highlight⌉[

HTML view of the post, line highlight and matching tag highlight

[⌊Multicursor and highlighting of found occurrences of the selected word⌉⌊Multicursor
and highlighting of found occurrences of the selected word⌉[

Multicursor and highlighting of found occurrences of the selected word

[⌊Search box with RegEx mode (searches for the word with different endings)⌉⌊Search
box with RegEx mode (searches for the word with different endings)⌉[

Search box with RegEx mode (searches for the word with different endings)

[⌊Emmet abbreviation before⌉⌊Emmet abbreviation before⌉[

Emmet abbreviation before

[⌊Emmet abbreviation after⌉⌊Emmet abbreviation after⌉[

Emmet abbreviation after

[⌊Full screen mode⌉⌊Full screen mode⌉[

Full screen mode

[⌊Options page⌉⌊Options page⌉[

Options page

[⌊Saving options⌉⌊Saving options⌉[

Saving options

## Ìgbéwọlẹ̀

 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.

## Àwọn àgbéyẹ̀wò

![](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/) Ọwẹ́wẹ̀ 3, 2016

I This plugin does not work on WP 4.4

 [ Ka gbogbo àwọn àgbéyẹ̀wò 3 ](https://wordpress.org/support/plugin/html-post-editor-new/reviews/)

## Àwọn Olùkópa & Olùgbéejáde

“HTML Post Editor” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti ṣe ìkópa
sí plugin yìí.

Àwọn Olùkópa

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

[Túmọ̀ “HTML Post Editor” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/html-post-editor-new)

### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?

[Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/html-post-editor-new/),
ṣàyẹ̀wò [ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/html-post-editor-new/),
tàbí ṣe àgbékalẹ̀ sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/html-post-editor-new/)
nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/html-post-editor-new/?limit=100&mode=stop_on_copy&format=rss).

## Àkójọpọ̀ Meta

 *  Ẹ̀yà **1.0.0**
 *  Ìgbàgbọ́hùn tó kẹ́yìn **ọdún 11 sẹ́yìn**
 *  Àwọn ìgbéwọlẹ̀ tó ṣiṣẹ́ **200+**
 *  Ẹ̀yà WordPress ** 4.1 tàbí ju bẹ́ẹ̀ lọ **
 *  Dánwò dé **4.1.42**
 *  Èdè
 * [English (US)](https://wordpress.org/plugins/html-post-editor-new/)
 * Àwọn àmì
 * [ace-editor](https://yor.wordpress.org/plugins/tags/ace-editor/)[admin](https://yor.wordpress.org/plugins/tags/admin/)
   [html](https://yor.wordpress.org/plugins/tags/html/)[post editor](https://yor.wordpress.org/plugins/tags/post-editor/)
   [raw](https://yor.wordpress.org/plugins/tags/raw/)
 *  [Ìwòye Tó Péye](https://yor.wordpress.org/plugins/html-post-editor-new/advanced/)

## Àwọn ìbò

 3 lára àwọn ìràwọ̀ 5.

 *  [  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)

[Your review](https://wordpress.org/support/plugin/html-post-editor-new/reviews/#new-post)

[Wo gbogbo àwọn àgbéyẹ̀wò](https://wordpress.org/support/plugin/html-post-editor-new/reviews/)

## Àwọn Olùkópa

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

## Ìrànlọ́wọ́

Nǹkan wà tí o fẹ́ sọ? Ṣé o nílò ìrànlọ́wọ́?

 [Wo àpéjọ ìrànlọ́wọ́](https://wordpress.org/support/plugin/html-post-editor-new/)