Using TinyMCE from cdn to remove the warning message. (#39)
* Removing tinymce api key message. * Updating yarn lock. * Fixing editor disabled. * Default set on refresh. Co-authored-by: Satbir Singh <apple@apples-MacBook-Pro.local>
This commit is contained in:
satbir121
GitHub
parent
13e173fa77
commit
d753374aa9
|
|
@ -18,7 +18,6 @@
|
|||
"@optimizely/optimizely-sdk": "^4.0.0",
|
||||
"@sentry/browser": "^5.6.3",
|
||||
"@sentry/webpack-plugin": "^1.10.0",
|
||||
"@tinymce/tinymce-react": "^3.5.0",
|
||||
"@types/chance": "^1.0.7",
|
||||
"@types/fontfaceobserver": "^0.0.6",
|
||||
"@types/lodash": "^4.14.120",
|
||||
|
|
@ -182,4 +181,4 @@
|
|||
"pre-commit": "lint-staged"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet" />
|
||||
<title>Appsmith</title>
|
||||
<style>
|
||||
#loader {
|
||||
|
|
@ -12,11 +12,13 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 4px;
|
||||
background:#D36500;
|
||||
background: #D36500;
|
||||
transition: all ease-in 0.3s;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.4.0/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="loader" style="width: 30vw;"></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { Editor } from "@tinymce/tinymce-react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { debounce } from "lodash";
|
||||
import styled from "styled-components";
|
||||
const StyledRTEditor = styled.div`
|
||||
&& {
|
||||
|
|
@ -22,26 +22,66 @@ export interface RichtextEditorComponentProps {
|
|||
export const RichtextEditorComponent = (
|
||||
props: RichtextEditorComponentProps,
|
||||
) => {
|
||||
const [editorInstance, setEditorInstance] = useState(null as any);
|
||||
useEffect(() => {
|
||||
if (editorInstance !== null) {
|
||||
editorInstance.mode.set(
|
||||
props.isDisabled === true ? "readonly" : "design",
|
||||
);
|
||||
}
|
||||
}, [props.isDisabled]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editorInstance !== null) {
|
||||
editorInstance.setContent(props.defaultValue, { format: "html" });
|
||||
}
|
||||
}, [props.defaultValue]);
|
||||
useEffect(() => {
|
||||
const onChange = debounce(props.onValueChange, 200);
|
||||
(window as any).tinyMCE.init({
|
||||
height: "100%",
|
||||
selector: `textarea#${props.widgetId}`,
|
||||
menubar: false,
|
||||
branding: false,
|
||||
resize: false,
|
||||
setup: (editor: any) => {
|
||||
editor.mode.set(props.isDisabled === true ? "readonly" : "design");
|
||||
// Without timeout default value is not set on browser refresh.
|
||||
setTimeout(() => {
|
||||
editor.setContent(props.defaultValue, { format: "html" });
|
||||
}, 300);
|
||||
editor
|
||||
.on("Change", () => {
|
||||
onChange(editor.getContent());
|
||||
})
|
||||
.on("Undo", () => {
|
||||
onChange(editor.getContent());
|
||||
})
|
||||
.on("Redo", () => {
|
||||
onChange(editor.getContent());
|
||||
})
|
||||
.on("KeyUp", () => {
|
||||
// console.log("change: ", editor.getContent())
|
||||
onChange(editor.getContent());
|
||||
});
|
||||
setEditorInstance(editor);
|
||||
},
|
||||
plugins: [
|
||||
"advlist autolink lists link image charmap print preview anchor",
|
||||
"searchreplace visualblocks code fullscreen",
|
||||
"insertdatetime media table paste code help",
|
||||
],
|
||||
toolbar:
|
||||
"undo redo | formatselect | bold italic backcolor forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
|
||||
});
|
||||
|
||||
return () => {
|
||||
editorInstance !== null && editorInstance.destroy();
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<StyledRTEditor>
|
||||
<Editor
|
||||
value={props.defaultValue}
|
||||
disabled={props.isDisabled}
|
||||
init={{
|
||||
height: "100%",
|
||||
menubar: false,
|
||||
branding: false,
|
||||
resize: false,
|
||||
plugins: [
|
||||
"advlist autolink lists link image charmap print preview anchor",
|
||||
"searchreplace visualblocks code fullscreen",
|
||||
"insertdatetime media table paste code help",
|
||||
],
|
||||
toolbar:
|
||||
"undo redo | formatselect | bold italic backcolor forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
|
||||
}}
|
||||
onEditorChange={(content: any) => props.onValueChange(content)}
|
||||
/>
|
||||
<textarea id={props.widgetId}></textarea>
|
||||
</StyledRTEditor>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1925,12 +1925,6 @@
|
|||
"@svgr/plugin-svgo" "^4.3.1"
|
||||
loader-utils "^1.2.3"
|
||||
|
||||
"@tinymce/tinymce-react@^3.5.0":
|
||||
version "3.5.0"
|
||||
resolved "https://registry.yarnpkg.com/@tinymce/tinymce-react/-/tinymce-react-3.5.0.tgz#5017be56aeab1077f09d3f74a386883e5524a33f"
|
||||
dependencies:
|
||||
prop-types "^15.6.2"
|
||||
|
||||
"@types/algoliasearch-helper@*":
|
||||
version "2.26.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/algoliasearch-helper/-/algoliasearch-helper-2.26.1.tgz#60cf377e7cb4bd9a55f7eba35182792763230a24"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user