Implementing TinyMCE

Using JavaScript with Hype
1

tinyMCE.hype.zip (15.4 KB)

I have followed the basic install from their website.
If I create a blank HTML and run that I see the editor okay.

However in the attached project nothing happens.

What I am trying to achieve is:

Each scene in a project is duplicated from the main scene.
I load in the text from external html files and images (working okay)
I want to produce an ‘Admin’ project where the client can load the HTML text into TinyMCE edit and save the html file.

Is the the best approach or is there a way to do this within Hype?

Cheers

Steve Warby

2

Hmm,

the only way I can get it to work is placing the full html inside the widget. Not ideal but I can use some tricks to get the values.

This example has the html and code inside the widget.
We also add a submit button to the form. But using css we hide it.
We then have a Hype button outside which runs code.

var widgetIfram = hypeDocument.getElementById('widget').children[0];
	
	var widgetIframeContent = widgetIfram.contentDocument || widgetIfram.contentWindow.document
	
	var mytextarea = widgetIframeContent.querySelector('#mytextarea');

var submitButton = widgetIframeContent.querySelector('#submit'); 

 submitButton.click();
console.log(mytextarea.value);

The code will:

Will get the widget.
Get the iframe within the widget.
Get the frames content document.
Get the textarea.
Get the submit button

Click the hidden submit button
( This is so the TinyMCE submits the changes ( new type text and formatting) to the textarea’s value. If you do not submit the value will display correctly in the view but will not be in the DOM. (or what ever)… )

We then can get the new value with all the formatting…

Note to disable the textarea resize drag handle. use resize:false

tinymce.init({
    selector: '#mytextarea',
   
           resize: false 
  });

Screen Shot 2016-05-02 at 22.37.48.JPG1720×650 49 KB

(Note: example project below displays submitted result in console. Above image is from another version with a text box to show the results. You will be able to get the value and do what ever you want with it in your own projects.)

tinyMCE.hype.zip (22.0 KB)

1 Like
3

Hi Mark,

got that working thanks.

I am now trying to show some advanced menus following this page http://archive.tinymce.com/tryit/3_x/full.php

I am presuming the errors are cross domain.
So how do I add the Tinymce to a project. I have downloaded the source but it has lots of folders so I cannot simply drag this into the resource folder and presumably all the paths are relative.

Cheers

Steve Warby

4

It can hopefully be done. I have done something similar with jquery themes.
But

I will not be able to look at this until later today…

5

Huh,

The downloads are not working on tinymce, is it just me ?

6

Working here.

I can dropbox it if your having issues

7

If you can… cheers

8
9

So that only has the modern. Not advanced.

Where is the code for Modern. I am sure I saw it on the site cannot find it now ?

10

Ok. I found some Modern code.

The important thing is your code matches your plugins/skins/Theme etc.

i.e

server [foo.html | foo.hyperesources | tinymce | ]

So long as you have the correct code for the correct themes you can simply place the/tinymce folder in the same directory as the exported projects.

Then make sure that the main tinymce js link is pointing to the file in that folder.

in my example. this would be:

<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>

The full code I used in the widget is,

<!DOCTYPE html>
<html>
<head>


<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>
<script type="text/javascript">

tinyMCE.init({
  selector: 'textarea',
  height: 500,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons',
  image_advtab: true,
  templates: [
    { title: 'Test template 1', content: 'Test 1' },
    { title: 'Test template 2', content: 'Test 2' }
  ]
  /*,
  content_css: [
    'https://fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    'https://www.tinymce.com/css/codepen.min.css'
  ] */
 });
 
</script>

</head>

<body>
<form method="post" action="somepage"  onsubmit="return false">
        <textarea id="mytextarea" name="content" style="width:100%"></textarea>
        <input style="visibility: hidden; position: absolute;" id="submit" type="submit" value="Submit" >
</form>



</body>
</html>

Screen Shot 2016-05-03 at 22.23.33.JPG1942×1462 174 KB

You will not be able to preview in Hype and the submit as I have it will only work from a server ( cross domain issue otherwise)

Most things seem to work. But you should be able to take it from here and add, correct what ever…

tinyMCE_v2.zip (523.3 KB)

1 Like
11

That great thanks for the info.

So to use any js plugins that have multiple folders we have to add the folders to the project directory and upload the said folders when publishing.

If it is a simple structure we can simply drag into the resource folder.

Cheers

Steve Warby

12

Hi guys,

I can now load a text file from the server.

var idName = hypeDocument.getElementById('mainText');


var txtFile = new XMLHttpRequest();
txtFile.open("GET", "${resourcesFolderName}/xSetting.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
var allText = txtFile.responseText;
idName.innerHTML  = allText;
console.log('data is  ' +' '+allText);   
}
}
}
txtFile.send(null);

Once edited I now need to save some updated text into the txt file.

Can I do this through javascript ?

Cheers

Steve Warby

13

If you mean write back to the text file, then you will need to use some PHP.

Have a search on the site there are example of doing this.