Need visual border around text in TinyMCE editor WordPress
- REFUNDED
Hi,
Basically I've created a wordpress plugin that inserts a custom piece of code into the page (which is later parsed by the plugin).
The plugin creates a button which when clicked gives a prompt that looks like this: http://www.acidicnightmares.com/ccstuff/popup.png
They fill in the prompts then click insert and it outputs the following code:
<test name='New Test'>
<addtext text='Some Headline'>
<addtext text='This is another headline'>
<addtext text='Final Headline'>
</test>
For the purpose of this example I'll call this a 'test'
Currently when the user goes to the visual editor it shows nothing where that code is.
What I'd like the visual editor to do is show the value of the first addtext (so in this case it would be 'Some Headline') with a red dotted border around it (or if that is not possible perhaps some other kind of highlighting).
I also need it so that when the user has their cursor placed on the test in the visual editor then clicks the button it gives that popup with the current values already filled.
So if the user has like 3 different tests on their page they will see all 3 in the visual editor and can click on any one of them then click on the button to edit it and after editing can click save to have it resave the new values out to that test.
I tried looking into the table TinyMCE plugin as it is similar to what I want done but couldn't figure out how it worked, perhaps if you know TinyMCE well you could look at the code for that plugin as it does pretty much everything I want.
Thanks, Tim
Answers (3)
Pippin Williamson answers:
First, ensure that you have enabled custom editor stylesheets by putting this in your main plugin file:
add_editor_style(WP_PLUGIN_DIR . '/your-plugin-name/editor-style.css');
Then create <strong>editor-style.css</strong> in your plugin folder, and add something like this to it:
test {
border: 1px dashed #ff000;
}
Kailey Lampert answers:
I agree with Pippin on the point about adding a border.
However, to get the visual editor to display the value of one of those tags ("Some headline") looks like it would be a lot trickier.
Would the way your plugin parses that data allow you to put the "Some Headline" portion inside the <test> tags, but outside the <addtext>? For example:
<test name='New Test'>
Some Headline
<addtext text='Some Headline'>
<addtext text='This is another headline'>
<addtext text='Final Headline'>
</test>
Denzel Chia answers:
Hi,
You need to use the following tinyMCE event functions to highlight the code inserted by your tinyMCE button as an image, it will be replace back into your original code before inserting into database, just like what <!--more--> and [gallery] does in WordPress.
You can open up editor_plugin.dev of WordPress tinyMCE plugin as an example.
located in
wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev
or
wp-includes/js/tinymce/plugins/wpgallery/editor_plugin.dev
Look for something like the following, you will need to know a lot about Javascript regular expressions so as to understand how the code matches and replaces content.
ed.onBeforeSetContent.add(function(ed, o) {
o.content = t._setEmbed(o.content);
});
ed.onPostProcess.add(function(ed, o) {
if ( o.get )
o.content = t._getEmbed(o.content);
});
_setEmbed : function(c) {
//function to trigger to replace code into image highlight
},
_getEmbed : function(c) {
//function to replace back content before post
},
Sorry, but I cannot produce everything for you here as I will need your working copy of tinyMCE plugin.
It also helps if you can change you codes to WordPress shortcode as it will not be strip by tinyMCE editor.
such as;
[test name='New Test']
[addtext text='Some Headline']
[addtext text='This is another headline']
[addtext text='Final Headline']
[/test]
Then code a WordPress Shortcode to parse the above from content into your actual codes.
This way, at least your codes will not be strip from WordPress editor and you client can still edit the content of the shortcode easily.
In order words, write a tinyMCE plugin to produce WordPress shortcode and parse shortcode from content, as oppose to what you are doing now.
Hope it helps.
Thanks.