How to Add HTML Directly into Visual Editor without Switching to Text Editor in WordPress

Love WordPress Visual Editor? Then this article is for you.

Hello I’m NAE, a technology consultant in Japan.

I usually blog in Japanese, but this time I tried English because I want to introduce a very simple WordPress plugin which may be helpful for Visual Editor lovers all over the world.

The plugin is called: “Paste Raw HTML”.

Love Visual Editor of WordPress

I do love built in WYSIWYG editor of WordPress, namely VIsual Editor or Tiny MCE.

It helps me to concentrate on writing content of articles, frees me up from messy HTML tags, and provides me useful keyboard shortcuts which are crucial to speed up my blogging.

So I really want to complete my blogging within a world of Visual Editor. This is where I came from.

BUT the problem is…

Problem: You Can’t Run Away from Text Editor

Visual editor doesn’t let you directly paste (or insert) HTML.

If you want to paste blog parts made of HTML you need to go to Text Editor, paste the code, and come back to Visual Editor to see how it really looks like.

But switching from/to Visual/Text editor is totally annoying as below.

  • Visual to Text: resets cursor position which forces me to scroll to where I was.
  • Text to Visual: re-rendering takes some time before I restart writing.

For instance, most of affiliate programs provide banner and text links in HTML format, and they prohibit editing those snippets, which means you cannot make use of built-in “Insert link” function (Ctrl + k) of Visual Editor. All you can do is just copy those HTML snippets, switch to Text Editor, go to where the snippet should be, paste, switch to Visual Editor, and find where you were.

Also in some cases WordPress clears white spaces or line breaks when switched and it is totally annoying especially for Visual Editor users.

I have been suffering from those issues ever snce I started blogging on WordPress, and I thought this may be the same for the most of Visual Editor lovers.

Introducing a WordPress Plugin “Paste Raw HTML”

So I developed a very simple WordPress plugin called “Paste Raw HTML”.

It enables you to insert HTML directly into Visual Editor.

How It Works

Paste Raw HTML Button

(Pardon some Japanese chars in screen shot)

It adds a single button which looks like “</>”.

When clicked, it pops up a prompt which allows you to write HTML as below.

HTML直挿入ボタンを押すと現れるプロンプト

Clicked on OK button, the HTML code is inserted, interpret, and shown on Visual Editor as it really look like when published.

Real Example

For example, a box below is inserted using “Paste Raw HTML” button. I didn’t even put my mouse on Text Editor tab. (Pardon Japanese again…)

Best Suitable When Applied CSS to Visual Editor

“Paste Raw HTML” plugin is best useful when you applied CSS to Visual Editor.

Try customizing Visual Editor by following this instruction. You will get a near real WYSIWYG experience when done.

Here are sample screen shots of my WordPress Visual Editor.

カエレバのブログパーツを挿入したところ

自前で作った吹き出しパーツを挿入したところ

What I did are:

  1. Prepare “editor-style.css” and load the file using add_editor_style() function
  2. Write a one linear into the CSS file which looks like @import("style.css");
  3. Done

This will apply the real CSS (style.css) into Visual Editor.

Download and Install

You can download the plugin from a link below.

The Zip file is as small as 2KB with only 3 files, namely

  • pasteRawHtml.php: Defines least functions to hook,
  • pasteRawHtmlButton.js: Defines how the button works, and
  • pasteRawHtmlButton.png:  Defines how the button looks like.

You can install and enable the plugin as usual.

スポンサーリンク

Disclaimer

This plugin is developed and tested under WordPress 4.7.2 and PHP 7.

Please be sure you test installation and see it functions properly in your test WordPress site before using on production site.

Please use the plugin at your own risk. No warranty or guarantee is provided.

If you have any questions regarding this plugin, please leave a comment on this page.

Version History / Change log

  • Mar. 6 2017: Initial version (ver 0.1)
スポンサーリンク

Please Help Yourself to “Paste Raw HTML” plugin

With “Paste Raw HTML” plugin, you can avoid or at least decrease chances to get annoyed with going back and forth between Visual/Text Editor in WordPress.

Hope this plugin helps.

スポンサーリンク
スポンサーリンク
スポンサーリンク

この記事をシェアする

おすすめ記事

あなたにオススメの記事

スポンサーリンク
スポンサーリンク