tinyMCE usage in HTML macro working only in PREVIEW mode

[Tichomir Hadgiev]

Hi All, 

I'm trying to use tinyMCE within HTML macro and I'm stuck with a very strange problem. While not being a developer, but rather playing around, the problem I do encounter is that my script works in PREVIEW mode, but it doesn't work when I Save my work. 

Here is the script itself (APIkeyremoved on purpose): 

<button onclick="add_tiny(); return false;">CLICK ME TO INITIATE</button>
<textarea class="editor" id="one" name="content">1</textarea>

<script type="text/javascript" src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=xxxxxxx"></script>
 
<script type="text/javascript">

tinymce.init({
    selector: ".editor",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});


function add_tiny () {
//console.log(tinymce.get('one').on("change", function() { alert("stuff"); }));
	console.log(tinymce.get("one").getContent());
}
</script>

The error in console I'm getting when page is saved is as follows: 

Uncaught TypeError: Cannot read property 'getContent' of undefined
 at add_tiny (testing:861)
 at HTMLButtonElement.onclick (testing:841)

Thanks a lot for your cooperation!

Regards, 

Tihomir

[Bill Bailey]

How are you loading the script?  But I assume the issues is that you are running the code on the view of the page, but not actually changing the source of the page.

There is a separate process for installing plugins for TinyMCE and it involves writing a Confluence plugin. Fortunately, there is a tutorial.

https://developer.atlassian.com/server/confluence/enabling-tinymce-plugins/

Unfortunately, there is often a lot of assumed knowledge with building Confluence plugins.