PC SOFT
ONLINE REPOSITORY
FOR WINDEVWEBDEV AND WINDEV MOBILE

Home |  | Sign in | English US
TinyMCE for WINDEV
Published by Luc
in the category Productivity
New features
1.0 Ac :
Fixed a bug on constructing properties of parameterization elements.
1.0 Ab :
Fixed problem on interpretation javascript code (compressed) generated in executable mode.

Description
This WINDEV component allows you to edit your web pages, thanks to TinyMCE in your WINDEV applications.
It may be useful to have a back-office application in WINDEV to manage the content of your web pages, or simply to create an application that needs to have web content, for example to generate an HTML email. Or simply to replace the native field "Input in HTML", which offers very little possibility in the toolbar.

This component allows to translate all the images included in the code, in the Base64 format. This allows portability of the code anywhere.
A lot of functionality, like "preview", "code", "image and media", "color", can use windows, internal to the component, in order to have a better rendering.
This component is not yet fully finalized, but works correctly in one of my ERP projects, which I use for creating emailing templates.

The zip file contains the component, but also a folder "tinymce" with the file of TinyMCE, as well as the file "jquery.js". These files are required for the proper functioning of the component. The folder "tinymce" must be in the directory of your executable.
You can change the TinyMCE or jQuery version, but the component was developed with the versions included in the zip file.

Do not hesitate to submit your remarks or suggestions, in order to improve the product.
http://www.dotnuts-development.com/en/products/web-page-editor/
Illustrations, screen shots
none
none
User reviews
(To evaluate this resource, click 'Write a review')
Je viens de mettre en place une nouvelle version, qui corrige un bug sur la construction des éléments de propriété.
De plus à l'adresse ci-dessous, vous trouverez la nouvelle version du document PDF, contenant les explications sur la composition de la structure (STTinyMCE_Settings) de paramétrage.

https://www.dotnuts-development.com/wp-content/uploads/2016/12/documentation-api-en-francais-du-composant-tinymce-pour-windev.pdf

Cordialement,
Luc Rollinger
Je viens de me re-pencher sur le code, et j'avais complètement oublier que vous pouvez configurer la structure STTinyMCE_Settings.
Commencer par déclarer une variable de ce type.
Puis récupérer la configuration par défaut de la fenêtre interne :
MyVar est un STTinyMCE_Settings
MyVar = CFI_TINYMCE.GetDefaultSettings() // Renvoie le paramétrage par défaut
ou
MyVar = CFI_TINYMCE.GetSettings() // Renvoie le paramétrage en cours

Puis paramétrer la partie " Content.taBlockFormats ", soit :
MyVar.Content.taBlockFormats = tableau associatif de chaînes (Clé = Titre, Valeur = Format)

MyVar.Content.taBlockFormat["Header 2"] = "h2"
MyVar.Content.taBlockFormat["Header 3"] = "h3"
...

Puis réaffecter la variable de structure : CFI_TINYMCE.SetSettings(MyVar)

Si l'affectation de la configuration est faite après l'appel à la fonction Navigate(), il vous faudra alors faire appel à la fonction ResetTinyMCE()

CFI_TINYMCE.ResetTinyMCE(Vrai, Vrai)
Le premier paramètre (valeur par défaut = Faux (Ne conserver pas la configuration en cours du TinyMCE) ).
Le deuxième paramètre (valeur par défaut = Faux (Ne conserve pas le contenue en cours du TinyMCE) ).

La structure de paramétrage contient de nombreuses possibilités, veuillez la parcourir.
Dans le document PDF, je rajouterai prochainement l'explication de la structure.
https://www.dotnuts-development.com/wp-content/uploads/2016/12/documentation-api-en-francais-du-composant-tinymce-pour-windev.pdf

Luc Rollinger
Pour le moment, c'est la seule solution pour cacher les éléments désirés du contenu TinyMCE.
Effectivement, cela ne s'applique pas aux outils de TinyMCE. Il faudra attendre que je me penche sur l'ajout de ses fonctionnalités.
De plus, il faudra penser que le faite de ne pas donner accès au <H1> n'empêchera à l'utilisateur de l'ajouter depuis l'aperçu du code.
De ce faite, l'action de ne pas donner accès à certaines fonctionnalités, inclus le faite de vérifier la présence des tags associés dans le code, et de les supprimer.

Luc Rollinger
Ok ! Mais donc, si je comprend bien, ca ne sert a rien que j'essaye de cacher certaines toolbar si c'est appliqué sur le contenu.

Je vais donc attendre vos mise a jour futur !

Merci bien.
Voici un code exemple que j'utilise dans mes testes.

LOCAL
sCSS est une chaîne
sColor est une chaîne
tabColor est un tableau de chaînes

tabColor = ["red", "green", "blue", "black", "white", "grey", "yellow"]
InitHasard()
sColor = tabColor[Hasard(1, tabColor..Occurrence)]

sCSS = ChaîneConstruit([
h1 {
color: %1;
}
h2 {
color: green;
}
img {
border: 0px none;
}
], sColor)

CFI_TINYMCE.SetContent_CSS(sCSS)

L'appel à la fonction SetContent_CSS(), peut ce faire, avant ou après l'appel à la fonction Navigate().
Il faut faire attention, à ne pas mettre les balises <style></styles> dans le code CSS, la fonction le gère de lui-même.
Tout comme il n'est pas nécessaire de faire du code CSS sur la classe " mceContentBody ". Car l'affectation du code CSS concerne directement le contenu (body) de l'objet TinyMCE.

Cordialement,
Luc Rollinger
J'arrive pas vraiment reussi a m'en servir, vous pourriez me donner un petit exemple ?

J'ai essayé plusieurs chose, genre :

CFI_Tiny.SetContent_CSS("<style>body.mceContentBody { background-color: #AAA; }</style>")
CFI_Tiny.SetContent_CSS("body.mceContentBody { background-color: #AAA; }")

et d'autres variantes, mais je ne vois aucun changement.

J'ai essayé avant le navigate et apres.

Si vous avez un exemple, je prend, et apres j'arrete de vous embetter ;)

Merci pour vos réponses rapide en tous cas !
Il y a déjà une procédure SetContent_CSS (depuis la fenêtre interne) qui permet d'injecter le code CSS de la page TinyMCE.
Cordialement,
Luc Rollinger
Ok, je comprend!

En attendant, il y aurait pas moyen de faire un truc un peu degeulasse, genre editer un fichier css qui est chargé par le composant, pour faire un display:none sur les elements qui posent un probleme ?

Ou pouvoir saisir du code javascript pour initialiser tinymce ?

Si y'a pas moyen de contourner alors j'attendrai ;)

Merci pour tout !
Bonjour,
La configuration de la barre d'outils est en cours de développement. Il sera possible de choisir l'ordre des boutons et par groupe d'outils.
Je regarderai la possibilité de désactivé des éléments, comme par exemple <H1> .
Je ne peut pas vous donnez de délai, car ma priorité est le développement de mon ERP. Qui lui-même utilise le composant TinyMCE.
De ce faite, le composant TinyMCE évoluera au fur et à mesure des besoins.

Cordialement,
Luc Rollinger
 
Bonjour, le composant a l'air de fonctionner nickel.
Par contre, est-ce qu'il y a un moyen de configurer les toolbar qui sont affichées dans tinymce ?
Par exemple, j'aimerai désactiver la possibilité d'ajouter un <h1>.

Cordialement,

Gilles
 
OK tout marche correctement ....
Je viens de déposer une mise à jour du composant, qui corrige le problème du code javascript compressé en mode exécutable.
Cordialement,
Luc Rollinger
 
OK Pas de soucis

JMDG
Bonjour,
Après avoir copier votre code (ci-dessous) et télécharger une copie de TinyMCE et jQuery, j'ai pu recréer voir le problème.
Il est vrai que la différence entre les tests (en mode GO) et l'exécutable, c'est que le code du script est compressé. De ce faite, les consoles de scripts n'accepte pas qu'à la fin d'une " } " (fonction javascript), qu'il n'y ait pas de point-virgule.
Après en avoir mis ici et là, je pu vérifier que cela fonctionnait correctement.
Donc dès que reçoit mon ordinateur, je pourrai apporter les corrections nécessaires.

Cordialement,
Luc Rollinger
 
Voilà en affichant dans un navigateur le fameux fichier puis en affichant la console et en rafraichissant l'affichage ... il semble manquer un ";" quelque part ....
SyntaxError: missing ; before statement[En savoir plus] tinymce_9.html:16:1544 dans firefox et chrome
Pourquoi en développement cela marche-t'il alors ????

A+
 
Oups ..... chez moi, tiny est au même niveau que temp...... Je teste l'affichage dans un navigateur ....
On a le temps .... réparez votre PC .... et on verra

A+
Bonjour,
Effectivement vous ne pouvez pas m'envoyer un message contenant du code, sur mon site.
Le fichier html généré n'est (normalement) pas à mettre en cause, puisque le fichier généré est le même en test qu'en exécutable.
Là où il faut bien faire attention, c'est dans les deux lignes suivantes :

<script src="../tinymce/jquery.js"></script>
<script src="../tinymce/tinymce.min.js"></script>

Est-ce que "tinymce" se trouve bien à niveau supérieur du dossier "temp", et contient bien tous les fichiers nécessaire au fonctionnement de "TinyMCE", ainsi que le fichier "jquery.js". Normalement, selon vos messages précédents, cela est bien le cas.

Donc le test à faire est d'exécuter le fichier html temporaire dans votre navigateur, et de voir ce qu'il se passe.
Est-ce que votre navigateur met une alerte de fonctionnement (intranet, etc...) ?

Comme je vous l'ai dit dans mon message précédent, mon ordinateur est en réparation. Je n'ai donc plus mes projets à disposition pour aller plus en avant pour approfondir le problème. Soyez patient, et je regarderai de plus prêt dès qu'il sera de retour.

Cordialement,
Luc Rollinger
 
Le répertoire "temp" se crée bien dans le répertoire de l'application exe. Quand j'ouvre ma fenêtre avec le champ fenêtre interne, un fichier HTML est créé (tinymce_9.html) dont voici le contenu:

<!DOCTYPE html>
<html>
<head>
<style>
html, body { margin: 0 0 0 0; height: 100%; overflow: hidden }
p {margin: 0; padding: 0;}
</style>
<script src="../tinymce/jquery.js"></script>
<script src="../tinymce/tinymce.min.js"></script>
</head>
<body>
<textarea></textarea>
<div id="tinyContent_9" style="visibility:hidden;"></div>
<div id="tinyQuery_9" style="visibility:hidden;"></div>
<div id="tinyAnswer_9" style="visibility:hidden;"></div>
<script>$( document ).ready(function() {var timer;var o;tinymce.init({setup: function(editor) {editor.on("PostProcess", function(e) {e.content = e.content.replace(/(<p>&nbsp;<\/p>)/gi, "<br />");e.content = e.content.replace(/(<div>&nbsp;<\/div>)/gi, "<br />");});editor.on("init", function(e) {editor.execCommand("mceFullScreen");});},removed_menuitems : "fullscreen",selector:"textarea",resize: false,height : "100%",wordcount_cleanregex: /[0-9.(),;:!?%#$?\x27\x22_+=\\/\-]*/g,wordcount_countregex: /[\w\u2019\x27\-\u00C0-\u1FFF]+/g,directionality: "ltr",language: "fr_FR",menubar: ["file,edit,insert,view,table,format,code,tools"],plugins: ["fullscreen"],toolbar: ["ltr,rtl,newdocument,preview,print,searchreplace,cut,copy,paste,undo,redo,removeformat,styleselect,formatselect,fontselect,fontsizeselect,code","bold,italic,underline,strikethrough,alignleft,aligncenter,alignright,alignjustify,bullist,numlist,outdent,indent,table,blockquote,subscript,superscript,hr,charmap","forecolor,backcolor,emoticons,image,insertdatetime,link,media,nonbreaking,template,visualblocks,visualchars"],statusbar: true,elementpath: true,forced_root_block: "p"});$.fn.setPage = function() {var page = $("#tinyContent_9").html();tinymce.activeEditor.setContent(page);$("#tinyContent_9").html("");};$.fn.getPage = function() {var page = tinymce.activeEditor.getContent();$("#tinyContent_9").html(page);};$.fn.insertText = function() {var text = $("#tinyContent_9").html();if (text != undefined) { tinymce.activeEditor.insertContent(text); }$("#tinyContent_9").html("");}$.fn.setCSS = function() {var text = $("#tinyContent_9").html();$("#tinyContent_9").html("");if (text != undefined) {var css = text.split(",");tinymce.activeEditor.contentCSS = css;}}$.fn.setQuery = function(query, obj) {if (obj != undefined) { o = obj; }$("#tinyQuery_9").text(query);timer = setInterval($.fn.getAnswer, 1000);};$.fn.setAnswer = function(answer) {$("#tinyAnswer_9").text(answer);};$.fn.getAnswer = function() {var answer = $("#tinyAnswer_9").text();if (answer != "") {clearInterval(timer);if (answer != "cancel") {var items = answer.split(":");var c = items[0];items.splice(0, 1);var v = items.join(":");$('#tinyAnswer_9').text("");$.fn.setCommand(c, v);}}};$.fn.setCommand = function(c, v) {if (c != "") {switch (c) {case "preview" :tinymce.execCommand("mcePreview");break;case "code" :tinymce.activeEditor.setContent(v);$("#tinyContent_9").html("");break;case "colorpicker" :if (o != undefined && v != "") { o(v); }o = null;break;case "media" :case "video" :case "audio" :case "image" :case "document" :if (o != undefined && v != "") { o.insertContent(v); }o = null;break;default :break;}}};});</script>
</body>
</html>

Courage ... on y arrivera

NB: j'ai essayé de vous envoyer ce message via votre site ..... l'envoi ne se fait pas ....
 
Désolé pour ce problème. Est-ce que lors du lancement de l'exécutable, un sous répertoire "temp" (à la racine de l'exe) se crée bien ? Car c'est dans ce répertoire que le fichier html temporaire est créé pour visualiser votre tinymce. Si ce fichier existe, essayé (sans fermer votre exe) d'ouvrir ce fichier avec votre navigateur, et de vois ce qu'il se passe. Si le fichier et/ou le dossier "temp" n'existe pas, vérifiez les droits. Vérifiez aussi les paramètres d'exécution des pages web en local/intranet. Normalement je ne vois pas la différence entre une lanceur (exe) de projet et l'exe lui-même pour l'ouverture d'une page web, mais sait-on jamais...
Malheureusement, dans l'état actuelle des choses, je ne peut m'avancer plus, car mon poste de travail est mort. J'en ai pour 3 semaines afin que soit réparer et de retrouver mon environnement de travail avec mes projets, et donc y voir plus claire.
Cordialement,
Luc Rollinger
 
Re,

Jquery est bien là. Je peux ouvrir la page de setting mais rien n'y fait, le layout ne s'affiche pas. Très bizarre car en développement cela marche très bien.
J'ai même copié directement le répertoire tiny dans le répertoire de l’exécutable .... nada

A+

J-M des Grottes
 
Pour répondre à la personne du message précédent, il faut impérativement avoir le sous dossier tinymce ainsi que le fchier jquery.js dans ce dernier, dans le répertoire de l'exécutable. Pour ce qui est de la récupération du settings, cela ce passe depuis le champ de la fenêtre intere. La récupération du settings est au format jSon. Pour de. Plus amples informations, veuillez vous reporter au document PDF accessible sur mon site, à la page du produit. http://www.dotnuts-development.com
 
Bonjour,

Il y a 2 soucis:
1) En développement, mon champ est correct mais en production, le champ ne s'affiche pas. Je n'ai qu'un petit champ multiligne à la place. Les 2 tests s'effectuent sur le même PC (Windows 10)

2) Comment stocker la structure des settings ? Via threadextensions ?

A plus
 
Super boulot!
Moi qui combine actuellement une appli sous Webdev et sous windev et m'arrachait les cheveux avec des champs de saisie en Html et en RTF ... je suis comblé !
Je teste pour le moment mais c'est très prometteur.
Merci
ABOUT
RATING:
4.52(2)
DOWNLOADS:
115
UPDATED:
February 01, 2017
VERSION:
1.0 Ac
CONCERNS:
WINDEV
Minimum version: 01F210067f
SIZE:
1.3 MB
OF SAME DEVELOPER