Hey Scott,
here’s a project, what will help you:
click me!
This HTML-Editor is not my work, I got it from another cool guy (unfortunately I forgot his name - I’ll seek later for it) - but it works great!
I try to let this project at its current savepath, so everyone in future can download it too. If not - write me a mail: lars.lehmann@c-doit.de
Thanx Lars but I couldn’t get it to work in my project. However,
TinyMCE WIKI says “This is the minimal configuration for getting TinyMCE to replace a textarea.”
[code]
[/code]So given this code, what do I put where to make it work in the WebControlWrapper?
Please please please be VERY careful when you allow users to input their own HTML and have your website display it.
It is trivial to input a tag, pull a javascript library from another server, and hijack your web app into revealing user codes, cookie contents and other information (including submitting that information to another website without the user even knowing about it)
Read up on cross-site-scripting attacks, filter for a very small subset of HTML or even better, adopt a markup language like MarkDown or the one used by MediaWiki (in WikiPedia, etc).
you have been warned.
I have a case that I want the users in my company to write HTML Emails. I took a look at that project and totally got lost.
Maybe someday I can figure it out.
In case anyone’s interested…Web Custom Controls includes the CLEditor control with support for the various options and features.
I know sometimes Xojo users are looking for a free solution, and there have been some free examples of HTML editors for Xojo Web. But even seemingly simple markup (Scott’s post) can involve quirks and extra work to get everything running correctly as some of you are discovering.
I know CLEditor works because I have customers using it. And if you encounter a bug or have difficulty getting it running, I will make it work. I’ll do a remote session with you, or simply add it to your project myself if necessary.
Can that be used in a Desktop Mac version?
Thanx Steve for the warning. I will keep that at the forefront of my mind as I go along. I decided to leave the App.HTMLHeader blank and do all initialization and loading of libraries in the module itself.
As such, I finally figured out how to initialize TinyMCE within a WebControlWrapper. Sorry for the long reply but it’s things like this that help me out a TON.
I’m using TinyMCE v4
In the Open event,
[code] library.Append(“http:///js/jquery-1.11.0.min.js”)
library.Append(“http:///tinymce/tinymce.min.js”)
LoadLibraries(Self.ControlID + “_constructor();”,library)
[/code]
In the SetupHTML event, I included:
...
source.Append( "<style><link href=""http://<your install location>/tinymce/skins/lightgray/skin.min.js"" rel=""stylesheet"" type=""text/css""/></style>" )
...
In the Shown event I initialize TinyMCE :
ExecuteJavaScript SetupHTMLCSSSetupHTMLCSS (Constant)
[code]tinymce.init({
selector: “textarea”,
theme: “modern”,
plugins: [
“advlist autolink lists link image charmap print preview hr anchor pagebreak”,
“searchreplace wordcount visualblocks visualchars fullscreen”,
“insertdatetime media nonbreaking save table contextmenu directionality”,
“template paste textcolor moxiemanager”
],
toolbar1: “undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image”,
toolbar2: “print preview media | forecolor backcolor”,
image_advtab: true,
templates: [
{title: ‘Test template 1’, content: ‘Test 1’},
{title: ‘Test template 2’, content: ‘Test 2’}
],
setup: function(editor) {
editor.on(‘change’, function(e) {
console.log(‘change event’, e);
});
}
});[/code]
Now, I have a nice looking editor but I don’t know how to configure the events to trigger Xojo.triggerServerEvent so I can perform various function in the ExecuteEvent. This code in the SetupHTMLCSS constant prints “change event” and provides a link to the object in the Firefox developer tools console. Can someone help with the syntax for calling the ExecuteEvent?
setup: function(editor) {
editor.on('change', function(e) {
console.log('change event', e);
});
}
What’s wrong with my example-project?
Which exceptions do you get?
Just copy the dialog with the control to your project, then copy the App.HTML-Header-Text from my proj. to your’s and it’s done. I did this dozen times. It works…
Tell me!
Got TinyMCE working but now I have a very strange behavior. After displaying the editor for the first time, ALL WebTextArea fields contain the edit. Doesn’t matter which page/dialog/container they are in. Probably due to my minimal javascript knowledge.
TinyMCE
TinyMCE in WebTextArea fields in other containers in the project
Any ideas?
The problem with these editors is that they were generally designed long ago, before the arrival of touch tablets … they are ugly and not suitable for touch use.
I found it, it is beautiful and looks quite usable on the iPad:
it pays, but it is worth the cost.