Diese Seite mit anderen teilen ...

Informationen zum Thema:
Forum:
WinDev Forum
Beiträge im Thema:
20
Erster Beitrag:
vor 4 Jahren, 10 Monaten
Letzter Beitrag:
vor 4 Jahren, 10 Monaten
Beteiligte Autoren:
Peter Holemans, Piet van Zanten, Alexandre Leclerc, Fabrice Harari, Peter Ho.

[WB18] HTML Text Edit Control

Startbeitrag von Peter Holemans am 17.06.2013 09:53

Hi all,

I have a requirement for a WebDev application where in an HTML text edit field a mixture of chinese and latin characters need to be entered by end users. Is this supported by default in the WebDev edit control or should I look at an external html text editor component? As I don't have any Chinese language knowledge I'm not sure how to test this... Any hints are greatly appreciated.

Thanks in advance.

Peter H.

Antworten:

Hi Peter,

Make sure your database supports unicode. Then, for the default HTML edit field, we never use it, prefering CKEditor. It's super easy to integrate and is more than feature complete. If you are interested in using CKEditor, I can send some code.

Best regards,
Alexandre Leclerc

von Alexandre Leclerc - am 17.06.2013 12:42
Hi Alexandre,

Thanks for the tip. The database and all tekst fields are indeed defined as unicode.
I had a quick look at CKEditor. Looks indeed very powerful.

I would be very grateful if you could send some code snippets on how to integrate that.
If you plan on doingthat by e-mail: peter dot holemans AROBASE mcs2 dot eu.

Thanks,

Peter H.

von Peter Holemans - am 17.06.2013 18:05
Hi Peter,

Here is a small example:

1. Download ckeditor full source and extrand the content into YourSite_WEB folder. (ie. YourSite/YourSite_WEB/ckeditor/*)

2. In the page where you want to use ckeditor, add a javascript ressource (Description of the page -> Advance tab -> Javascript tab, add: ..\ckeditor\ckeditor.js

3. Add an edit control to the page and change the type for "multi-line text" (not HTML; you need a textarea control in html). Give it a good size.

4. In the OnLoad browser code event, add the following:

EXTERN CKEDITOR
CKEDITOR.replace(EDT_YourField..Alias)



5. Run you page. It should work just like that.


Advanced example:

Now you'll most probably want to personnalize the editor. So let's change a bit the example. We will create a javascript function for this purpose.

6. Creat a local javascript function called AddCKEditor(fieldID, fieldHeight, fieldColor)

7. Add the following code (this will personalize the toolbar, color, behaviour, etc):

function AddCKEditor(fieldID, fieldHeight, fieldColor)
{
var editor = CKEDITOR.replace(fieldID, {
removePlugins: 'elementspath',
height: fieldHeight,
language: 'fr',
uiColor: fieldColor,
toolbar: [
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
]
} );
}



8. Then in the OnLoad, errase everything we added and simply put the following code:

AddCKEditor(EDT_YourField..Alias,EDT_YourField..Height,ColorPalette(colorBackgroundMenuTab))



You're done. You can create different procedures like that for different editor configurations and put them into a collection of procedures and call the one you need in a page. (All you will need is always add the javascript ressource in the pages where you need the editor and call your function on the required fields.) Using the online help of CKEditor will allow you to integrate as required. http://docs.ckeditor.com/#!/guide

And if you use this method (not inline editing), you have nothing else to do to integrate with WebDev and post the changes. You can link the text control to a DB field and it will just work.

Best regards,
Alexandre Leclerc

von Alexandre Leclerc - am 17.06.2013 18:41
Hi,

Look at the Wedev solutions forum, I posted a tutorial for CKeditor some time ago.
See this post
Because of a Webdev bug regarding multiline text edit controls I changed to TinyMCE, however this bug also applied to TinyMCE.
The bug caused the page to hang if the html code contained any special characters.
Mean time PCSoft have fixed the bug, so both editors work with Webdev now.
Once the bug was solved I didn't feel the need to change back to CKEditor again.

Regards,
Piet

von Piet van Zanten - am 17.06.2013 22:15
Hi Alexandre & Piet,

Many thanks for your detailed explanation.
It's highly appreciated!

Cheers,

Peter H.

von Peter Holemans - am 18.06.2013 07:50
Hi Piet,

This is interesting, we used TinyMCE at first, then switched to CKEditor because it was more advanced (back in 2011). But now, looking at your post and TinyMCE again, I see that they made quite interesting progress. Both editors are quite good now.

Best regards,
Alexandre Leclerc

von Alexandre Leclerc - am 18.06.2013 12:51
Hi Piet and Alexandre,

Just a quick question that (seen you experience in this) you probably can answer by heart:
The text is stored/linked to a class member.
What are the in/out statements with this class member?

In other words, what do I need to do so that the content is transferred together with
SourceToPage()
and
PageToSource()
?

Thanks!

Peter

von Peter Holemans - am 19.06.2013 14:41
Hi Peter,

I'm using a simple file link to the control and FileToPage, PageToFile.
So I suppose SourcetoPage vice versa will work too.
Both are server procedures, so FileToPage is executed before all the browser stuff and PageToFile comes last.

Regards,
Piet

von Piet van Zanten - am 19.06.2013 17:20
Hi Peter,

As Piet said, there is nothing special to do: use databinding from the control to the class and SourceToPage() / PageToSource() and you are ready to go.

Best regards,
Alexandre Leclerc

von Alexandre Leclerc - am 19.06.2013 17:34
Hi,

Unfortunately the PageToSource() doesn't update the class member...
I'll test a bit further...

Regards,

Peter

von Peter Holemans - am 20.06.2013 07:07
Hi all,

No, can't get it to work...
- Text control on page linked to CKEditor is regular multi line text control
- Tried class member as well as string type as buffer type (nothing is returned in debug after PageToSource)
- Page with CKEditor is opened using PageDisplayDialog()...

Any ideas?

Cheers,

Peter
-

von Peter Holemans - am 20.06.2013 10:47
All,

Aside from my previous message, I'm looking at TinyMCE as an alternative to CKEditor. I'm testing by following the old WB11 tutorial on Wtablettes but can't get it to work in WB18.

Any hints would be highly appreciated!

Cheers,

Peter

von Peter Holemans - am 20.06.2013 11:50
Any ideas? What is being transferred is the alias, not the content...



von Peter Holemans - am 20.06.2013 14:36
Hi Peter,

This looks puzzling.
Can you trace the TextHM content just before the PageToSource and does it look like HTML?
I've seen Webdev do unpredictable things on complex pages.
Can you try a small simple page without the other tabs?
In my experience especially browser code sometimes seems to be "forgotten" by Webdev during a compile.
(Errors keep popping up even when code is fixed or removed)
When things get ugly I often delete all the following folders:
- exe folder
- all language folders in the root my project
- all language folders in YOURPROJECT_WEB
- the .cpl folder (all .cpl folders)
- the res folder in YOURPROJECT_WEB
On startup Webdev will rebuild all of them. You may need a recompile to get rid of gui errors.
(Please make a backup first, just in case)
This works even better than a "repair".

Regards,
Piet

von Piet van Zanten - am 20.06.2013 19:34
Hi Piet,

Many thanks!
Indeed, I created a really dumb page and there it works like a charm...
Something to post to Tech Support?
Or will they say: 'It's an external component so we don't support that'...

Best regards,

Peter H.

von Peter Holemans - am 21.06.2013 08:35
Hi,

Probably they will not support it.
Also, if you report it you'll need to send them a sample project, which involves a lot of work.

You might try a button with pagedisplaydialog or a popup with only the simple HTML edit and return the resulting HMTL to the calling page.
Advantage of a page to a popup is that all the javascript and CKeditor stuff is contained in the HTML editor page, so it does not put extra load on your main page.

Regards,
Piet

von Piet van Zanten - am 21.06.2013 09:05

ISSUE IDENTIFIED: [WB18] HTML Text Edit Control

Hi All,

Just as an update I want to share that I have identified the issue where CKEditor isn't loaded in certain cases.

When the page inherits from a model/template page the CKEditor functionality doesn't work. When it is used in page that is not part of a model it works.

Unexplainable but that is the case...

Cheers,

Peter H.

von Peter Ho. - am 26.06.2013 09:49

Re: ISSUE IDENTIFIED: [WB18] HTML Text Edit Control

Hi Peter,

I'm using a page template especially for pages that use HTML editing that includes all the necessary stuff for including TinyMCE, which works fine in WB 17. I don't think it contains any style stuff, just the HTML editor code. (I'm not at my dev computer right now)
You can try creating a blank page template that holds the HTML editor stuff like the javascript files and such.
Then add this template to the page. (first in rank if there is a rank)
I have never used more than one page template for a page, but it might work.
It may also be a WB18 thing, if I can find the time I'll do a test migration to check if my WB17 stuff works in WB18.

Regards,
Piet

von Piet van Zanten - am 26.06.2013 12:08

Re: ISSUE IDENTIFIED: [WB18] HTML Text Edit Control

Hi everybody

a few more pieces of information on CKEditor

First, the settings given by Alexandre to integrate CKEditor may be OK for a webdev CLASSIC site, but is not adequate for an AWP one, as the files needed are not searched at the right place in this case. No big deal, just have to fiddle around to set things up correctly...

Second, the fact that in some cases, you get nothing from the field used by CKEditor SEEMS to come (as far as my tests went) from the fact that its only when the SUBMIT button is clicked that the html code is copied into the original edit field. So if you need the content of the field BEFORE that (for something done in ajax, by example, or simply a process on the browser side), you need to use some javascript code asking politely CKEDITOR to give you the content (same thing for setting the content on the browser side of the code)

Third, I ran into a funny bug when trying to display a CKEDITOR field in a cell displayed by CellDisplayDialog: it worked perfectly on IE, but not on chrome and FF where it would throw a JS error "cannot called method 'getSelector' of undefined". After doing some research, it seems that its coming from the fact that CKEDITOR is using a modal window to work in, and that the cellDisplayDialog does the same thing (in some browsers, at least), and one is stealing events from the other.
To solve that, it seems that instead of creating the CKEDITOR when loading the page (onload code, as explained by Alexandre), you need to wait for the cell to be displayed by celldisplaydialog THEN create the CKEDITOR instance... This also means that if you have to open the cell several times, you may have to be a little more advanced in your management of CKEDITOR and destroy the instance then recreate it.

I hope this will help some of you to loose less time than I did figuring things out... Of course, all the things described here were in the specific case of an AWP page with a cell displayed by cellDisplayDialog AND chrome/FF. My newly found solution may not work in any other case...

I love this job :D

von Fabrice Harari - am 29.06.2013 20:36
Zur Information:
MySnip.de hat keinen Einfluss auf die Inhalte der Beiträge. Bitte kontaktieren Sie den Administrator des Forums bei Problemen oder Löschforderungen über die Kontaktseite.
Falls die Kontaktaufnahme mit dem Administrator des Forums fehlschlägt, kontaktieren Sie uns bitte über die in unserem Impressum angegebenen Daten.