5

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.

Improve this question
1
  • Keep in mind that by deleting the inserted image, the whole shortcode will be deleted, not only messed up.
    – Raphael
    Commented Nov 20, 2010 at 14:31

1 Answer 1

Reset to default
3

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.

Improve this answer
4
  • 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
    Commented Nov 24, 2010 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
    Commented Nov 24, 2010 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
    Commented Dec 17, 2010 at 3:45
  • I don't have such a code at hand, sorry.
    – hakre
    Commented Dec 17, 2010 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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