Wysiwyg Integration

I'd love to do this. I'll have to look at how font selection works with the WYSIWYG module and see if it's possible and what it would take.

Now that 2.x is working, I'm moving all 1.x issues there.

Trying this in D7 first.

The attached file is a submodule to expose @font-your-face fonts to the WYSIWYG API. It's mostly functional (though ugly), but has one major problem: the WYSIWYG iframe doesn't use the preprocess system to determine CSS, so fonts don't actually get loaded in the WYSIWYG. The fonts work fine after the content is saved, but being able to see the results of edits in the editor is kind of the whole point of WYSIWYG. It's not even worth doing if that problem can't be solved.

Hopefully there's a solution to this problem, but I don't currently see any way to load more than one CSS file, nor external CSS in the WYSIWYG iframe.

I've been using TinyMCE in testing, have no idea yet how this works in other editors.

I opened an issue in the WYSIWYG queue that will make this possible in D7, along with some changes to fontyourface_add_css_in_preprocess(): #1048300: Handle external CSS in wysiwyg_get_css()

Still not sure if this will ever work in D6.

I just bumped that WYSIWYG issue. Not sure if that will help at all.

This should happen in 7.x-2.x now.

I installed 7.x-2.0 and I still don't see my web fonts appear in CKEditor.
I also tried 7.x-2.x and I don't see it with that one either. Am I missing a setting?

Jesmaster, that functionality isn't complete yet. This issue is marked as "postponed" because we're waiting on something to complete it. If you read this thread and still thought it was complete, let me know how I can make that clearer. If you didn't read this thread before asking your question, you should start reading the thread first to save yourself (and others) some time.

I read the thread.
I thought your post that said

This should happen in 7.x-2.x now.

meant the functionality was added in that version.

Ah, I can see how that would be confusing. No, I mean future work on this should happen in 7.x-2.x. Unfortunately that work can't happen until the WYSIWYG module is updated, so we're stuck waiting on that.

Any movement on this? Your patch at http://drupal.org/node/1048300#comment-4045880 is marked "Reviewed and Tested". If I install that patch and your patch here at #4, will this feature work? I have had no success adding fonts manually in WYSIWYG (TinyMCE), and I have a client who insists on using a script font. This would be a really simple solution. Otherwise, I'll go back to banging my head against a brick wall and figure out how to add the font manually.

Yeah, that patch has been RTBC for over a year. I haven't tested the code here or there on any of the updates since then. Back when I wrote it, the code here was a proof of concept and still needed some UI work. I probably won't do much more on it as long as we're waiting for that WYSIWYG patch to get in, since the code here is useless without that and I'm not really interested in trying to support a patched version of WYSIWYG.

Understood.

Sun is reporting that the patch will be rolled into dev in the next 12 hrs. That was last night http://drupal.org/node/1048300#comment-5927164

Yeah, I talked to sun in IRC today. I should have done that months ago. I'll try to get this working soon with the WYSIWYG dev.

Awesome, thank you for the hard work! I imagine this will be useful to a lot of people.

I just committed an initial version of this. Still needs some work, but my intent is to get this done before the next release and I wanted to get it in Git in case anyone else wants to help with that. Specifically, what I know still needs to be done:

1. Font CSS should load within the WYSIWYG preview, so you actually see the font while you're typing.
2. Button image needs to be improved. It's currently too big, so you only see part of the @ character.
3. List of fonts should go away when clicking somewhere outside the list.

And some nice-to-have improvements:

1. Button seems to get stuck in active state for some reason.
2. It would be nice to add some text next to the button, or generally make it work like the default font option works. Not sure if that's possible via WYSIWYG plugins.

Congratulations! Going to take a look at it tomorrow, don't know yet if I'll be able to help anything (js still isn't my strong suit).

On a side note, probably because of all the time it took to develop this, there are CVS tags all over the place (fontyourface_wysiwyg.info, fontyourface_wysiwyg.module, plugins/fontyourface.inc).

I can't get enabled fonts to load in WYSIWYG CKEditor, list just says NONE.

EDIT: Weird, works fine on my other sites.

For me the button appeared in WYSIWYG CKEditor but did not display the fonts menu as it was looking for the wrong DOM element class. Once I fixed that I still couldn't see the menu until I raised its z-index. Attached is a patch for both issues.

rerolled patch

Using WYSIWYG dev, CKEditor 4.1.2 and fontyourface v2.8.

I can add the @fontyourface button to the ckeditor, but it is greyed out, meaning I am not able to select it and it does not expand. I have 2 google fonts enabled.

#24 patch made it so the dropdown menu appeared with the list of enabled font when I clicked on the fontyourface button in the WYSIWYG editor, but the font was not actually applied (nothing happened in fact).

Similar issue than #25 :(

CKEditor 3.6.6.1.7696 with Wysiwyg 7.x-2.2 @font-your-face 7.x-2.8 (should I try the dev version?)

One font enabled (just enabled, assigned to nothing), and the ckeditor button shows -- NONE --

Edit: (I'm usign Domain Access Module too) A warning message is appearing at dblog:

page not found 11/09/2013 - 11:36 sites/default/files/fontyourface/wysiwyg.css

Trying to track from where it is coming form...

Found what was happening (in my case)

In fontyourface_wysiwyg.module...

<?php
/**
 * Implements template_preprocess_page().
 */
function fontyourface_wysiwyg_preprocess_page(&$vars) {

  $fonts = fontyourface_get_fonts();
 //...
}
?>

And then, in fontyourface.module...

<?php
/**
 * Gets fonts, defaults to all enabled.
 */
function fontyourface_get_fonts($where = "enabled = 1 AND css_selector != ''", $order_by = 'name ASC') {
  //...
}
?>

I only enabled the font, and didn't assign a css_selector, that's why the list was empty. Is this "Working as intended"?

Tanks.

Adding my voice to #27. It wouls be interesting to be able to add fonts to the WYSIWYG button without having to assign them a default css selector.

It may sounds couter-intituive but I'd like to give my customer more flexibility with his website, enforcing a site wide theming is'nt always an option.

EDIT : I tried the solution said earlier. It doen't work. The fonts won't show up in CkEditor 4.2.0.f74e558. My font is enabled. I tried setting it on body, then giving it a class, either wway it won't show up.

And in fact, setting it to body changed nothing to my website. I'll dig this up...

Any chance of progress on this? The module notes say this will be a focus of the 7.x-2.7 release, but the module is already on 7.x-2.8.

I just stumbled across this module and noticed a need to contact "the Wysiwyg dev" was mentioned earlier, and thought "Hey, that's me!". ;)

I don't have the time to dig deep into this issue right now (I really need to focus on actually making a new Wysiwyg release, it's long overdue...), but if there are questions about the Wysiwyg plugin API, a specific editor, or anything else which could be related, I'd be happy to answer them as good as I can.

If you want to propose new features - or expand existing ones - to help this module do something, I will surely take a look at it. I can't promise to get something into the next release though, because of the aforementioned overdueness.

Same issue - that is fonts are enabled and applied to css selectors and fontyourface_wysiwyg is enabled and ticked in the profile - button shows on toolbar in the active state, but nothing happens when pressing - oh so sad, I really want to use it!

Drupal 7.x
CKEditor 4.4
WYSIWYG 7.2x-dev [to use CKEditor 4.4]
fontyourface 7x-2.8

"oh so sad, I really want to use it!"

Same...
Only workaround (for local fonts) i found is to put the font file into the theme directory, then load it from the css files (@font-face{}), hack the tinymce JS files to insert the font in its Fonts list. That works but FaceYourFonts and its Wysiwyg button become totally useless (in my case)...

Any updates here?

If you modify in fontyourface.module the following function:

/**
 * Gets fonts, defaults to all enabled.
 */
function fontyourface_get_fonts($where = "enabled = 1 AND css_selector != ''", $order_by = 'name ASC') {

  $fonts = array();

  $results = db_query('SELECT * FROM {fontyourface_font} WHERE ' . $where . ' ORDER BY ' . $order_by);

  while ($result = $results->fetchObject()) {
    fontyourface_add_font_tags($result);
    $fonts[$result->fid] = $result;
  }  // while

  return $fonts;

} // fontyourface_get_fonts

to

/**
 * Gets fonts, defaults to all enabled.
 */
function fontyourface_get_fonts($where = "enabled = 1", $order_by = 'name ASC') {

  $fonts = array();

  $results = db_query('SELECT * FROM {fontyourface_font} WHERE ' . $where . ' ORDER BY ' . $order_by);

  while ($result = $results->fetchObject()) {
    fontyourface_add_font_tags($result);
    $fonts[$result->fid] = $result;
  } // while

  return $fonts;

} // fontyourface_get_fonts

then you can see every enabled font, not only those attached to a CSS selector. Just delete << AND css_selector != '' >>.