External editors TinyMCE

Greeting

Has someone used external editors like TinyMCE or the like within the WebDev application.

If there is any tutorial, it would be good to come

[infosonline.net]

You can find one sample in the PCSOFT online repository for windev maybe it can help you.

[repository.windev.com]

Regards

Paulo Oliveira

Thanks Pao

Nothing specifically has been described

[infosonline.net]



Edited 1 time(s). Last edit at 04/02/2019 01:51PM by infos.

Hi Infos,

I used to use ckeditor in webdev…
Some JS to define the toolbar and behaviour and the inclusion of the js program in the page properties.
That was it.

Cheers,

Peter

Peter

Can you split an example of how you did it?
Can you send me the code, how do you link the html code with the wlanguage code?

mail: infos.pilot@gmail.com

[infosonline.net]



Edited 1 time(s). Last edit at 04/03/2019 05:12PM by infos.

Hi Infos,

I'll look it up when back in my office on an older project. No WX at hand here and still only using it an irregular basis…
It is a multiline edit control if I recall correctly that you link ckeditor to with the js script. Next it will post its content with this control into a memo field in the db. Will post it here.

Cheers,

Peter H.

I use XStandard in my Windev app but it could probably be used in WB as well.

[www.xstandard.com]

As promised here are the basic steps:
- Download CKEditor
- Make it part of the PROJECT_WEB folder in your project (e.g.: xxx\PROJECT_WEB\ckeditor)
- In the page description on the advanced tab add the base js library to the External Resources Tab (e.g.: xxx\PROJECT_WEB\ckeditor\ckeditor.js)
- In the Load (OnLoad) of Page (Browser) I have the following WL code:

//Set local variables
LOCAL 
	BrowseFileUrl, BrowseImageUrl are string
	TextFieldHeight is int = EditTextHTM..Height
	
//Set URL's for file handling	
BrowseFileUrl="/PROJECT_WEB/pdw_file_browser/index.php?editor=ckeditor&filter=image&upload_path=/../../PROJECT_WEB/userfiles/"
BrowseImageUrl="/PROJECT_WEB/pdw_file_browser/index.php?editor=ckeditor&filter=image&upload_path=/../../PROJECT_WEB/userfiles/"

//Set minimal height
IF TextFieldHeight <= 0 THEN TextFieldHeight = 365 

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

//Execute resize
DOMResize()

- The AddCKEditor() is a browser side global JS procedure that is being called and that will hook up the EditTextHTML control to the CKEditor js library and configure what should be in teh toolbar or what ckEditor add-ons need to be loaded. Here's the code

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: 'moono-lisa',
		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 there's also a resizing JS script I use to manage it's resizing capabilities. Maybe that's no longer needed when in html5.

function DOMResize()
{
	$(window).resize();
}

Hope this gets you going !

Cheers,


Peter Holemans

Peter Holemans

Thank you very much

I'll try as soon as this example for you, thank you

[infosonline.net]