Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: tinymce plugin for inserting an iframe to texteditor #395

Closed
wants to merge 1 commit into from
Closed

feat: tinymce plugin for inserting an iframe to texteditor #395

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.4.1",
"reselect": "^4.1.5",
"tinymce": "^5.10.4",
"tinymce": "^5.10.7",
"video-react": "^0.15.0",
"video.js": "^7.18.1",
"xmlchecker": "^0.1.0"
Expand Down
5 changes: 5 additions & 0 deletions src/editors/data/constants/tinyMCE.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ export const buttons = StrictDict({
table: 'table',
undo: 'undo',
underline: 'underline',
codeRow: 'code',
preview: 'preview',
embediframe: 'embediframe',
});

export const plugins = listKeyStore([
Expand All @@ -66,6 +69,8 @@ export const plugins = listKeyStore([
'image',
'imagetools',
'quickbars',
'preview',
'embediframe'
]);

export const textToSpeechIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 22C3.08333 22 2.72917 21.8542 2.4375 21.5625C2.14583 21.2708 2 20.9167 2 20.5V3.5C2 3.08333 2.14583 2.72917 2.4375 2.4375C2.72917 2.14583 3.08333 2 3.5 2H13L11.5 3.5H3.5V20.5H15.5V17H17V20.5C17 20.9167 16.8542 21.2708 16.5625 21.5625C16.2708 21.8542 15.9167 22 15.5 22H3.5ZM6 17.75V16.25H13V17.75H6ZM6 14.75V13.25H11V14.75H6ZM15.5 15L11.5 11H8V6H11.5L15.5 2V15ZM17 12.7V4.05C17.9333 4.4 18.6667 5.01667 19.2 5.9C19.7333 6.78333 20 7.65 20 8.5C20 9.35 19.7083 10.1917 19.125 11.025C18.5417 11.8583 17.8333 12.4167 17 12.7ZM17 16.25V14.7C18.1667 14.2833 19.2083 13.5333 20.125 12.45C21.0417 11.3667 21.5 10.05 21.5 8.5C21.5 6.95 21.0417 5.63333 20.125 4.55C19.2083 3.46667 18.1667 2.71667 17 2.3V0.75C18.7 1.2 20.125 2.1375 21.275 3.5625C22.425 4.9875 23 6.63333 23 8.5C23 10.3667 22.425 12.0125 21.275 13.4375C20.125 14.8625 18.7 15.8 17 16.25Z" fill="black"/></svg>';
Expand Down
65 changes: 65 additions & 0 deletions src/editors/sharedComponents/TinyMceWidget/embedIframePlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
tinymce.PluginManager.add("embediframe", function (editor) {
const openInsertIframeModal = () => {
editor.windowManager.open({
title: "Insert iframe",
body: {
type: "panel",
items: [
{
type: "input",
name: "source",
label: "Source URL",
required: true,
},
{
type: "input",
name: "width",
label: "Width",
required: true,
},
{
type: "input",
name: "height",
label: "Height",
pattern: "^[0-9]+$",
required: true,
},
],
},
buttons: [
{
type: "cancel",
name: "cancel",
text: "Cancel",
},
{
type: "submit",
name: "save",
text: "Save",
primary: true,
},
],
onSubmit: function (api) {
// Handle the form submission (Save button)
const data = api.getData(); // Get the input values
if (data.source) {
const width = /^\d+$/.test(data.width) ? data.width : "300";
const height = /^\d+$/.test(data.height) ? data.height : "300";

const iframeCode =
`<div class="resizable-iframe" style="width: ${width}px; height: ${height}px;">` +
`<iframe src="${data.source}" width="100%" height="100%"></iframe>` +
"</div>";
editor.insertContent(iframeCode);
}

api.close();
},
});
};

editor.ui.registry.addButton("embediframe", {
text: "Embed iframe",
onAction: openInsertIframeModal,
});
});
2 changes: 2 additions & 0 deletions src/editors/sharedComponents/TinyMceWidget/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/image';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/quickbars';
import 'tinymce/plugins/preview';
import './embedIframePlugin';

import store from '../../data/store';
import { selectors } from '../../data/redux';
Expand Down
3 changes: 3 additions & 0 deletions src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => {
image,
imageTools,
quickToolbar,
plugins.preview,
plugins.embediframe
].join(' '),
menubar: false,
toolbar: toolbar ? mapToolbars([
Expand All @@ -53,6 +55,7 @@ const pluginConfig = ({ isLibrary, placeholder, editorType }) => {
[imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock],
[buttons.table, buttons.emoticons, buttons.charmap, buttons.hr],
[buttons.removeFormat, codeButton],
[buttons.codeRow , buttons.preview, buttons.embediframe]
]) : false,
imageToolbar: mapToolbars([
// [buttons.rotate.left, buttons.rotate.right],
Expand Down