I'm trying to build a desktop app using Electron.js & React.js and integrate TinyMCE text editor in it. It's my first time using both Electron and tinyMCE, and I've used electron-react-boilerplate to start my project, so I'm fairly lost on the architecture still and where to even begin looking at what to change and where.
At this point, all I've done was create a simple component with the editor, but I am getting the following error:
Refused to load the script 'https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Not sure how to make it go away. As it says, my Editor doesn't even show up.
I found this question where the same error was discussed, but all the answers there are apparently unsafe? How do I solve this safely.
This is my index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'" />
<title>Pecan</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is my App.tsx file
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import Editor from './pages/editor';
export default function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Editor />} />
</Routes>
</Router>
);
}
My editor component
import { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
export default () => {
const editorRef = useRef(null);
const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};
return (
<>
<Editor
onInit={(evt, editor) => {
editorRef.current = editor;
}}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 500,
menubar: false,
plugins: [
'advlist',
'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',
content_style:
'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
}}
/>
<button onClick={log} type="button">
Log editor content
</button>
</>
);
};