前言介紹
- 這款 WordPress 外掛「HTML Post Editor」是 2015-04-08 上架。
- 目前有 200 個安裝啟用數。
- 上一次更新是 2015-05-13，距離現在已有 3644 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.1 以上版本才可以安裝。
- 有 3 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
mortalis |
外掛標籤
raw | html | admin | ace-editor | post editor |
內容簡介
這個外掛會在預設的文章編輯器中新增一個 HTML 編輯器，透過新的 HTML 標籤存取。開啟標籤時，編輯器會載入文章的原始 HTML 來源，進行格式化並將 Ace 編輯器套用到輸入區域。因此，編輯區域具有此網頁編輯器的主要功能：語法高亮、行號、配對標籤和括號的強調顯示、鍵盤快捷鍵等。此外，這個外掛基於「ACE Editor for WP」外掛，為 WordPress 4.1 和 Ace 編輯器 1.1.8 版本所更新。
功能特色包括：語法高亮、行號、行強調、配對標籤和括號的強調顯示、語法檢查、多游標、Ace 編輯器的快捷鍵、搜尋框、可調整大小的區域、Emmet HTML 快速碼、全螢幕模式、可切換自動換行選項、自訂快捷鍵、選項頁面等。
使用方式：在切換到 HTML 標籤之前，先確認您正在視覺標籤上，因為此腳本會從 TinyMCE 編輯器載入資料，而該編輯器僅在啟用視覺標籤時才會載入。當您在文字標籤上時，HTML 標籤會被禁用並呈淺紅色背景，以防止衝突。啟用 HTML 標籤後，文字標籤會被禁用，所以您只能切換到視覺標籤。此外，編輯某些內容時，如要保存並更新文章，必須先切換到視覺標籤以便將編輯後的 HTML 代碼載入到 TinyMCE 編輯器中，因為只有關閉 HTML 標籤後，才會進行內容同步。
多游標讓您可以同時編輯多個區塊，您可以使用預設快捷鍵新增或刪除多個區域或用滑鼠以 Ctrl 鍵選取多個區塊。Ace 編輯器的預設鍵盤快捷鍵可在 Ace GitHub Wiki 頁面或我為 WordPress 版本這個編輯器所建立的 Ace Editor Shortcuts 頁面上找到。搜尋框提供其他功能，例如：搜尋所有實例、使用正規表示式、全字搜尋、取代內容、取代全部，您可以使用 Ctrl+F 和 Ctrl+H 組合鍵顯示。可調整大小的區域可以使用南邊的手柄進行調整，但切換後不會記住其大小。Emmet 快速碼可用於改進代碼輸入。全螢幕模式不是 Ace 編輯器的預設功能，我從 Ace build 套件中的 Demo 頁面（名為 scrollable-page.html）中得到此想法。我新增了一個可切換全螢幕/一般模式的自訂快捷鍵功能，將其設置為 F11 鍵。此功能會將編輯器容器延伸到 WordPress 管理界面的邊界，但不會隱藏頂部和左側功能表。
原文外掛簡介
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 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
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.
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.
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.
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
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.
Default keyboard shortcuts for the Ace editor can be found on the Ace GitHub Wiki page or on the Ace Editor Shortcuts page I created for the WordPress version of this editor. Here I selected some shortcuts and organized them by categories.
The Search box gives additional functions:
Search All instances
Use of Regular expressions
Whole word search
Replace content
Replace All
It shows with Ctrl+F and Ctrl+H combinations.
The editor area can be resized using the bottom (southern) handle but it doesn’t remember its size after switching.
Emmet snippets are used to improve code typing. The documentation:
Basic Usage
Full list of HTML and CSS snippets
Full screen mode is not a default Ace Editor feature. I’ve taken the idea from a demo page in the Ace build package. 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.
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.
I’ve also added some custom shortcuts:
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
Font size of the editor may be set in any CSS units (px, pt, em).
Editor themes dropdown shows default Ace Editor theme list plus my custom theme Sublime which is the default theme for the plugin.
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
Emmet plugin works on the specially built package for the Ace Editor. Its source is here. And I reduced its size by removing the Underscore.js part and CSS snippets. So the final package is here.
When the HTML tab is loaded the source code is first represented as one long line. So I used the JS Beautifier 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
and
tags.
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.Resource Links
Ace Editor Main Site and GitHub repository.
Ace Builds GitHub repository with sources.
Ace Editor Demo Pages.
Ace Editor Keyboard Shortcuts and my edition.
Emmet plugin: Main Site, Documentation, List of Abbreviations.
Special Emmet package for the Ace Editor.
JS Beautifier.This plugin’s GitHub repository: https://github.com/mortalis13/html-post-editor.
Detected ProblemsWhen 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.各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「HTML Post Editor」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Raw 》Raw 外掛可以讓您直接從 DSLR 相機上傳輸 RAW 圖像文件到 WordPress。, 一旦上傳了原始檔，Raw 外掛會建立 JPEG 複本，之後 WordPress 將會產生所有縮略圖。,...。
iThoughts HTML Snippets 》透過這個外掛程式，您可以創建 HTML 片段或原始 PHP 代碼。不需要再擔心煩人的 TinyMCE HTML 規則，適用於所有創建 HTML 片段的使用者，也可以使用佔位符: 這...。
FF Block Gist Embed 》使用 FF Block Gist Embed，您可以嵌入來自 GitHub Gists 的檔案。它會在 WordPress 編輯介面中新增一個名為「Gist Embed」的區塊。對於每個此區塊的實例，您...。