TinyMCE Problems

[Joe]

Hello everyone

I know there have been other discussions regarding TinyMCE and
KnockoutJS. I can't seem to find even a simple case, though.

With my situation, I have 3-4 text areas that I will need to have on
my screen. Data-binding is properly set up and works so long as I'm
not trying to utilize a WYSIWYG editor, it seems.

If I do the code below, everything works great, but I get none of the
WYSIWYG fanciness:

<input type="text" id="textThatShouldBeBound" data-bind="value:
TextThatShouldBeBound" maxlength="4000" />

When I try to utilize the WYSIWIG, though, I see nothing. I tried to
follow along with Ryan Hoffman's thread (http://groups.google.com/
group/knockoutjs/browse_thread/thread/c99219d905d610fa) but I believe
that's far more complicated than anything I need. Regardless I tried
this:

<textarea id="test" data-bind="tinymce: TextThatShouldBeBound,
tinymceOptions: { theme: 'advanced' }">"></textarea>

I also tried putting the tinyMce portion of the code from the
javascript here into my Script portion, but I'm not able to see any
results. That Javascript portion came from one of Mr. Niemeyer's
JSFiddle pages: http://jsfiddle.net/rniemeyer/BwQ4k/


Does anyone have some suggestions for very basic 1:1 databinding for
multiple text areas on a single page?

Thanks!

[rpn]

Hi Joe-

Here is a simpler example: http://jsfiddle.net/rniemeyer/na9hD/

It uses a custom "tinymce" binding.

On the left-side of the fiddle click on "Manage Resources".  You can see that Knockout, tinymce, and a jQuery plugin for tinymce are referenced.  Additonally, under Choose Framework, jQuery is referenced.

So, maybe you did not have all of the appropriate references.

Whatever your issue is, I would be happy to help you troubleshoot.

[Joe]

Very awesome. This is exactly what I needed. I'll let you know if I
have any more questions. Thanks!

[Joe]

Ok. When I step through the code by hand, it's giving me an error on
this line in the Init:
setTimeout(function() { $(element).tinymce(options); }, 0);

The error is this:
Uncaught TypeError: Object [object Object] has no method 'tinymce'


I have the ko.bindingHandlers.tinymce code placed inside an
Initialize function, per the code below:


var model = @Html.Raw(Json.Encode(Model));
var viewModel;

$(document).ready(initialize());

function initialize() {
ko.bindingHandlers.tinymce = {
...
}

viewModel = ko.mapping.fromJS(model);
viewModel.fieldOne = ko.observable("one");
ko.applyBindings(viewModel)
}


The actual HTML element is defined below:
<textarea class="tinymce" id="test" data-bind="tinymce: fieldOne,
tinymceOptions: { theme: 'advanced' }">"></textarea>


The value IS initially in the tinyMce editor, but doesn't update. I'm
assuming because of the error above. Do you have any idea why this
could be occurring?

[rpn]

Are you referencing the tinymce jQuery plugin and probably referencing it after tinymce itself? jquery.tinymce.js 

[Joe]

Wow. I totally missed that. Thanks.

I think I've got everything else I needed figured out for now
regarding tinymce and the databinding. Thanks!

On Sep 14, 10:25 pm, rpn <rnieme...@gmail.com> wrote:
> Are you referencing the tinymce jQuery plugin and probably referencing it

> after tinymce itself? jquery.tinymce.js<http://tinymce.moxiecode.com/js/tinymce/jscripts/tiny_mce/classes/ada...>

[Joe]

Ok. Today is the first day I've tried adding in a second TinyMce-
bound textarea. Watching the values as I update everything, though,
when I update the text in the first box, it changes the value on the
second box and leaves the value on the first box empty. You'll notice
that my tinymceOptions are using a tinyMceOptionsList. I declared
that and put all of my TinyMce options in there to flesh the box out
more fully. It works great with a single text area, and appears to
still hold its functionality with more than one (as I would expect).

Any ideas/recommendations on what could be causing this?


<div>
<label for="exampleText">Example:</label><br />
<textarea class="tinymce" id="exampleText" data-bind="tinymce:
ExampleText, tinymceOptions: tinyMceOptionsList" style="width:
1000px;"></textarea>
</div>
<div>
<label for="breakdownText">Breakdown:</label><br />
<textarea class="tinymce" id="BreakdownText" data-bind="tinymce:
BreakdownText, tinymceOptions: tinyMceOptionsList" style="width:
1000px;"></textarea>
</div>


Values after I update ExampleText:

viewModel.ExampleText(): null
viewModel.BreakdownText(): '<p>test</p>'

[rpn]

Hi Joe-

OK- grab the custom binding from this fiddle again: http://jsfiddle.net/rniemeyer/na9hD/

The issue was that the we were reading the options object and adding the setup option with an onchange pointing at the current element.  In your case, you are using the same object, so it would end up with the same onchange for both editors.

Now, I do a ko.toJS on the options, which will create a copy of the object and unwrap any observables inside of it.  Should handle your case properly.

[Scott Messinger]

I've also been using tinyMCE and the current code for the update causes the cursor position to be lost (as the text is rest). Also, I didn't find the code to remove the editor worked. So, I rewrote it using the jquery plugin.

I've updated the fiddle with the handler I'm using:

http://jsfiddle.net/cTtcp/1/

Let me know if you see any bugs!

Scott

[rpn]

I can't remember for the life of me why we didn't just use the jQuery plugin to remove like your change, since it was already being used.  Seems like a cleaner way to do it for sure.

[Joe]

Awesome. Works beautifully now! Thanks for all your help!

[Scott Messinger]

I've updated the code on the wiki to reflect our changes:

https://github.com/SteveSanderson/knockout/wiki/Bindings---tinyMCE

[Joel Hulen]

Scott, I encountered a little bug with your custom binding handler.
I'm not sure where else to post my little fix...

In my scenario, I'm retrieving my ViewModel data from a web service on
document ready. Some of this data is bound to textareas that
incorporate your tinyMCE custom binder. These values are part of an
observable array, so I may have many additional textareas with this
binding, but I digress...

I encountered an issue where the HTML data returned from the web
service would mysteriously have all the HTML tags stripped after being
set to the tinymce element.

It ended up being a timing issue. So, what I did was make a small
adjustment to the init portion of your binding handler. I moved the
"el.html(value)" line inside of the preceding setTimout function:

setTimeout(function () { el.tinymce(options); el.html(value); }, 0);

Works like a charm now!

Thanks for the great work!
Joel

[Scott Messinger]

Hi Joel, 

I just found the same bug! I had to change el.html() to el.val() and it worked fine. For me, the bug only appeared in IE. I think setting html on a textarea doesn't work right in IE.

-Scott

[Joel Hulen]

Scott,

Changing from el.html() to el.val() is actually a better way to go.
Thanks.

I did find one more bug:

When running IE8 in Compatibility Mode, and you have more than one
textarea using the tinymce binding handler, it is possible to receive
a jQuery exception where tinyMCE is not defined. This is due to how
you're ensuring the id is not undefined in the update: portion of the
binding handler. I had to change the if statement to be this:

if (id !== undefined && id !== '') {

In compatibility mode, the browser was getting past the check in the
if statement because the value of id was empty ('') instead of
undefined.

Please update the wiki accordingly.

Joel

[Michael Luckenbill]

Is there anyway to get the toolbar on the tiny mce to show up on the
top of the text area?*

[Joel Hulen]

Simply pass in the correct tinyMCE options.

I actually modified the tinymce binding handler init: section like so:

var options = allBindingsAccessor().tinymceOptions || {
theme: "advanced",
theme_advanced_toolbar_location: "top"
};

I omitted my other styles for brevity. What the above does is to use
the passed in options, if they exist, or use the options object as a
default.

Joel

On Sep 26, 11:55 am, Michael Luckenbill <michael.luckenb...@gmail.com>
wrote:

[Scott Messinger]

It has been changed on the wiki!

[gonza...@gmail.com]

Hi! i have a problem when i'm using the binding with a custom button, it doesnt appear at all and i dont know why.

[updog]

I am having an issue with tinymce within a foreach using a very basic example - http://jsfiddle.net/DwLqj/4/

If you update the content in the first or second box by either typing or copy paste, the third box updates. Is someone able to explain what is happening here?

[juan...@gmail.com]

Hi all!

I know I'm kind of late to the party but I want to ask you guys if by any chance any of you would upload a working example (not in a jsfiddle) because I tried to copy what was on the jsfiddle (libraries and all) and didn't work at all (I just can't get tinymce to work)

Here is the code I used http://pastebin.com/J2N7mEg7

What am I missing? I've managed to get tinymce working before with other sites, but I just can't get it to work like your jsfiddle! (this one http://jsfiddle.net/scottmessinger/yJ5GV/2/)

Thanks a lot guys

[gggg...@gmail.com]

I have the same problem and I can`t find solution