TinyMCE pour WinDev - dotnuts development · dotnuts development 2017 TinyMCE pour WinDev Le composant WinDev pour éditer vos pages web. Luc ROLLINGER Website :

dotnutsdevelopment

2017

TinyMCEpourWinDevLecomposantWinDevpouréditervospagesweb.

LucROLLINGER

Website:http://www.dotnuts-development.com

TinyMCEpourWinDev

Lecomposant«TinyMCEpourWinDev»estlapropriétédeLucRollinger–dotnutsdevelopment. ©Copyright2017–LucRollinger–dotnutsdevelopmentDatedudocument:2017-12-15Révision :003 1

DépendancesducomposantLecomposants’appuiesurl’ActiveX“Shell.Explorer",etnepeutfonctionnersansuneversionduproduitTinyMCE(versiontestée:4.4.3,compatiblejusqu’àladernièreversion4.6.4),déposéedanslerépertoiredel’exécutableoudevotreprojet.

Ilestégalementindispensabled’avoiruneversiondufichier“jquery.js”(versiontestée:10.2)dansledossier“tinymce”devotreexécutableoudevotreprojet.

MiseenplaceducomposantPlacezdansunefenêtredevotreprojet,unchamp“fenêtreinterne”,etaffecterleà“FI_TINYMCE”.Pardéfaut,lecomposanttravaildanslesous-dossier“temp”duprojet.Pourlechanger,saisissezlecodeci-dessousdanslecoded’initialisationduprojetoudanslecoded’initialisationdelafenêtrecontenantla/lesfenêtresinterne.Tiny.SetTempFolder(fRépertoireTemp())

Pardéfaut,la/lesfenêtresinternesnesontpasverrouilléespourlafermeture(codedefermeturedelafenêtre).Commelecodedefermeturedesfenêtresinternessontexécutésavantcelledelafenêtreparent,vouspouvezchangerl’affectationpourleverrouillage/déverrouillage.CFI_NomDuChampFenêtreInterne.SetCanCloseWindow(Vrai)

Silafenêtreinterneestverrouillée,etquel’onchercheàfermerlafenêtreparent,unmessaged’avertissementestaffiché.Vouspouvezmodifierlemessagepardéfaut,quiestgénéralaucomposantetnonàlafenêtreinterne.Tiny.SetEditorMessageWhenLocked("Monmessage")

Puisdanslecodedefind’initialisationdelafenêtre,saisissez:CFI_NomDuChampFenêtreInterne.Navigate()

Sivousactivezleplugindesauvegarde,vousdevezspécifierlaméthodecallbackquiseraappelée,ainsiquelecheminrelatifquipermettrademodifierlechemindessourcesducode.CFI_NomDuChampFenêtreInterne.SetDefineSaveCallback(pSaveCallbackFunction,"../")Laméthodecallbackdoitrecevoirdeuxparamètres.LecodeHTML(Unicode)etuntableaudechaines(Tableaudessources).PROCEDUREpSaveCallbackFunction(LOCALsHTMLestuneChaîne,LOCALtabSourcesestuntableaudeChaînes)Atoutmoment,vouspouvezmodiferlecheminrelatif,enpassantparlaméthodeSetRelativePath("../../folder/")Pourl’affichageducode,enmode«interne»,ilestpossiblededéfiniruneprocédurecallbackpourfairelarechercheet/ouremplacement(selonvotrecode/fenêtre)danslecode.Tiny.SetSearchReplace(pSearchCallbackFunction)Laméthodecallbackdoitrecevoirdeuxparamètres.Unevariabledetype«champ»,etlachaîne(Unicode)dutextesélectionné.Etrenvoyerlenomdevotrefenêtrederecherche/remplacement.Celadanslecasoùsil’onfermelafenêtredecodesansavoirfermerlafenêtrederecherche/remplacement,quelecomposantpuisefermerlafenêtreparlui-même.Ilestpréférablequevotrefenêtrederecherche/remplacementsoitouverteennonmodale.PROCEDUREpSearchCallbackFunction(gMonChampestunChamp,LOCALsTextSelectedestuneChaîne):Chaîne

Pourl’impressiondelapage,enmode«interne»,ilestpossiblededéfiniruneprocédurecallbackquirecevralecodeHTLMdelapageencours.Tiny.SetPrinting(pPrintCallback)Laméthodecallbackdoitrecevoirunparamètre.Unevariabledetypechaîne(Unicode),quicontiendralecodeHTMLdelapage(hors<DOCTYPE..,<BODY,etc…).

Visualiser/Récupérer/AffecteruneconfigurationàTinyMCECFI_NomDuChampFenêtreInterne.OpenSettings()stSettings=CFI_NomDuChampFenêtreInterne.GetSettings() //RenvoieunestructureSTTinyMCE_SettingsCFI_NomDuChampFenêtreInterne.SetSettings(stSettings) //AffecterunestructureSTTinyMCE_Settings.Doitcefaireavantl’appelNavigate().SinonvousdevrezfaireunappelàResetTinyMCEaveclesbonsparamètres.

TinyMCEpourWinDev


VouspouvezégalementouvrirlafenêtredeconfigurationTinyMCEenutilisantlafenêtreinterne“FI_SETTINGS”,danslebutedecentraliseruneconfigurationcommuneàtousvoschampsdefenêtreinterne.ChangeFenêtreSource(CFI_NomDuChampFenêtreInterne,FI_SETTINGS,stSettings)Récupérationdelaconfigurationdepuislafenêtreinterne:stSettings=CFI_NomDuChampFenêtreInterne.TreatExtensions()

Ou

QUANDEXCEPTIONDANS stSettings=ExécuteTraitement("CFI_NomDuChampFenêtreInterne.TreatExtensions",trtProcédure)FAIREFINIlestpossiblederécupéreruneconfigurationpardéfaut,parl’appeldelafunction“GetDefaultSettings”stSettings=CFI_NomDuChampFenêtreInterne.GetDefaultSettings()Pardéfautlecomposantutiliselesélémentsinternespourvisualiserlecodesource,lesmédias,prévisualisationdelapageetsélectiondecouleur.

Affectation/RécupérationdelapageinternetCFI_NomDuChampFenêtreInterne=MonCodeHTML //Mettrequelecorpsdelapage(hors<body>)MonCodeHTML=CFI_NomDuChampFenêtreInterne //RécupérationducodebruteMonCodeHTML=CFI_NomDuChampFenêtreInterne.GetPage() //RécupérationducodenettoyéMonCodeHTML=CFI_NomDuChampFenêtreInterne.GetPage(*,Vrai) //Récupérationducodenettoyé.LesimagessontauformatsBase64MonCodeHTML=CFI_NomDuChampFenêtreInterne.GetPage(Vrai) //Récupérationducodenettoyé.Lesimagessontplacéesàlabasedurépertoire.MonTableauChaîne=CFI_NomDuChampFenêtreInterne.GetMediaFiles() //Récupérationdessources(Cheminetnomdesfichiers),aprèsavoirfaitunedemandederecupérationdelapage.

Lecture/Récupérationd’unepage(complète)internetNepermetdelirequelespagesavecuncheminlocalouUNCCFI_NomDuChampFenêtreInterne.SetImportHTMLFile(“Chemin”) //ImportationetanalysedufichieràlireMonCodeHTML=CFI_NomDuChampFenêtreInterne.GetImportHTMLFile() //RécupérationducodebrutedelapageMonCodeHTML=CFI_NomDuChampFenêtreInterne.GetImportHTMLFile(*,Vrai) //Récupérationducodenettoyédelapage.ImagesenBase64MonCodeHTML=CFI_NomDuChampFenêtreInterne.GetImportHTMLFile(Vrai) //Récupérationducodenettoyédelapage.Lesimagessontplacéesàlabasedurépertoire.MonTableauChaîne=CFI_NomDuChampFenêtreInterne.GetMediaFiles() //Récupérationdessources(Cheminetnomdesfichiers),aprèsavoirfaitunedemandederecupérationdelapage.

Fermetured’unepageCFI_NomDuChampFenêtreInterne.ClosePage(Faux) //Fermelapageencours,sansreconstruireTinyMCECFI_NomDuChampFenêtreInterne.ClosePage(Vrai) //Fermelapageencours,etreconstruireTinyMCE

Affectationdu«BaseURL»pourlespagesàlireCFI_NomDuChampFenêtreInterne.SetBaseURL(“Chemin”) //CheminderéférenceURLpourlespagesàlireLechemindoitcorrespondreàuncheminlocalouUNC

PrévisualisationdelapageCFI_NomDuChampFenêtreInterne.Preview()Lemoded’aperçu(TinyMCE,Interne,Navigateur),dépenddelaconfiguration.AffectationduchemindesmediasCFI_NomDuChampFenêtreInterne.SetPathMedia(“Chemin”)Chemind’accèsauxfichiersmédias,pourlalibrairie(utileuniquementsilavisualisationdesmédiasestsur“Interne”).ModificationavancéedesimagesdumédiaTiny.SetImageEditor(pMaProcédureCallback)Silaprocédurecallbackn’estpasnull,alorsdansvotreprocédurecallback,vouspourrezdemanderlaprocédurecallbackderetouredel’imagemodifié,parlaméthodesuivante:Tiny.GetImageEditorValidate()Laprocédurecallback,pourlaméthodeSetImageEditor,doitreçevoirdeuxparamètres:UnevariabledetypeImage(Contiendral’imageencoursdumédia),etunevariablechaine(Unicode:Quicontiendraletyped’extensiondufichierimage).

TinyMCEpourWinDev


Quandàlaprocédurecallback(récupéréeparlaméthodeGetImageEditorValidate),ellen’attendqu’unseulparamètre:Unevariablechaîne(Unicode),quicontiendralecheminetlenomdufichierimagemodifié.ExempleaveclecomposantCCHEDITdePCSoft:Tiny.SetImageEditor(pModierImage)PROCEDUREpModifierImage(LOCALMonImageestuneimage,LOCALsExtensionestunechaine):booléenLOCAL sPath estunechaîne=fExtraitChemin(fFichierTemp("IMG",fRépertoireTemp()),fDisque+fRépertoire+fFichier)+["."]+sExtension bSave estunbooléenSELONsExtension CAS"jpeg","jpg" bSave=dSauveImageJPEG(MonImage,sPath,100,imgSauveInformation) CAS"bmp" bSave=dSauveImageBMP(MonImage,sPath) CAS"png" bSave=dSauveImagePNG(MonImage,sPath) CAS"gif" bSave=dSauveImageGIF(MonImage,sPath) AUTRECAS RENVOYERFauxFINSIbSaveALORS bSave=EditerHardCopy(sPath,Faux,*,MaFenêtre..Nom+".pCallbackImageEditor")FINRENVOYERbSavePROCEDUREpCallbackImageEditor(LOCALbImageModifiéeestunbooléen,LOCALsCheminEnregistrementestunechaine):booléenSIbImageModifiéeALORS LOCAL MyProc estuneProcédure=Tiny.GetImageEditorValidate() SIMyProc<>NullALORS SIfFichierExiste(sCheminEnregistrement)ALORS QUANDEXCEPTIONDANS MyProc(sCheminEnregistrement) FAIRE FIN FIN FINFINModificationrapidedumodedesextensionsCFI_NomDuChampFenêtreInterne.SwitchMode(EExtensions,ETinyCE_Usage)EExtensions:Enumérationdel’extensionàmodifier.ETinyMCE_Usage:Modedeprévisualisation.ModificationrapidedumodedeprévisualisationdelapageinternetCFI_NomDuChampFenêtreInterne.SwitchModePreview(EPreview)EPreview:Enumérationdumodedeprévisualisation.InsertiondetextedelapageinternetCFI_NomDuChampFenêtreInterne.InsertText(“MonTexte”)Insertletexteàl’endroitdelasélectionoupositiondupointeurdanslechampTinyMCE.RéinitialisationduchampTinyMCECFI_NomDuChampFenêtreInterne.ResetTinyMCE() //Réinitialisel’objetTinyMCE,sansrienrécupérer.CFI_NomDuChampFenêtreInterne.ResetTinyMCE(Vrai) //Réinitialisel’objetTinyMCE,enconservantlaconfiguration.CFI_NomDuChampFenêtreInterne.ResetTinyMCE(*,Vrai) //Réinitialisel’objetTinyMCE,enconservantlecontenudelapage.CFI_NomDuChampFenêtreInterne.ResetTinyMCE(Vrai,Vrai) //Réinitialisel’objetTinyMCE,enconservanttout.

TinyMCEpourWinDev


AffectationducodeCSSCFI_NomDuChampFenêtreInterne.SetContent_CSS(“h1{…}”)PersonnalisationdesstylesCSSpourvospagesweb(nepasmettrelabalise<style>,uniquementlecode).IlestpossibledepasserparlafenêtredeconfigurationpoursaisirlecodeCSS.(Voirfig.5)

ImplémentationdemodèleCFI_NomDuChampFenêtreInterne.SetTemplates(TableauassociatifdeSTTinyMCE_Templates)AffecteruntableauassociatifdeSTTinyMCE_Templates,pourmettreàdispositiondifférentmodèledecodeHTMLpourconstruirevospages.Ilestpossibledepasserparlafenêtredeconfigurationpourcréervosmodéles.(Voirfig.4)Exempled’utilisationdemodèle:

LOCAL sTemplate est une chaîne stTemplate est un STTinyMCE_Templates taTemplate est un tableau associatif de STTinyMCE_Templates sTemplate = [

 <div class="mceTmpl"> <table width="98%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> ]

stTemplate.sDescription = "Mon modèle HTML" stTemplate.sContent = sTemplate

taTemplate["Modèle 1"] = stTemplate //Modèle1=Nomdumodèlequiapparaitradanslalistedéroulante CFI_NomDuChampFenêtreInterne.SetTemplates(taTemplate)

ExplicationsurlefonctionnementdesstructuresSTTinyMCE_Settings.Settings -> STTinyMCE_Configuration //ConfigurationsurlemodedefonctionnementduTinyMCE .Plugins -> STArray //Tableaudechaînecontenantlespluginsàdémarrer .Advanced -> STTiny_Advanced //Configurationavancée.Appearance -> STTiny_Appearance //Configurationdel’apparenceduTinyMCE .Content -> STTiny_Content //ConfigurationducontenuduTinyMCE .Filtering -> STTiny_Filtering //ConfigurationdufiltrageduTinyMCE STTinyMCE_Configuration .eTinyMCEPro -> EBoolean //Enumérationdebooléen .ePagePreview -> EPreview //Enumérationdesmodesd’aperçus .eColorPicker -> ETinyMCE_Usage //Enumérationdesmodesd’usages .eMedia -> ETinyMCE_Usage //Enumérationdesmodesd’usages .eCode -> ETinyMCE_Usage //Enumérationdesmodesd’usages.ePrinting -> ETinyMCE_Usage //Enumérationdesmodesd’usages.eSaving -> ETinyMCE_Usage //Enumérationdesmodesd’usages eSavingn’existeplus.Sivousavezcochéleplugin«Sauver»,etquevousavezrenseignélaprécudurecallbackdesauvegarde,alorsleboutondesauvegardepourêtreaffiché.STTiny_Advanced .eBR_in_PRE -> EBoolean //Enumérationdebooléen .eEndContainerOnEmptyBlock -> EBoolean //Enumérationdebooléen .eNoWrap -> EBoolean //Enumérationdebooléen.pSave_Callback -> Procédure //ProcédurecallbackpoursauvegarderlapageSTTiny_Appearance .tabBodyClass -> tableau de * chaînes //Tableaucontenantlesclassesdubody(réf:body_class).tabContentCSS -> tableau de * chaînes //Tableaucontenantlescheminsd’accèsauxfichiersCSS(réf:content_css) .sSkin -> chaîne //Nomdel’habillageàutiliserpourl’apparenceduTinyMCE

TinyMCEpourWinDev


.sTheme -> chaîne //Nomdumodèleàutiliserpourl’apparenceduTinyMCE

.eInline -> EBoolean //Enumérationdebooléen

.eSmallToolbarItems -> EBoolean //Enumérationdebooléen

.sContentStyles -> chaîne //ChainedecodeCSS(horsbalises<style>)servantàl’affichageducontenu

.eElementPath -> EBoolean //Enumérationdebooléen(Afficheounonlechemindeséléments)

.eStatusbar -> EBoolean //Enumérationdebooléen

.eHideMenu -> EBoolean //Enumérationdebooléen

.eNoNewDocument -> EBoolean //Enumérationdebooléen

.tabMenu -> est un tableau de * STTiny_Menu //Tableaudesmenus

.tabTools -> est un tableau de * STTiny_Tools //Tableaudesbarresd’outilsSTTiny_Content .eLinkTitle -> EBoolean //Enumérationdebooléen .tabLinkList -> tableau associatif de chaînes //Tableaudesliens(Clé=Titre,Valeur=Lien)(Réf:link_list).tabLinkRelList -> tableau associatif de chaînes //Tableaudesliensprédéfinis(Clé=Titre,Valeur=Lien)(Réf:rel_list) .eTableAdvanced -> EBoolean //Enumérationdebooléen .eTableAppearenceOptions -> EBoolean //Enumérationdebooléen .eTableCellAdvanced -> EBoolean //Enumérationdebooléen .eTableRowAdvanced -> EBoolean //Enumérationdebooléen .eTableGrid -> EBoolean //Enumérationdebooléen .eTableTabNavigation -> EBoolean //Enumérationdebooléen.eActivateCaptionFigure -> EBoolean //Enumérationdebooléen.eActivateStylesTableContent -> EBoolean //Enumérationdebooléen.eActivateAlignementClass -> EBoolean //Enumérationdebooléen.eRemoveMarginOnParagraphs -> EBoolean //Enumérationdebooléen.sContentCSS -> Chaîne //CodeCSSpourlecontenu.tabClassNameByType -> tableau associatif de chaînes //Tableaudeslistesdeclasse(Clé=Type,Valeur=Classe) .tabTableClassList -> tableau associatif de chaînes //Tableaudeslistesdeclasse(Clé=Nom,Valeur=Classe)(Réf:table_class_list) .tabTableCellClassList -> tableau associatif de chaînes //Tableaudeslistesdeclasse(Clé=Nom,Valeur=Classe)(Réf:table_cell_class_list) .tabTableRowClassList -> tableau associatif de chaînes //Tableaudeslistesdeclasse(Clé=Nom,Valeur=Classe)(Réf:table_row_class_list) .tabTableDefaultAttributes-> tableau associatif de chaînes //Tableaudesattributspardéfaut(Clé=Nom,Valeur=Attribut)(Réf:table_default_attributes) .tabTableDefaultStyles -> tableau associatif de chaînes //Tableaudesstylespardéfaut(Clé=Nom,Valeur=Style)(Réf:table_default_styles) .taTemplates -> tableau associatif de STTinyMCE_Templates //Tableaudesmodèles .tabTextPattern -> tableau <agrandissement=1> de STTinyMCE_TextPattern //Tableaudesmotifsderemplacement(Réf:textpattern_patterns) .taBlockFormats -> tableau associatif de chaînes //Tableaudesformatsdebloque(Clé=Nom,Valeur=Format)(Réf:block_formats).taFontFormats -> tableau associatif de STTinyMCE_Toolbars//Tableaudesformatsdepolices(Clé=Nom,Valeur=Tableaudepolices)(Réf:font_formats) .tabFontSizeFormats -> <agrandissement=1> de chaînes //Tableaudetailledepolices(Réf:fontsize_formats)STTinyMCE_Templates .sDescription -> chaîne //Descriptiondumodèle .sContent -> chaîne //CodeHTMLducontenudumodèle(Voir:Implémentationdemodèle) .sURL -> chaîne //AdresseURLdumodèleSTTinyMCE_TextPattern .sStart -> chaîne .sEnd -> chaîne .sFormat -> chaîne .sCommand -> chaîne STTinyMCE_Toolbars .Elements -> tableau <agrandissement=1> de chaîne //Chaînedel’élémentSTTiny_Filtering .sForcedRootBlock -> chaîne //Exemple:p,div(Réf:forced_root_block).taContent_Attrs -> tableau associatif de chaînes //Tableaudesattributsdesbloquesracines(Réf:forced_root_block_attrs).eSchema -> EHTML_Schema //Enumérationduschémaducodeàgénérer(Réf:schema).eFontToSpan -> EBoolean //Enumérationdebooléen .eElementFormat -> EHTML_Format //Enumérationduformatdeséléments(Réf:element_format).eEncoding -> EHTML_Encoding //Enumérationdel’encodage(Réf:encoding).eEntityEncoding -> EHTML_EntityEncoding //Enumérationdel’entitédel’encodage(Réf:entity_encoding).eFixListElements -> EBoolean //Enumérationdebooléen .tabInvalidElemets -> tableau de * chaînes //Tableaudesélémentsinvalides(Réf:invalid_elements) .eInvalidStyles -> EHTML_InvalidStyles //Enumérationdesstylesinvalides(Réf:invalid_styles).tabInvalidStyles -> tableau associatif de chaînes //Tableaudesstylesinvalides(Clé=Nom,Valeur=Propriété)(Réf:invalid_styles) .eKeepStyles -> EBoolean //Enumérationdebooléen .eRemoveTrailingBRS -> EBoolean //EnumérationdebooléenSTTiny_Menu //Pasencoreenfonction.nOrder -> entier.sMenuName -> chaîne.tabItems -> tableau de chaînes

TinyMCEpourWinDev


Exempled’unefenêtrecontenantplusieurs

fenêtresinternesdeTinyMCE.

Chaquefenêtreinternefonctionnedemanièreautonome,seulescertainesconfigurationssontcommunesàl’ensembleducomposant.

(Figure1)

FenêtredeconfigurationduTinyMCE.

ChaquefenêtreinternedeTinyMCEasonpropremodedefonctionnement.Decefaite,ilestpossibled’avoirplusieursfenêtresinternes,avecchacununeconfigurationdifférente.

(Figure2)


Rendrevisibleounonlesmenus.Sivouschoisissezdelesrendrevisibles,vouspouvezquelmenuseraaffiché.Maisceladépendégalementdespluginsactivésounon.

Demêmequ’ilestpossibledeconstruiresespropresbarresd’outils.L’affichagedesoutilsdépendégalementdel’activationounondespluginscorrespondants.

(Figure3)

TinyMCEpourWinDev



Créationdesmodèlesutilisablesdansl’éditeurTinyMCE.

Vouspouvezcréerdesmodèlesbaséssuruncodeàsaisir,ousurunfichierexterne.

Lesfichiersexternesnepeuventêtrequedetypes(htm,html,tploutxt)

(Figure4)


CréationducodeCSSpourlecontenu(votrepage)del’éditeurTinyMCE.

Ilyaaussicertainsparamètres,qu’ilestpossibled’activer,pourlerenduducontenu(méthodenativedeTinyMCE).

(Figure5)

Fenêtredesmédias.

Danslecasoùvousavezactivél’undesplugins,«image»ou«media»etquevouschoisissezd’utiliserlemonde«Interne»alorsvousaurezaccèsàcettefenêtre,quivouspermettrad’insérer/modifierunmédia.

Lesmédiaspeuventêtredesimages,dessourcesaudio,desvidéos,oudesobjetsdocument(pdfouflash).

(Figure6)

TinyMCEpourWinDev


Fenêtredesmédias.

Pourtouslestypesdemédia,vousavezuncertainnombredeparamètrespossiblesàsaisir.

(Figure7)

Fenêtredesmédias.

Pourlesimages,ilvousaitpossibledelesmodifier.

RéglageTSL,halo,ombre,fond,hachurage,orientation,etfiligrane.

(Figure8)

Fenêtredecode.

Danslecasoùvousavezactivéleplugin«code»etquevouschoisissezlemode«Interne»,vousaurezaccèsàlafenêtred’éditionducode.

Ilestpossibledefairedelarecherchedanslecode,aveclaméthodenativedeWinDev,maisaussiparvotrepropreméthode,endéfinissantuneprocédurecallback.

(Figure9)

TinyMCEpourWinDev


Récupérationducode.

Ilexistedifférentefaçonderécupérerlecodedelapage.L’uned’entreelle,permetderécupérerlecodeaveclesimagestraduitesenbase64(utiledanslecadred’unemailing).

D’autreméthodeexistepourrécupérerlecodebrut,codeaveclessourcestraduitesencheminrelatif,ouencore,codeaveclessourcesremisentauformatnormal(Windows).

(Figure10)

Documents

TinyMCE pour WinDev - dotnuts development · dotnuts development 2017 TinyMCE pour WinDev Le composant WinDev pour éditer vos pages web. Luc ROLLINGER Website :