iThoughts ACE Banner

iThoughts Advanced Code Editor

Cette page existe également en Français

Make your WordPress developments easier and faster thanks to this tool, the web code editor ACE, a part of the Cloud9 Web-IDE. The plugin is now delivered with an experimental and under active development code checker to never again crash your site with code errors!

Demonstration:

[ace_editor lang="php" name="hello"]<?php $text = (isset($_GET) && isset($_GET["text"])) ? $_GET["text"] : "Hello World"; ?> <div><?php echo $text; ?></div> <h1> <em> iThoughts Advanced Code Editor </em> </h1> <style> div{ text-align:center; } </style>[/ace_editor]
Please note that a GitHub bug tracker is running about the problem of tabs size you may experience with above snippet. This is a known bug that will be resolved soon. It should not happens into your WordPress backend, as it seems to be a conflict between styles that are not loaded in admin.

GitHub Repository: https://github.com/iThoughts-Informatique/iThoughts-Advanced-Code-Editor

WordPress Plugin page: https://wordpress.org/plugins/ithoughts-advanced-code-editor/

What is iThoughts Advanced Code Editor ?

The ones that had to edit directly online stylesheets, js or PHP scripts of WordPress from the basic online editor have probably felt that the WordPress admin is not made for developpers. The basic editor don’t allow neither efficiency, nor high reliability, aestheticism or readability.

iThoughts Advanced Code Editor is here to solve this. For now, it handles 4 languages with support of autocompletion (PHPHTMLCSSJavaScript) and one with partial support of autocompletion (LESS).

Because WordPress says that Code is Poetry, iThoughts Advanced Code Editor reply Code is Calligraphy.

Plugin features

  • PHP Code Check before submit to avoid site crashes! More infos here…
  • Replace the Appearance and Plugin edit tools with ACE
  • Replace the editor of some others plugins (like iThoughts HTML SnippetsiThoughts Tooltip Glossary, or others )
  • 34 themes to style your work-area the way you’ll love it
  • Automatically adapt the syntax-highlight to the language of the file
  • Automatically adjust editor size to fit your screen and give you a bigger work-area
  • Auto-completion for PHP, HTML and CSS
  • Auto-close parenthesis, brackets, HTML tags, etc etc…
  • Auto-indentation
  • Syntax and code checking to easily find errors
  • Possible to display the plugin’s edit area in client-side by a shortcode (usefull for forums with code tips). See this howto for more infos

HowTo

Install

Install the plugin from the plugins admin pannel, or:

  1. Upload the archive downloaded from the WordPress plugin page to the  “/wp-content/plugins/” directory of your site
  2. Unzip the archive
  3. Enable it through the “Plugins” pannel of your WordPress Backend

Options will be in Settings > Advanced Code Editor

 Use the client shortcode

Please note that:

  • this is a form feature, and it is not intended to be used to display code.
  • If you want to display code, then use plugins like the awesome Crayon Syntax Highlighter.
  • Using this feature is up to you, and it was designed for demo needs. I give you the ability to use it only if you understand that it may work, but I don’t consider this feature as a feature I’ll give support for.

The client shortcode have to be enabled in iThoughts Advanced Code Editor options. Then, use it this way:

If you have Crayon Syntax Highlighter installed, it can be usefull to change the openning  <pre> tag to  <pre crayon="false"> If you have <br />  tags that breaks everything no matters what you do, or still experiencing format problem, I recommend you to use a non-TinyMCE editor or an editor specialized for raw HTML, like iThoughts HTML Snippets to set up your content.

You can find here some usefull html entities.

Character Code Usage
	
&#9;
Tabulation
<
&lt;
Opening tag
>
&gt;
 Closing tag

Use the Code Checker

Version 1.2.0 introduce the Code Checker. This tool will try to find errors in your code, to avoid 500 errors and crashing down your server. You won’t anymore have to login in SSH or use FTP to fix a typo in your PHP files.

Supported checks

  • v1.2.0: syntax code check. Will find unexpected ;,()[] , for example, or vars missing $ at the beginning. It checks if the file is a valid syntaxed PHP file.

How to check if CodeChecker is ready?

Codechecker is ready

Codechecker is ready

When the codechecker is ready, a blue tag with “Codecheck {language}” will appear at the bottom of the editor, next to the “Update” button. This tag means that every attempt of update on this file will be intercepted and checked, so don’t worry about mistakes, they’ll be catched.

If no error were catched by the codechecker, the file will be auto updated. Else, the error message will be displayed next to the codecheck tag.

Every modification in the file will reset the check status, that will have to be re-checked before effective edition.

 Hey! CodeChecker is wrong!

It is a very experimental feature, that will require a lot of tests and other types of checks, like function arguments testing, class methods visibility, inheritance, namespace/function/class existence, etc etc. All those checks are planned, and the final CodeCheck will never let you submit invalid or buggy behaving code. But, if checks that were already coded returns wrong results, you are able to send me false positive/negative reports through the Advanced Code Editor Option pannel. Please provide as many informations as you can, and I’ll try to fix it as soon as possible.

Interactions with other plugins

Relation Versions Usage
Advanced Code Editor

HTML Snippets
1.1.0

0.1.1
Autocompletion and syntax coloration for PHP & HTML in snippets edition
Advanced Code Editor

Tooltip Glossary
1.1.0

2.4.1
Use an ACE editor in the custom CSS fields of the iThoughts Tooltip Glossary theme editor

How to support me

It’s easy, fast, free, and gratifying