Hi Ryan,

I have figured it out :D

I'll leave this here for anyone else trying to do the same thing. It's a tiny bit quirky but it absolutely functions as it should. Most of the anomalies are visual but those could be related to how I'm using the editor rather than it being a product of how the editor is initalised.

Anyway, here's how I got JCE working with JS. You [b]do[/b] need to use Joomla functions still.

First of all we need to set up the editor scripts via PHP like Ryan does


[code type="php"]
require_once JPATH_ADMINISTRATOR . '/components/com_jce/includes/base.php';

// create editor
$editor = new WFEditor();

$editor->init();

foreach ($editor->getScripts() as $script) {
    $document->addScript($script);
}

foreach ($editor->getStyleSheets() as $style) {
    $document->addStylesheet($style);
}

$document->addScriptDeclaration(implode("\n", $editor->getScriptDeclaration()));
[/code]

You will also need to generate a session token so that the JCE popups still work (link/media/file). I created a hidden input that appears on the page, so I can grab the token value via JS when needed

[code type="php"]
$html .= '<input type="hidden" name="sessionToken" id="sessionToken" value="'. JSession::getFormToken() .'" />';
[/code]

With all this on the page, we can use WFEditor.init(); to create a JCE instance, but the options it requires are quite specific. Based on this thread

https://www.joomlacontenteditor.net/support/forum/98135-error-in-creating-editor-via-javascript-uncaught-typeerror-cannot-read-property-css-of-undefined-in-editor_template-js

What I found was missing was a parameter in the init options. This held things like the profile_id to use, the session token, and also a context - no idea what this is but it was set to "22" for all my other JCE instances so I hard coded the 22. Here's my settings object:

[code type="javascript"]
var token = document.getElementById('sessionToken').value,
    editorOpts = {
      skin: 'o2k7',
      skin_variant: 'silver',
      mode: 'specific_textareas',
      theme_advanced_toolbar_location: 'top',
      theme_advanced_buttons1: 'bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,formatselect,bullist,numlist,outdent,indent',
      theme_advanced_buttons2: 'link,unlink,anchor,image,separator,undo,redo,cleanup,code,separator,sub,sup,charmap',
      theme_advanced_buttons3: '',
      height: 350,
      width: 700,
      max_width: 700,
      base_url: 'https://website.com/',
      selector: '#editor-text-popup',
      language_load: 0,
      query: {
        context: 22,
        profile_id: 1
      }
    };

editorOpts.query[token] = 1;

WFEditor.init(editorOpts);
[/code]

This creates a JCE instance that functions as expected, initialised via JS.

After this, the WFEditor object doesn't behave the same as tinymce, and so I found to do things like destroy the created instance, I had to use

[code type="javascript"]
tinymce.execCommand('mceRemoveControl', true, 'editor-text-popup');
[/code]

Rather than a function on WFEditor. However, WFEditor is where you call things like getContent() to get the html.

I hope this helps others. Thank you for your help Ryan.