TinyMCE with dhtmlxForm

Suite and Optimus Suite 5
#1

Hi there,

I have just recently started developing my back end systems with dhtmlx and I would like to first thank all the developers for such an amazing and powerful tool.

I would like to use tinyMCE with the dhtmlxForm component, I have seen in one of the support pages that you have created a sample for people in the past on how to go about it but the code was not publicly available unfortunately, could you please guide me on how to do this or if you could provide a sample of how to use tinyMCE with dhtmlxForm I would really appreciate it as my system is in dire need of it.

Thank you very much.

1 Like
#2

Hi,

Form allows to create a new contorls:
docs.dhtmlx.com/doku.php?id=dhtm 
 ustom_item

And here is the sample in Form package:
dhtmlxForm/samples/02_items/12_custom.html

I have attached the sample with possible control for tinyMCE
dhtmlxform_tinymce.zip (133 KB)

#3

Thank you so much!! It works very well! This is amazing :slight_smile:

#4

Fabulous news. Now, how about something similar for CKEditor - just to solve a 3 year old request :wink:

#5

how about something similar for CKEditor

The same can be used for the CKEditor editor - see attached. We did not add destruct() and other methods for this item type. You may add them yourself if they’re needed.
dhtmlxform_ckeditor.zip (32.3 KB)

#6

Thank you for your response. It worked for me after I included the CKEditor source (missing from the provided sample download).

I can also report the provided sample also honours the CKEditor config.js configurations. I wasn’t sure how to put the editor configurations in the sample.html.

The editor in the form can also be instantiated using XML.

[code] function doOnLoad() {

		myForm = new dhtmlXForm("myForm");
		myForm.loadStruct("codebase/cked.xml");
	}[/code]

:slight_smile:

#7

We do not support CKEditor editor. You may learn CKEditor API and implement the new form type or modify the type from my sample as you need.

I wasn’t sure how to put the editor configurations in the sample.html

The second parameter of render method - object with item settings.

#8

sendData();

I found that the tinyMCE prototype does not send data back to be saved. I had to add:

tinyMCE.init({


onchange_callback : “tinyMCEsendData”
});

and

//Save tinyMCE Form Data
function tinyMCEsendData(inst){
//alert(inst.getBody().innerHTML); //test
dpf.sendData();
}

Hopes that saves someone some time.

#9

You said: " I found that the tinyMCE prototype does not send data back to be saved. I had to add" and then you give the code.

I am trying to use that to see if I can get my form to send the info back to the database with a tinymce editor field. I have it working in the form 
 just won’t submit the info to the db.

Can you tell me just a bit more about how to get this working. It appears that the first part of the code you suggest goes into the tinyMCE.init({ }); Area. Got that in place but not sure where the


function tinyMCEsendData(inst){
//alert(inst.getBody().innerHTML); //test
dpf.sendData();
}

goes??? And then I see sendData(); at the top or your reply. Should that be included somewhere as well. I do have the send button on the form with this code:

myForm.attachEvent(“onButtonClick”, function(id){
if (id==‘save’){
myForm.save();// saves data to db
alert(“Your Information Was Submitted Successfully!”);
}
});

Does that have to be altered somehow? I was just thinking that your sendData(); may be something like the myForm.save(); info in my code??? No???

Sure hope that I can get this woring!!! TY!

#10

Correct, the first part goes into the tinyMCE.init({ }) list.

Just make sure that when you append the: onchange_callback : “tinyMCEsendData” that there is a comma between it and the previous pair (no comma at the end).

This part tells the tinyMCE code to execute a function named “tinyMCEsendData” after the editor recognized a change. At this point we haven’t actually saved anything; this only created a call to a function named “tinyMCEsendData”, and inside that function there is code that does the saving.

In my case I save my form with the command: dpf.sendData();

And my function is:

function tinyMCEsendData(inst){
dpf.sendData();
}

The function name: tinyMCEsendData is the connection with “tinyMCEsendData” above. I could have picked any other name as long as the init and function match.

You would replace dpf.sendData(); with whatever command you use to save your form.

I have this function located in the same js area as the vast majority of my code between:

dhtmlxEvent(window,“load”,function(){ })

My excuses for the sendData(); on top; it was intended to help focus on the subject as a header.

#11

THANKS for this very quick reply! Sorry I am so confused
 but here is what I have for my form:

===============================================================================

I do have the top part in correctly in the tinyMCE.init({ area. Just not sure how to change your function to work with what I have now.

Your assistance would be VERY MUCH APPRECIATED!!

#12

Hi

please provide direct link to your demo
(you can share it here or send us to support@dhtmlx.com, please include link to this thread in your message)

#13

I just emailed support with the information requested. The link to my demo and the url of this forum page. Thanks!

#14

Hi

thanks for link. well, I not sure you need to ask for support of dhtmlx, you have all good on your side. logic the following:

myForm.send() ->
myForm.getFormData() ->
dhtmlXForm.prototype.getFormData_tinyMCE (with return, good) ->
getValue: function(item) { return tinyMCE.get(item._idd).getContent();

but tinyMCE.get(item._idd).getContent(); every time returns “” (empty string)

I tried also tinyMCE.activeEditor.getContent() - it returned “blablabla” I entered (good?)

maybe this, maybe not. anyway I think you need to check tinyMCE doc and findout how to get content correctly

also editor’s name: “Edit” already used by label above. you can remove label’s “name” attr

#15

Sorry, don’t understand that reply. Is it possible for you to send email returned with the changes you are suggesting? A reply to my email with the code you are suggesting?

#16

I mean that form works fine

you have code:
getValue: function(item) {
return tinyMCE.get(item._idd).getContent();
}

code " tinyMCE.get(item._idd).getContent(); " always return empty string
problem here, it is not dhtmlx side

but you can try to replace this part
tinyMCE.get(item._idd).getContent();
with
tinyMCE.activeEditor.getContent();
not sure if it correct but it works

#17

Yes, just updated that line and it did save the info from the editor
 the only issue there is that it is not inserting html code to database. For example
 if I want to use the editor to insert an image like this:

then it does not save it that way
 ends up being empty???

Thoughts?

#18

Same if I try and choose a font-family, font-size, font-color, etc


Does not save it that way. Strips html code but does save escape slashes like: Let’s

The purpose for the tinymce editor is so that I can save the html to the database and then retrieve it for display pages. Even to use edit and delete images in the edit and delete fields at some point.

#19

Just tried

POST Data is okey:
1355842101685_Edit:

please send to support@dhtmlx.com formdata.php, seems like it cut < and >

#20

Just sent that to you via email. TY