Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Does anyone know how to style the visual editor so that when specific shortcodes are used they are replaced with an image within the visual editor?

I have found that many users screw up the shortcode text or delete it by mistake when using the visual editor so I would like for shortcodes to be replaced with paceholder images within the visual editor. HTML editor would still show the codes though.

share|improve this question
    
Keep in mind that by deleting the inserted image, the whole shortcode will be deleted, not only messed up. –  Raphael Nov 20 '10 at 14:31
add comment

1 Answer

up vote 3 down vote accepted

I have not a working solution at hand, but what I would do is to analyze how this is done for the more seperator. In the HTML editor, there is <!-- more -->, in the visual editor, an image is displayed instead.

This is done by extending the tinyMCE editor - which is the base of the visual editor in wordpress - with a plugin. To learn more about tinymce plugins, you find more examples and documentation in the moxiecode wiki: Creating a plugin for TinyMCE (3.x).

You find example code within the following file:

wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev.js

It works basically by replacing content (e.g. the shortcode [mycode]) with some predefined HTML that contains the image. Before the content get's posted, it is replaced again with the original HTML. You can make use of regular expressions in the process. The more link is showing this quite well.

share|improve this answer
    
I have looked into this but I am a bit confused on how one can add your own code here. For example... using your example... lets say you were to add [mycode]test[/mycode] and I would like that to be replace in the editor with <div id=mycode><img src=more.gif></div> then how would I go about doing this exactly? –  NetConstructor.com Nov 24 '10 at 8:46
    
That needs to go into a TinyMCE plugin on it's own. It's done with javascript written in form of the specification, then you queue the plugin and register it with the editor. For you example code, it's easier to start with a shortcode that has not attributes and not content for the start. Because you need to be able to transform the whole shortcode into HTML and back. So it's not only for displaying but to preserve the attribute and content data as well. –  hakre Nov 24 '10 at 11:51
    
I would really appreciate if you could update your answer with an example showing how a custom shortcode can be replaced with an image or some css. The key issue here is that users seem to always either delete shortcode text from the visual editor or by mistake remove text. I am essentially just looking for a clear and simple way to ensure that such shortcodes are not simply editable like regular text. Instead the idea situation would be to represent those shortcodes through some html which cant be modified or through an image like the more tag. Ideal would be a delete button on it. –  NetConstructor.com Dec 17 '10 at 3:45
    
I don't have such a code at hand, sorry. –  hakre Dec 17 '10 at 10:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.