[WB20] CKEditor does not display with plugins ?

Startbeitrag von Danny Lauwers am 18.12.2015 10:35

Hello,

I'm new in the use of the CKEditor from WebDev ! :confused:

I have a problem that the CKEditor 4.x does not display anymore when I try to enable some plugins.

Steps I take to show the CKEditor.
1) I download, extract and copy the ckeditor folder under my xxxxx_WEB project folder.
2) On my test page, I include the ckeditor in the Advanced tab of the page under Javascript.
[attachment 1817 PageDesc.png]
3) I put a multiline textbox on my page
4) In the On-Load of the page (Browser code) I include the following code


WHEN EXCEPTION IN

JSMethod("CKEDITOR","replace",EDT_Text1..Alias) //edt_Text1 is the edit control

DO
Error(ExceptionInfo())
END


when I run the page in test mode, the CKEditor is displayed
[attachment 1818 ck1.png]

At this stage everything looks good.

I would like to add some plug-ins to the CK editor that would allow be to copy/paste an image in the clipboard (taken with a screen capture program, or snipit).
I tested this via de CKeditor website, demo of the plugin. And that works realy great.

I selected the correct plugins in the CKBuilder so they would be included in the download of the CKEditor (I think so ?) I also tried manualy download and put them under the ckeditor plugins folder.

I change the code to activate the plug-ins (On-Load, browser)


WHEN EXCEPTION IN

JSMethod("CKEDITOR","replace",EDT_Text1..Alias) //edt_Text1 is the edit control

JSProperty("CKEDITOR.config","extraPlugins")= "lineutils"
JSProperty("CKEDITOR.config","extraPlugins")= "clipboard"
JSProperty("CKEDITOR.config","extraPlugins")= "filetools"
JSProperty("CKEDITOR.config","extraPlugins")= "button"
JSProperty("CKEDITOR.config","extraPlugins")= "toolbar"
JSProperty("CKEDITOR.config","extraPlugins")= "widget"
JSProperty("CKEDITOR.config","extraPlugins")= "notification"
JSProperty("CKEDITOR.config","extraPlugins")= "notificationaggregator"
JSProperty("CKEDITOR.config","extraPlugins")= "uploadwidget"
JSProperty("CKEDITOR.config","extraPlugins")= "uploadimage"
DO
Error(ExceptionInfo())
END


When I run the page this time, The CKeditor is not visible anymore. The rest of the page is the same, no visible errors displayed ?? :-(

If I remove those lines, the CKEditor displays again.
So I must do something wrong here ? I do not have a lot of experience in working with Javascript and CKEditor, So it could be that I do something wrong here ?

Does anybody know if the plug-ins of the CKEditor will work in WebDev ?

Hope you can give me some tips to get it working !!

Thanks
Danny

Antworten:

Hi Danny,

I have a global browser side JS procedure defined to configure ckEditor with the options and plugins Installed with it.

You add as you have done the ckeditor.js to the page to be included.

Next I have the following JS script defined as a browser side global procedure in JS.
(you know, click WL in the upper corner and it will modify to JS)

function AddCKEditor(fieldID, fieldHeight, fieldColor, fileBrowseURL, fileImageBrowseURL, fileFlashBrowseURL)
{
//Older codes:
//{ name: 'insert', items: [ 'Image', 'doksoft_image_embed', '-', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak' ] },
//Configure
var editor = CKEDITOR.replace(fieldID, {
skin: 'kama',
removePlugins: 'elementspath',
extraPlugins: 'doksoft_image,doksoft_preview,doksoft_resize,doksoft_image_embed',
allowedContent: true,
height: fieldHeight,
language: 'en',
uiColor: fieldColor,
filebrowserBrowseUrl: fileBrowseURL,
filebrowserImageBrowseUrl: fileImageBrowseURL,
filebrowserFlashBrowseUrl: fileFlashBrowseURL,
filebrowserWindowWidth: 1000,
filebrowserWindowHeight: 720,
font_defaultLabel: 'Arial',
fontSize_defaultLabel: '10px',
toolbar: [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker'], items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] },
{ name: 'insert', items: [ 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
//{ name: 'image', items: [ 'doksoft_image_embed', 'doksoft_image', 'doksoft_preview', 'doksoft_resize' ] },
{ name: 'image', items: [ 'doksoft_image_embed' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
'/',
{ 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', '-', 'Link', 'Unlink' ] },
//{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'styles', items: [ 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
]
} );
}


Next in the onload browser side code of the page having an edit control that will have ckeditor you call this procedure and pass the parameters required.

//Set URL's
BrowseFileUrl="/E1Print_WEB/pdw_file_browser/index.php?editor=ckeditor&filter=image&upload_path=/../../E1Print_WEB/userfiles/"
BrowseImageUrl="/E1Print_WEB/pdw_file_browser/index.php?editor=ckeditor&filter=image&upload_path=/../../E1Print_WEB/userfiles/"

//Declare CK Editor
//JSMethod("CKEDITOR","replace",EditTextHTM..Alias)
AddCKEditor(EditTextHTM..Alias,EditTextHTM..Height,ColorPalette(colorBackgroundMenuTab),BrowseFileUrl,BrowseImageUrl,"")

//Resize
DOMResize()


I hope this helps,

Cheers,

Peter Holemans

von Peter Holemans - am 18.12.2015 11:10
Peter,

Thanks (Dank u Wel) for the detailed description !

I have managed to get the CKEditor working with another Plug-In ('pastebase64') and that allows me to do a copy/paste of an image on the clipboard. This image will be inserted as base64 into the HTML inself (inline). So if you save the HTML to the database, the image is included.

I have no idea why the other plug-Ins (from the original question) stop the CKEditor from displaying ?

I found that under the ckeditor folder there is a samples folder where you can start the CKEditor in a browser (no WebDev). Here you can configure the toolbar via WYSIWYG (click en point), so very handy. It also uses the same (basic) config than when you start in without any options from WebDev Page.

If you download the CKEditor via the CKBuilder, then all the plug-ins are included (and active in the config.js under the ckeditor folder) if you take the "Source" option.
Somehow when you select "optimized" option there not (??)

I have set the following options


function AddCKEditor(fieldID, fieldHeight, fieldColor, fileBrowseURL, fileImageBrowseURL, fileFlashBrowseURL)
{
//Older codes:
//{ name: 'insert', items: [ 'Image', 'doksoft_image_embed', '-', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak' ] },
//Configure
var editor = CKEDITOR.replace(fieldID, {
// skin: 'office2013',
removePlugins: 'elementspath',
// extraPlugins: 'doksoft_image,doksoft_preview,doksoft_resize,doksoft_image_embed',
// extraPlugins: 'button,toolbar,notification,notificationaggregator,filetools,lineutils,widget,uploadwidget,uploadimage',
extraPlugins: 'pastebase64',
allowedContent: true,
height: fieldHeight,
// language: 'en',
uiColor: fieldColor,
// filebrowserBrowseUrl: fileBrowseURL,
// filebrowserImageBrowseUrl: fileImageBrowseURL,
// filebrowserFlashBrowseUrl: fileFlashBrowseURL,
// filebrowserWindowWidth: 1000,
// filebrowserWindowHeight: 720,
font_defaultLabel: 'Arial',
fontSize_defaultLabel: '10px',
// toolbar: [
// { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
// { name: 'editing', groups: [ 'find', 'selection', 'spellchecker'], items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] },
// { name: 'insert', items: [ 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak' ] },
// { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
// //{ name: 'image', items: [ 'doksoft_image_embed', 'doksoft_image', 'doksoft_preview', 'doksoft_resize' ] },
// { name: 'image', items: [ 'doksoft_image_embed' ] },
// { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
// { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
// '/',
// { 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', '-', 'Link', 'Unlink' ] },
// { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
// //{ name: 'styles', items: [ 'Font', 'FontSize' ] },
// { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
// ]
} );
}


This will open the CKEditor:
[attachment 1819 ck2.png]

I can set the data via:

EDT_Text1 = "My Text"


I can get the data via:

sMyData is string = JSMethod("CKEDITOR.instances."+EDT_Text1..Alias,"getData")

ToastDisplay(sMyData)



The following problems still exist:
1) What does your DOMResize do, and is it needed ?
2) When pressing the Symbol icon, the CKEditor dims in colour, but no popup is displayed.

Normaly (via the samples test page) this should come to the front for selection

[attachment 1820 ck3.png]

It seems that every 'modal dialog' of CKEditor is not displayed and freezes the input.
How to solve this ??
3) Is there another good image filebrowser because it is in php and I am in IIS


For the rest I have to tune the toolbar and other functionalities. Maybe try some other plug-ins !

Thanks for all the info and may this post help others that want to use the CKeditor from WebDev.
(Maybe PC-Soft could make there HTML edit control a bit beter or use the CKeditor embedded in there control ?

Danny

von Danny Lauwers - am 18.12.2015 16:37
Hi Danny,

Sorry for the delay in my reply.
Here are my answers:
Quote
Danny
1) What does your DOMResize do, and is it needed ?
2) When pressing the Symbol icon, the CKEditor dims in colour, but no popup is displayed.
It seems that every 'modal dialog' of CKEditor is not displayed and freezes the input.
How to solve this ??
3) Is there another good image filebrowser because it is in php and I am in IIS


1) This is still a relict of the old V17 version of my Application and I believe it is obsolete since V18 and the latest ckeditor where resizing the page does the correct resizing of the control. So you can skip that.

2) ckeditor popups: works fine for me, as well for the special characters popup (Edge and IE11). Did you check the behaviour on different browers?

3) I use the Doksoft_Image_Embed function which embeds the image inside the html in base64. The file selector is the native browser fiel selector. In the earlier versions I implemented one of the file selectors of the ckeditor plugins (hence the passing of the paths to the instantiation JS function) but I removed them from the ckeditor menu and only use the paid doksoft_image_embed plugin for that.

I hope this clarifies your questions.

Cheers,

Peter H.

von Peter Holemans - am 21.12.2015 10:14
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.