TinyMCE in UniGUI applications

zilav · March 20, 2012

Why is it called "tiny"? It's freaking 300kb of javascript...

updated: Removed ajax event, and a showcase of using timyMCE in new form to edit the content of UniMemo component.

TinyMCEdemo.zip

Farshad Mohajeri · March 20, 2012

Very nice.

Thanks

ldb68 · March 21, 2012

There are problem to get the html text.

Try put im html editor:

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

With GetText you get:

<tbody>

<tr>

<td>

Why is it called "tiny"? It's freaking 300kb of javascript...

Farshad Mohajeri · March 21, 2012

Output text must be encoded first.

Modify below line:

procedure TMainForm.btnGetTextClick(Sender: TObject);
begin
 UniSession.AddJS('ajaxRequest(MainForm.form, "mce", ["text="+encodeURIComponent(tinyMCE.get("ed1").getContent())])');
end;

zilav · March 21, 2012

Output text must be encoded first.

I thought unigui encodes it automatically, haven't checked it manually though. Perhaps add urlencoding to ajaxRequest() by default?

Farshad Mohajeri · March 21, 2012

I thought unigui encodes it automatically, haven't checked it manually though. Perhaps add urlencoding to ajaxRequest() by default?

Yes, we may encode parameters internally.

Logged #1290

KingOrmon · March 21, 2012

Sorry, but I don´t know how can I copy my HTML (on UniMemo component) to this component.

Could you help me ?

ldb68 · March 21, 2012

Sorry, but I don´t know how can I copy my HTML (on UniMemo component) to this component.

Could you help me ?

Error:

Unexpected token ILLEGAL

tinyMCE.get("ed1").setContent("UniMemo1

");

Problem with #13#10 in memo

Try

UniSession.AddJS('tinyMCE.get("ed1").setContent("'+ StringReplace(UniMemo1.Text,#13#10, '<br>', [rfReplaceAll]) + '")');

KingOrmon · March 21, 2012

If HTML is more complex it does not work,

I think that it needs more than replace \r\n chars.

ldb68 · March 21, 2012

If HTML is more complex it does not work,

I think that it needs more than replace \r\n chars.

Can you add a sample of complex html?

KingOrmon · March 21, 2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 
Transitional//EN">
<HTML xmlns:o = "urn:schemas-microsoft-
com:office:office"><HEAD>
<META content="text/html; charset=utf-8" http-
equiv=Content-Type>
<META name=GENERATOR content="MSHTML 
9.00.8112.16441"></HEAD>
<BODY>
<DIV>
<DIV>
<P style="MARGIN: 0cm 0cm 0pt" 
class=MsoNormal><o:p><FONT face=Calibri>Dear 
[Who],</FONT></o:p></P>
<P style="MARGIN: 0cm 0cm 0pt" 
class=MsoNormal><o:p><FONT 
face=Calibri></FONT></o:p> </P>
<P style="MARGIN: 0cm 0cm 0pt" 
class=MsoNormal><o:p><FONT face=Calibri>File 
included into attachment</FONT></o:p></P>
<P style="MARGIN: 0cm 0cm 0pt" 
class=MsoNormal> </P>
<P style="MARGIN: 0cm 0cm 0pt" 
class=MsoNormal><o:p></o:p></P>
<P style="MARGIN: 0cm 0cm 0pt" 
class=MsoNormal><o:p><FONT 
face=Calibri> </FONT></o:p></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><A 
name=_MailAutoSig><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #4f81bd; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">Regards</SPAN></A><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes">,<o:p></o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">Dept.</SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><B><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #262626; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">COMPANYU 
LTD</SPAN></B></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 8pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">Web: 
</SPAN></SPAN><SPAN style="mso-bookmark: 
_MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes"> </SPAN></SPAN><A 
href="http://www.como.net"><SPAN style="mso-bookmark: 
_MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes; mso-bidi-font-size: 
11.0pt">www.como.net</SPAN></SPAN><SPAN 
style="mso-bookmark: _MailAutoSig"></SPAN></A><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p></o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 4pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">Email: 
</SPAN></SPAN><A href="mailto:info@como.net"><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes; mso-bidi-font-size: 
11.0pt">info@como.net</SPAN></SPAN><SPAN 
style="mso-bookmark: _MailAutoSig"></SPAN></A><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p></o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 4pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #1f497d; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">Phone: 
+1 </SPAN></SPAN><SPAN style="mso-bookmark: 
_MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #4f81bd; 
FONT-SIZE: 10pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: yes">800 
07 449 181</SPAN></SPAN><SPAN style="mso-bookmark: 
_MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 4pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p></o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 4pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; COLOR: #c00000; 
FONT-SIZE: 4pt; mso-fareast-font-family: 'Times New Roman'; 
mso-fareast-theme-font: minor-fareast; mso-fareast-language: 
ES; mso-no-proof: 
yes"><o:p> </o:p></SPAN></SPAN><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 8pt; 
mso-fareast-font-family: 'Times New Roman'; mso-fareast-
theme-font: minor-fareast; mso-fareast-language: ES; mso-
no-proof: yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 9pt; 
mso-fareast-font-family: 'Times New Roman'; mso-fareast-
theme-font: minor-fareast; mso-fareast-language: ES; mso-
no-proof: yes"><o:p> </o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 9pt; 
mso-fareast-font-family: 'Times New Roman'; mso-fareast-
theme-font: minor-fareast; mso-fareast-language: ES; mso-
no-proof: 
yes">Discalimer:<o:p></o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 9pt; 
mso-fareast-font-family: 'Times New Roman'; mso-fareast-
theme-font: minor-fareast; mso-fareast-language: ES; mso-
no-proof: yes"><SPAN 
style="mso-spacerun: 
yes"> </SPAN><o:p></o:p></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><SPAN 
style="mso-bookmark: _MailAutoSig"><SPAN 
style="FONT-FAMILY: 'Arial','sans-serif'; FONT-SIZE: 9pt; 
mso-fareast-font-family: 'Times New Roman'; mso-fareast-
theme-font: minor-fareast; mso-fareast-language: ES; mso-
no-proof: yes">DISCLAIMER: 
This e-mail contains propietary information some or all of which 
may be legally 
protected. It is for the intended recipient only. If an addressing 
or 
transmission error has misdirected this e-mail, please notify the 
author by 
replying to this e-mail. If you are not the intended recipient you 
must not use, 
disclose, distribute, copy, print or relay this e-
mail.<BR></SPAN></SPAN></P>
<P style="MARGIN: 0cm 0cm 0pt" class=MsoNormal><FONT 
face=Arial></FONT> </P></DIV></DIV></BODY></H
TML>

zilav · March 21, 2012

I think TinyMCE is just a richtext editor that uses basic html tags for formatting. It is not a complete html web page editor. Your example uses custom styles, doctype, body, head, meta and other tags that don't do any formatting.

Your example also contains double quotes used in enclosing string for setContent("") method of TinyMCE, you should encode them or replace with single quote. The same applies to \r\n\ too.

p.s. If you already have html text inside some Memo, you can try to copy it directly on client

UniSession.AddJS('tinyMCE.get("ed1").setContent(MainForm.UniMemo1.value)');

KingOrmon · March 21, 2012

I will test it.

The sample code works well if I paste code using HTML toolbutton on tinyMCE.

Regards

KingOrmon · March 21, 2012

I have tried multiple replaces of html sample without success:

UniMemo1.Text := StringReplace(UniMemo1.Text, #13#10, '', [rfReplaceAll]);
UniMemo1.Text := StringReplace(UniMemo1.Text, '"', '''', [rfReplaceAll]);
UniMemo1.Text := StringReplace(UniMemo1.Text, '''', '', [rfReplaceAll]);

UniSession.AddJS('tinyMCE.get("ed1").setContent("' + UniMemo1.Text + '")');

Farshad Mohajeri · March 21, 2012

procedure TMainForm.btnSetTextClick(Sender: TObject);
begin
 UniSession.AddJS('tinyMCE.get("ed1").setContent('+StrToJS(UniMemo1.Text)+')');
end;

KingOrmon · March 21, 2012

Thank you so Much!!!!

I don´t know about this function.

Regards

ldb68 · March 22, 2012

procedure TMainForm.btnSetTextClick(Sender: TObject);
begin
 UniSession.AddJS('tinyMCE.get("ed1").setContent('+StrToJS(UniMemo1.Text)+')');
end;

Declared in ExtPascalUtils

zilav · May 12, 2012

Made some updates to demo project.

estor485 · June 26, 2012

Hello all looks very nice, but I have a doubt, is possible save the file and open after? if the answer is 'Yes', support PDF files?

Best regards.

misc · October 11, 2013

Hello Zilav,

1. Can you provide an URL to test your project?

2. I am really interested in the possibility to integrate other frameworks in uniGUI. Do you have some details on this?

Thanks.

Andrey Volkov · November 12, 2013

Hi Farshad!

Many thanks for UniGUI working on!

Start Example - TinyMCE in UniGUI applications on build 1016.

The example works very fine! Only Localhost:8077

Others IP (127.0.0.1:8077) problem : tinyMCE script is not started

Farshad Mohajeri · November 12, 2013

I tested here. It works from all URLs.

Andrey Volkov · November 13, 2013

I tested here. It works from all URLs.

Sorry, the TinyMCE version in an example the worker.

The last version of the editor from an official site works only with localhost

Farshad Mohajeri · November 13, 2013

Sorry, the TinyMCE version in an example the worker.

The last version of the editor from an official site works only with localhost

Please attach a full test case.

uniguibbs · November 3, 2014

final test case, please.

Sign In

TinyMCE in UniGUI applications

Recommended Posts

zilav

Farshad Mohajeri

ldb68

Farshad Mohajeri

zilav

Farshad Mohajeri

KingOrmon

ldb68

KingOrmon

ldb68

KingOrmon

zilav

KingOrmon

KingOrmon

Farshad Mohajeri

KingOrmon

ldb68

zilav

estor485

misc

Andrey Volkov

Farshad Mohajeri

Andrey Volkov

Farshad Mohajeri

uniguibbs

Join the conversation

Browse

Activity