[Plugin: Ultimate TinyMCE] Array is changed when added to editor

Resolved Treebeard
(@malawimama)

11 years, 9 months ago

I finally got it working after messing with the Arrays a bit. I found an issue that’s troubling and I’m hoping for some help:

When I select the text I want to apply a custom style to, add a link, then select the style from the dropdown I noticed that parts of my Array are getting messed up in the HTML editor (you can’t see the link in Visual after the style is applied).

What I’m trying to do is create a link that uses an image rather than text, using CSS. So the link text itself is indented while the background image should appear in it’s place. I do this very often using CSS, and it works using my stylesheet, but not when I use those styles in an Array. The code is changing slightly (see below) so it’s breaking the style I want to apply and not showing anything at all on the frontend.

Here’s a copy of my Arrays:

Array( Array( 'title' => 'Get Started Button', 'selector' => 'a', 'styles' => Array( 'width' => '177px', 'height' => '50px', 'border' => 'none', 'outline' => 'none', 'padding' => '0', 'display' => 'block', 'overflow' => 'hidden', 'background-image' => 'url(images/btnGetstarted.png)', 'background-position' => 'center top', 'background-repeat' => 'no-repeat', 'text-indent' => '-9999px', 'float' => 'right')), Array( 'title' => 'Find Out More Button', 'selector' => 'a', 'styles' => Array( 'width' => '177px', 'height' => '50px', 'border' => 'none', 'outline' => 'none', 'padding' => '0', 'display' => 'block', 'overflow' => 'hidden', 'background-image' => 'url(images/btnFindOutMore.png)', 'background-position' => 'center top', 'background-repeat' => 'no-repeat', 'text-indent' => '-9999px', 'float' => 'right')))

And here’s a copy of the code after it’s applied in the editor:

<a style="width: 177px; height: 50px; outline: medium none; padding: 0px; display: block; overflow: hidden; background-image: url('images/btnGetstarted.png}'); background-position: center top; background-repeat: no-repeat; text-indent: -9999px; float: right;" title="Test Post" href="http://mywebsite.com/test-post/">Get Started</a>

Notice the extra code that’s being added – it changes it to:

background-image: url(‘images/btnGetstarted.png}’)

What I need to actually do is assign a div to the style, but I don’t know how to do that with an Array. If I could just assign a style that is already defined in my stylesheet, then that background image would work fine, and so would the rollover. Right now, all I can see in the HTML tab of the editor, after applying the style, is everything but the background image. That is getting changed in the code for some reason, and the image is not appearing in the editor at all, so you can’t see the text unless you view HTML.

Is it possible to use the plugin add-on to just add a div style using an array? All I really need to do is give the client the ability to add links to these 2 styles from the dropdown, and I’d really like to keep the css in the stylesheet, rather than in the arrays if that would work.

Thanks!

http://wordpress.org/extend/plugins/advanced-text-widget/

http://wordpress.org/extend/plugins/ultimate-tinymce/

Viewing 12 replies - 1 through 12 (of 12 total)

Plugin Author Josh
(@josh401)

11 years, 9 months ago

Okay, so explain to me what exactly it is you are trying to do. And I’ll see if I can determine the best method.

Perhaps show me the css you would like to use which you know works from your stylesheet. Then, we can identify where it’s going wrong.
Thread Starter Treebeard
(@malawimama)

11 years, 9 months ago
OK sounds good! Here’s my css for one of the buttons:
```
.getstarted {
	width: 100%;
	height: 50px;
	margin: 5px 0 15px 0;
}

.getstarted a, .getstarted a:link, .getstarted a:active, .getstarted a:visited {
	width: 177px;
	height: 50px;
	display: block;
	overflow: hidden;
	background-image: url(images/btnGetstarted.png);
	background-position: center top;
	background-repeat: no-repeat;
	text-indent: -9999px;
	float: right;
}

.getstarted a:hover {
	background-position: center bottom;
	background-repeat: no-repeat;
}
```
Then I want to use it like this:

<div class="getstarted"><a href="....">Get Started</a></div>
Plugin Author Josh
(@josh401)

11 years, 9 months ago
Okay, we are going to try this first.

Thy using this as your array:
```
Array( Array( 'title' => 'Get Started Button', 'block' => 'div', 'styles' => Array( 'width' => '177px', 'height' => '50px', 'border' => 'none', 'outline' => 'none', 'padding' => '0', 'display' => 'block', 'overflow' => 'hidden', 'background-image' => 'url(images/btnGetstarted.png)', 'background-position' => 'center top', 'background-repeat' => 'no-repeat', 'text-indent' => '-9999px', 'float' => 'right')), Array( 'title' => 'Find Out More Button', 'selector' => 'a', 'styles' => Array( 'width' => '177px', 'height' => '50px', 'border' => 'none', 'outline' => 'none', 'padding' => '0', 'display' => 'block', 'overflow' => 'hidden', 'background-image' => 'url(images/btnFindOutMore.png)', 'background-position' => 'center top', 'background-repeat' => 'no-repeat', 'text-indent' => '-9999px', 'float' => 'right')))
```
Thread Starter Treebeard
(@malawimama)

11 years, 9 months ago

Hi Josh,

I tried that, but it broke the editor so it gets stuck in HTML mode and you can’t click back into Visual. If you want I can send you the login privately, if you’d like to check out the admin.

Thanks!~

Plugin Author Josh
(@josh401)

11 years, 9 months ago

You can do that. You can use my contact form here:
http://joshlobe.com/contact-me/

Plugin Author Josh
(@josh401)

11 years, 9 months ago

Working on it now…

Plugin Author Josh
(@josh401)

11 years, 9 months ago

Okay, I’ve added my premium classes and id’s plugin to your installation.

Try this workflow…

1. Hit return to make sure you are on a new line.
2. Type some text for your link.
3. Highlight that text and select (getstarted) from the dropdown classes.
4. Re-select your text again, and click the “insert link” button.
5. Type the link where you want to be sent.
6. This will make the text disappear from the content editor… but it will leave all the necessary code to make the image appear and be click-able.
7. Preview your page from your front-end of the website.

Now, is this what you were trying to accomplish? I may have mis-understood what you are attempting to do.

But, give this a try and see what you get…

Thread Starter Treebeard
(@malawimama)

11 years, 9 months ago

Thanks! That looks like what we were going for, the button appears on the fronted perfectly and the link works. Now I just have to figure out how to add another button!
Thank you so much for your help. I’ll let them know this is working now.

Plugin Author Josh
(@josh401)

11 years, 9 months ago

You’re welcome.

To use another button… just set up another class. Like .getstarted2

Thread Starter Treebeard
(@malawimama)

11 years, 9 months ago

Hi Josh,

I noticed in the advanced config there are 2 files mentioned in there, one is wp-content/plugins/ultimate-tinymce-classes-ids/css/classes_and_ids.css and the other is wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. What happens to these files when we perform upgrades?

I’m going to move the classes_and_ids.css to a stylesheet within our theme directory, but what about the other one?

Plugin Author Josh
(@josh401)

11 years, 9 months ago

You can’t move that stylesheet. It has to stay in the plugin directory. The scripts call the file from that location. You also cannot change the name of the file.

Neither of these two files will be affected during upgrades. One is from my premium classes and id’s plugin, and the other is from the default wordpress tinymce css.

That is the purpose of the advanced config premium plugin. It allows you to edit every single option in the tinymce interface. This was necessary in order to get the editor to load the styles from both locations.

Thread Starter Treebeard
(@malawimama)

11 years, 9 months ago

That’s strange then, because I copied the classes_and_ids.css to a new file I named ‘advancedconfig.css’ in my theme directory, and changed it there in that box to the new link (didn’t change the other one). When I tried it in the editor, it worked even better, because now you can see the button appear in the text editor, floated to the right like it’s supposed to be. Before that, you couldn’t see the image in the editor. So far, it’s working fine, but if anything changes / breaks, I will change it back to what it was and update the other stylesheet in the plugin directory.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘[Plugin: Ultimate TinyMCE] Array is changed when added to editor’ is closed to new replies.