TinyMCE with dhtmlxForm


#41

Then please attach completed demo including all corresponding js/css files


#42

Andrei … sorry, stuck in meeting, answering from iPhone …
WIll try later …


#43

Hi Andrei
Here is the code
I have NOT included all the DHTMLX stuff. At the top you will see:

These point to a version of DHTMLX JUST downloaded today. No point sending it all back to you!

One thing I am most interested in is this: Is it possibile to attach “tinymce” to a window or a layout instead of a form. I would like it to be able to resize. I cannot do that in a form (or can I) ?

Thank you again
Francesco
code4Andrei.zip (135 KB)


#44

Hi

please try completed demo
55_tinymce.zip (444 KB)


#45

Hy Andrei…
OK this works perfect as it is.
But my tinymce initialization was more complicated, I need a lot more controls:

tinymce.init({
selector: ‘textarea’
, height: 500
, theme: ‘modern’
, plugins: [
‘advlist autolink lists link image charmap preview hr anchor pagebreak’
, ‘searchreplace wordcount visualblocks visualchars code fullscreen’
, ‘insertdatetime media nonbreaking save table contextmenu directionality’
, ‘emoticons template paste textcolor colorpicker textpattern imagetools’
]
, toolbar1: ‘insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image’
, toolbar2: ‘print preview media | forecolor backcolor emoticons | table’
, image_advtab: true
, templates: [
{ title: ‘Test template 1’, content: ‘Test 1’ }
, { title: ‘Test template 2’, content: ‘Test 2’ }
]
, content_css: [
//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css
, ‘//www.tinymce.com/css/codepen.min.css
]
});

How can I do this?

Also, is it possible to put the editor directly in a window or a layout or do I HAVE to put it on a form? As I said before, I would like to be able to have tinymce resize as the container resizes.

THank you again,
Francesco


#46

I GIVE UP on tinyMCE!
I’ve been trying all morning to change the default font, but it seems to be blocked!

Thanks for all your help, Andrei

F


#47

Hi

well, all you conf you can use in form init, i.e.:

[code]// form init
{type: “tinymce”, name: “editor_1”, label: “TinyMCE #1”, value: “this is text for #1”, tinyMCE_conf: {
param1: value1, pram2: value2, …
}}

// dhtmlxform_item_tinymce.js
dhtmlXForm.prototype.items.tinymce = {
render: function(item, data) {

tinymce.init({
selector: “#”+item._tinyId,

param1: data.tinyMCE_conf.param1,
param2: data.tinyMCE_conf.param2,

});
}
};
[/code]

regarding attach it to a cell - you can cell.attachObject() or cell.attachHTMLString() and then init tinyMCE, even more better:

[code]dhtmlXCellObject.prototype.attachTinyMCE = function(conf) {

this.callEvent("_onBeforeContentAttach",["tinymce"]);
this.conf.tinymce_id = "tinymce_id_"+window.dhx4.newId();

var obj = document.createElement("TEXTAREA"); // <-- this one should be resized when cell resized
obj.id = this.conf.tinymce_id;
obj.style.width = "100%";
obj.style.height = "100%";
obj.style.position = "relative";
obj.style.overflow = "hidden";
this._attachObject(obj);

this.dataType = "tinymce";
this.dataObj = { // this var should be object
	setSizes: function(){}, // this one will called when cell resizes, add some code?
	unload: function(){} // this one will called when cell's unload started, add some code?
};

tinymce.init({
	selector: "#"+this.conf.tinymce_id,
	param_1: conf.param1,
	...
	param_X: conf.paramX
});

this.callEvent("_onContentAttach",[]);
return this.dataObj;

};[/code]

and then:

dhxWins.window(id).attachTinyMCE({ // tiny mce conf here });

also you can try to contact our sales dept at sales@dhtmlx.com and request customization or extra tinymce complete module or any other WYSIWYG editor optimized for your needs


#48

WOW, thanks Andrei, that is PERFECT …

Now, if only I can solve the font problem …

:slight_smile:

F


#49

What’s the problem with font?


#50

I cant find ANYWAY to change it!
I’ve read all the docs about inserting the font selector into tinyMCE but NONE of them work!


#51

Hy Alexandra!
I KNOW you dont support ckEditor officially BUT
Can you pls tell me how to get and save the contents??
If I just put it on a form, when I use the connector I loose ALL the HTML formatting (BOld, H1, etc)!!
I’m going CRAZY.
THe only reason I use ck is because I tried to use tinyMCE but I’m stuck with just ONE font .


#52

Hi

Win wars, not battles :wink:

Please attach timyMCE complete demo (excluding dhtmlx pro files if any) and describe exatcly the problem with fonts (i.e. first click here then here) also attach info regarding current and expected behaviour, I’ll check how to help.


#53

Good Morning Andrei and WOW, I LOVE your philosophy!
Ok, here is my demo. I am NOT including DHTMLX or tinymce as they are simply the latest downloadable from the sites.

the .mce-tinymce styles are very useful as they allow tinymce to always grow or shrink to fill its container (in this case a cell in a layout).

My problem is that no matter what I try, I CANNOT get the font selection dropdown to appear!

Thank you and keep up the good quotes!

Francesco
tinymce3.rar (1.97 KB)


#54

Hi

try the following

, toolbar1: 'fontselect fontsizeselect | insertfile undo redo ...

#55

OMG!
That’s IT! … I’m sure I tried it sometime in my crazy experiments, but I suppose it just needed your magic touch!!! :wink:

Ok, Andrei, my next War :wink: is loading and saving content: I noticed that IF I put any formatted HTML content in a text-box of a form, it gets somehow “filtered” by DHTMLX (i.e. the html tags are removed).
So How can I load and save content of tinyMCE to db?
I solved this problem with ckeditor by:
a) getting the contents of the editor using: “CKEDITOR.instances.topicNotesTemp.getData()”
b) using “encodeURIComponent”
c) saving the result in a hidden field on a form.
to save the data to db
and then reversing the process to load contents into the editor.


#56

Andrei YOU are sooo right about the wars. Unfortunately they are made up of little battles :wink:
My toolbar is too long now, so I tried splitting it in two by using:
toolbar1 = " xxxx | xxx …
toolbar2 = "yyyy | zzzz …
But only the first one shows.
I also tried:
toolbar = [“xxx | yyy | …”
, "zzzz | aaaa | … "]
But that doesn’t work either…
Sorry about the code above but I am writing on my iPhone !


#57

it gets somehow “filtered” by DHTMLX (i.e. the html tags are removed).

Are you using connectors on server side? Connector will do filter HTML tags by default.
docs.dhtmlx.com/connector__php__ … urity.html

ConnectorSecurity::$xss = DHX_SECURITY_TRUSTED;

#58

If anyone has used this , please post the solution.


#59

Thank you so much! http://adeleweightloss.com/

It works very well! This is amazing


#60

Yeah it actually does :slightly_smiling_face: