Question

I'm integrating the HTML editor CKEditor in my Cocoa app using a WebView.

So far it works as expected except for one thing: if I open a NSColorPanel anywhere else in the app and select a color, the color of the selection in CKEditor changes auto-magically!

How can this happen? How is NSColorPanel (a Cocoa window) communicating with CKEditor (a HTML widget!)? And finally, how can I prevent this behaviour?

Code

I'm loading CKEditor by subclassing WebView and overriding initWithFrame:frameName:groupName.

- (id) initWithFrame:(NSRect)frame frameName:(NSString *)frameName groupName:(NSString *)groupName {
    if (self = [super initWithFrame:frame frameName:frameName groupName:groupName]) {
        NSURL *baseURL = [[NSBundle bundleForClass:self.class] URLForResource:@"ckeditor" withExtension:nil];
        [self.mainFrame loadHTMLString:kCKEditorTemplate baseURL:baseURL];
    }
    return self;
}

And the NSColorPanel is opened like this:

- (IBAction)menuColor:(id)sender {
    [[NSColorPanel sharedColorPanel] orderFront:self];
}

What I've found out so far

  • The WebView class reference says that WebView implements changeColor::

This method is invoked by the NSColorPanel sender and behaves similar to the changeColor: method in NSTextView.

However, I tried overriding changeColor: and it's not being called.

  • When the selection color is changed via NSColorPanel, CKEditor adds a <font> element instead of a <span> element (like is does when the text color is changed via the toolbar). Meaning that the selection color is not changed by the traditional means (maybe the pasteboard?).
  • The same thing happens with NSFontPanel.
Was it helpful?

Solution

I don't have any experience about cocoa and webview, I can only try to think of this with regards to the IE activeX control so I might be wrong.

That being said:

If the inserted code is using font instead of span, then I think that it's not CKEditor but Webkit the one that it's inserting that code.

You can try to load a page that instead of a CKEditor instance it has just a content editable div and then perform the same test to verify if it's something done inside webkit:

<div contentEditable=true>this is editable, select some text and open the nscolorpanel</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top