Downloading premium plugins for self-hosted editor

[EmWa94]

Hi,

I would like to use a self-hosted editor with premium plugins. Is there any option using React or just pure JS?

Core editor works just fine. When I try to add any premium feature to the plugin list I got en error:

because editor tries to fetch powerpaste plugin from location which I provided by tinymceScriptSrc prop, I mean my local drive, not from the cloud. Is there any way to download premium plugins to my project or set fetching address to the cloud, except core plugins which I already have downloaded to my repository.

As you mentioned in documentation here here I added <script src="https://cdn.tiny.cloud/1/<my_API_key>/tinymce/6.8.1/plugins.min.js" referrerpolicy="origin"></script> to my public index.html, to head. I'm aware that it's not example for React, so how does it work in React environment then?

Here is how I use the editor:

import { Editor as TinyEditor } from "@tinymce/tinymce-react";
import { observer } from "mobx-react";
import { FC } from "react";
import styled from "styled-components";

export interface Props {
  content?: string;
}

export const Editor: FC<Props> = observer(({ content }) => {
  return (
    <Wrapper>
      <TinyEditor
        tinymceScriptSrc="/tinymce/tinymce.min.js"
        initialValue={content || "Start writing your article..."}
        init={{
          height: 600,
          menubar: false,
          plugins: [
            "powerpaste",
            "autolink",
            "lists",
            "link",
            "image",
            "charmap",
            "anchor",
            "searchreplace",
            "visualblocks",
            "code",
            "fullscreen",
            "insertdatetime",
            "media",
            "table",
            "preview",
            "help",
            "wordcount",
          ],
          toolbar:
            "undo redo | blocks" +
            "bold italic forecolor | alignleft aligncenter" +
            "alignright alignjustify | bullist numlist outdent indent" +
            "removeformat | help | table tabledelete",
        }}
      />
    </Wrapper>
  );
});

const Wrapper = styled.div`
  flex-grow: 1;
  padding: 44px 0 64px;
  background: #fff;
  max-height: 100%;
  box-sizing: content-box;
`;

• tinymce: 6.8.1,
• @tinymce/tinymce-react: 4.3.2

[exalate-issue-sync[bot]]

Internal Ref: INT-3267

[danoaky-tiny]

The documentation you linked to is from TinyMCE v5. As you're using TinyMCE v6, here is two ways of setting up TinyMCE React and v6: https://www.tiny.cloud/docs/tinymce/6/react-pm-host/ https://www.tiny.cloud/docs/tinymce/6/react-zip-host/ Either should work for your use case. Let us know if that helps.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Respond with a comment or this will be closed in 7 days.