Tiny MCE

General
1

I would like to use the TinyMCE component and have spent 4-8 hours of trying to understand how I can reuse this project:

https://github.com/mstahv/tinymcewrapper

My environment is clean. It is a factory resetted Macbook pro since sept 2015 (two weeks ago?). I have installed Java 8 Update 60, (Adobe flash player), Eclipse-mars, Google chrome. For eclipse I’ve inserted the Vaadin-plugin and the servers Tomcat 7&8 expanded from tar-balls to interact with eclipse. Then I did

git clone https://github.com/vaadin/addressbook.git

and ran it out of the box. Nice! Then on to TinyMCE

git clone https://github.com/mstahv/tinymcewrapper.git

At this point I spent some time trying to run it like Addressbook. This lead to a bit of hacking in the maven files and adding trace-printouts in the connector without result. I did get a screen when pointing my browser to localhost:8888 (when running command line) and localhost:8080 when using jetty from the IDE. It only say “Directory :/” or similar. At some state I got the browser to notify that it did not get some “…nocache.js” file.

Then I whiped all that and checked it out clean. Added the maven-plugin for jetty:run-target and noticed that maven whas not on my system. Thus

ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
brew install maven
mvn clean package

Now some more stuff happened. It compiled 6 permutations ??? Anyway, my hope was up. :slight_smile: Same problem. :frowning: I tried to move the Tinymceeditorapplication to the src/-folder and had to make some adjustments to the pom.xml-file. At this point (i think) it told me that some annotation was not available until 7.1 so I went to 7.5.6. and made more additions to the pom.xml-file. I noticed that the Addressbook example deployed differently so I added

@WebServlet(urlPatterns = "/*")

@VaadinServletConfiguration(ui = TinymceeditorApplication.class, productionMode = false, widgetset = "org.vaadin.tinymceeditor.widgetset.TinymceeditorWidgetset")

public static class MyUIServlet extends VaadinServlet {

}

and removed the main-method and the startInEmbeddedJetty-method. Still the Directory screen or the notice of missing the nocache.js-file.

I really would be happy if I could get this component to work. If somebody more skilled on all this could make the component as reuseable as the addressbook I could pursue the idea of replacing a grails-app with vaadin. The driver is to make the programming more similar to Swing-programming wihch is highly desriable.

All help greatly appreciated. I somebody asks for more details on my failed attempts I would be more than happy to supply them. I attach the state of my project where it was when I wrote this.
21433.gz (2.14 MB)

2

Hi Kare,

Don’t lose you hope, using client side additions in your application is probably the harderst part for you to learn.

I think the largest “mistake” you did was that you are trying to build the add-on by yourself. This is typically not needed as many Vaadin add-ons can be taken as prebuilt jars from the
Directory
 service. In case of TinyMCE Wrapper, just add this dependency to your pom.xml file (I assume you are using Maven to build your project, if not I strongly suggest to use it, especially instead of plain ant+ivy).

<dependency>
   <groupId>org.vaadin.addons</groupId>
   <artifactId>vaadin-wrapper-for-tinymce</artifactId>
   <version>2.0.0</version>
</dependency>

Then, if you created the project using our maven archetype, just issue mvn clean install (can be done with IDE as well). This will then modify your application widgetset to contain the “client side counterpart” for the tiny mce server side component. After that just use the tiny mce editor instead of TextField and things should work as charm.

Let me know if you can’t make it work, I can then verify the whole process myself. We are plannin to build some entry level tutorials and video material this autumn, so this is good information to me, to see what kind of obstacles developers typically face when they try Vaadin. Thanks!

cheers,
matti

3

Thanks Matti

This set me on track! Well I think so anyway. It makes perfect sense but I have not achieved anything I can appreciate yet. They way I understood your mail made me do the following:

  1. Checked out the addressbook-application again.
  2. Ran it. Works again.
  3. Added the maven-clause to the pom.xml
  4. Made a small change to the file AdressbookUI.java as follows

line 43 was
TextField filter = new TextField();
I changed it for
TinyMCETextField filter = new TinyMCETextField();

This requires an extra import. Eclipse was able to add it.

  1. Ran it again with the modification

I did get a “filter” component now replaced with one that is larger and different but not what I had expected. The component can take text by setting the cursor in it and typing. Return-strikes does not move to a new line and worse yet, there are no buttons above for the text treatment.

This is where I am puzzled now. I thought I would get it all and be able to add listeners to the component and do getText(), setText(“…”) and the like on it but no.

Can you set be further on track? What I want is a blog-similar application. One shall edit articles, save them. When saved the text shall be like a page normally is, on some event it shall turn to editing mode. That is when I want the buttons/tools above the text-surface as on this page: http://www.tinymce.com/tryit/full.php

4

Some more observations. Even after building the .war-file there are no *.js files in my project. The .war-file does not include them. When looking at the page with the Chrome webbrowser in “inspect element”-mode I see that the tinymsc.js file HAS been successfully downloaded. (With 9.cache.js, 1.cache.js, vaadinBootstrap.js, com.vaadin.DefaultWidgetSet.nocache.js and other files that I do not recognize at all.)

What I am asking myself is:

Where was the tinymsc.js-file retrieved from?
Why is all the tinymsc-javascript code not processed into the war file?
It feels like what I expect is very wrong but how and why?

I attach my modified addressbook project.
21434.gz (154 KB)

5

I thought a bit more. I found the .js files in

target/addressbook-2.0/WEB-INF/lib/vaadin-wrapper-for-tinymce-2.0.0.jar

processed into my war by maven. Since some stuff from within was loaded a lot of this must be correct. It should not require much more from here but what?

6

Hi,

Your problem is that the Addressbook example is not configured for client side extension. That is why I typically suggest to use our archetype or some more advanced example as a starting point, but adding support to it isn’t that hard. Add this annotation to your UI class (AddressbookUI):

@Widgetset("AppWidgetset") And this Maven plugin to your pom.xml (into build/plugings section[code]

com.vaadin
vaadin-maven-plugin
${vaadin.plugin.version}

AppWidgetset
-Xmx512M -Xss1024k
${basedir}/target/classes/VAADIN/widgetsets
false
false
${basedir}/target/gwtdirt
${basedir}/target/gwtdirt
OBF
true



                        <!-- disabled by default to use on-the-fly theme compilation -->
                        <!-- <goal>compile-theme</goal> -->
                        <!--<goal>update-theme</goal>-->
                        <goal>update-widgetset</goal>
                        <goal>compile</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

[/code]That should do the trick!

cheers,
matti

7

That was true.

I am very content with the addressbook-example and the posts on this thread. To me it makes a clean example of how precisely and only this is added. Cleaner than what I found when googling anyway. Thanks very much Matti.

I attach my working example if ever some other reader of this can benefit from it. In the attached state I set the theme to advanced to get all the other buttons and functions.

A large nice and cold beer on me should we meet. Thanks again,
Kåre

21436.gz (155 KB)

8

It strikes me that there are some remarks on this.

The IDE, here Eclipse Mars, signals errors in the pom.xml-file. These are wrong and there are plenty of notes to find with google. This concerns the packaging-clause, the failOnMissingWebXml-clause and executions → execution-clause. It did not work to run from Eclipse. A browser showed an error message similar to

Unable to load ./VAADIN/widgetsets/AppWidgetset/AppWidgetset.nocache.js

By compiling from the command line it worked even thought this was not an entirely good experience. I got outputs like

[WARNING]
Failed to retrieve com.vaadin:vaadin-client based on project POM

[WARNING]
Failed to retrieve com.vaadin:vaadin-client-compiler based on project POM

But the .war-file was created and functional. Another note was that even when I changed the java code, the compilation would output

[INFO]
Nothing to compile - all classes are up to date

but the source code proved compiled and active.

9

The “Failed to retrieve…” warnings are IMO obsolete logging, should not be visible by standard execution. I get them everytime, but have just learned to ignore them, like many others. I added
a ticket about this.

The Maven integration in Eclipse has been improving a lot lately but it still indeed is not as fluent as it could be. If you are new to Maven, you should definitely read my recent article called
Maven essentials for the impatient developer
. That will help you with other projects as well, not just with Vaadin projects.

Our next major version of the Eclipse plugin can also hopefully help to make the development tasks to feel more “integrated” with the most common project type. With it e.g. the compile widgetset button should work properly and hopefully also setting will propagate back to pom.xml from IDE.

BTW. I hardly ever use command line directly with Maven. IDEs (even Eclipse :slight_smile: ) can issue them directly as well and then you can make handy shortcuts for targets that you execute commonly.

cheers,
matti

10

I have worked some time and have gotten quite enthusiastic about Vaadin. To include TinyMCE was just fine after all. Now I’ve noticed that I haven’t gotten it WYSIWYG yet. I add two pictures for this. I use Label like this

String html = “

Helheten

Lagar bygger samhällen

”;
Label l = new Label(html, ContentMode.HTML);

I have done no styling but the TinyMCE component and the Label component must share default for that same reason. Is there internal styling within the component?
21832.png
21833.png

11

Hi,

Check out TinyMCE documentation. It should be possible to assign CSS also for the editor part, so that it would use similar typography as Vaadin apps (Label component). I think there was another thread discussing the same topic.

cheers,
matti

12

Now I suffer from this
[b]
https://community.tinymce.com/communityQuestion?id=90661000000If4hAAC

thus i need to "
[/b]load the listsand/or advlist plugins" via my init.

How is that done?

13

Hello again
Note that my post above was from debugging a problem that I at the time misunderstood. By googling I came to pages like the one above. The actual error was that the config was not balanced in {} . Here is my soultion after hours of pain that you may appreciate.

private static final String tinymceconfig =
“{”
+"menubar: true, "
+"plugins: ‘print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern code help’, "
+"toolbar: ‘insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat | code | help’, "
+"file: {title: ‘File’, items: ‘newdocument’}, "
+"edit: {title: ‘Edit’, items: ‘undo redo | cut copy paste pastetext | selectall’}, "
+"insert: {title: ‘Insert’, items: ‘link media | template hr’}, "
+"view: {title: ‘View’, items: ‘visualaid’}, "
+"format: {title: ‘Format’, items: ‘bold italic underline strikethrough superscript subscript | formats | removeformat’}, "
+“table: {title: ‘Table’, items: ‘inserttable tableprops deletetable | cell row column’}, "
+“tools: {title: ‘Tools’, items: ‘spellchecker code’} "
+”}”;