Press enter to see results or esc to cancel.

The Best Tool to Edit HTML, JavaScript within your MCE Editor

So, you may or may not know what TinyMCE is; and odds are, even less of you know what it stands for. However, WordPress users use it every day. TinyMCE (Tiny Moxiecode Content Editor) is a web-based editor that allows users to enter and edit JavaScript, HTML, Plain Text and functions as a WYSIWYG (What you see is what you get) editor. It’s really a wonderful piece of work that is an open-source project that anyone is welcome to take and customize to their needs. This is the editor you interact with when using WordPress. Good as it is, though; there is always room for improvement. The plugins give you additional functionality and expand the power that already lies at your fingertips.

Bootstrap MCE CSS

https://github.com/davewarfel/Bootstrap-MCE-CSS

Bootstrap is one of the most powerful and useful frameworks available on the web, and thanks to this plugin, you can now harness more of that power in your TinyMCE editor and on your site. With this MCE addition, you can add Bootstrap features like Grid Layouts, Headings, Buttons, Labels, Badges, Alerts, List Groups, Panels, Wells, and Media Groups. Just be aware you will still need to add the Bootstrap CSS and JS files to the front end of your site to take effect.

MCE Table Buttons

https://wordpress.org/plugins/mce-table-buttons/

Sometimes an add-on or plugin isn’t giving you anything new, rather restoring a different function. While WordPress utilizes TinyMCE they don’t use ALL of it. One of the features removed is the table editing controls found in the full version of TinyMCE. You will now have great control over the details of your tables and have a much easier time with them if you are working on the visual side of things. It is important to note that you will want to check for compatibility with other plugins that significantly alter, replace, or remove and of the visual editor’s default abilities.

AddFunc WYSIWYG Helper

https://wordpress.org/plugins/addfunc-wysiwyg-helper/

AddFunc doesn’t introduce new abilities, per se. Rather, it acts as an aid to help editors see exactly what they are editing. What it does is highlight important HTML elements in the visual editor so you can get a clearer idea of what formatting is in your content. With a colored box, and a label you will be able to quickly identify <p>, <div>, <ol>, <ul>, <li>, and <span>. It will also serve as a tool to get a more accurate representation of what content will look like on the page.

WP Edit

https://wordpress.org/plugins/wp-edit/

WP Edit is the culmination of 3 years of development via its predecessor, Ultimate TinyMCE. It puts many of the tools and functionality you need at your fingertips in an optimized and easy to navigate manner. You will also have greater control when using the visual editor. Still not as much as getting granular with actual HTML and CSS coding, but far more than without this one. You will get an easier interface for inserting images, media, YouTube videos, and clip art into your page and a graphic interface for creating and inserting tables. The controls also make it much easier to adjust table properties like cell border and background colors as well as giving your quick access to all shortcodes available for your use.

Comments

Comments are disabled for this post