How do I remove Image and Table option from TinyMCE textarea? - plugins

Everytime I click inside the textarea to type, these two options show up. I don't need them. I tried looking on the TinyMCE website but couldn't find anything. Hoping someone could help me find a solution.
Here is my tinyMCE.js code
var useDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
[tinymce.init({
selector: "textarea",
plugins:
"print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen codesample charmap hr nonbreaking toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons",
toolbar: "undo redo | charmap emoticons | bold italic",
toolbar_sticky: true,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "{path}{query}-{id}-",
autosave_restore_when_empty: false,
autosave_retention: "2m",
image_advtab: true,
branding: false,
link_list: \[
{ title: "My page 1", value: "https://www.tiny.cloud" },
{ title: "My page 2", value: "http://www.moxiecode.com" },
\],
image_list: \[
{ title: "My page 1", value: "https://www.tiny.cloud" },
{ title: "My page 2", value: "http://www.moxiecode.com" },
\],
image_class_list: \[
{ title: "None", value: "" },
{ title: "Some class", value: "class-name" },
\],
importcss_append: true,
template_cdate_format: "\[Date Created (CDATE): %m/%d/%Y : %H:%M:%S\]",
template_mdate_format: "\[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S\]",
height: 300,
image_caption: true,
quickbars_selection_toolbar: "bold italic | h2 h3 blockquote",
noneditable_noneditable_class: "mceNonEditable",
toolbar_mode: "sliding",
skin: useDarkMode ? "oxide-dark" : "oxide",
content_css: useDarkMode ? "dark" : "default",
content_style:
"body { background-color: rgba(0,0,0,0.3); color: #ebfdffff; font-family:Helvetica,Arial,sans-serif; font-size:14px }",
oninit: "postInitWork",
});

you just need to remove quickbars from plugins.
Here is the codepen for demostration:
https://codepen.io/michael-vascue/pen/MWpOmVB?editors=1011
tinymce.init({
selector: "textarea#basic-example",
height: 500,
menubar: false,
plugins:
"print preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen codesample charmap hr nonbreaking toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons",
toolbar: "undo redo | charmap emoticons | bold italic",
toolbar_sticky: true,
autosave_ask_before_unload: true,
autosave_interval: "30s",
autosave_prefix: "{path}{query}-{id}-",
autosave_restore_when_empty: false,
autosave_retention: "2m",
image_advtab: true,
branding: false,
link_list: [
{ title: "My page 1", value: "https://www.tiny.cloud" },
{ title: "My page 2", value: "http://www.moxiecode.com" },
],
image_list: [
{ title: "My page 1", value: "https://www.tiny.cloud" },
{ title: "My page 2", value: "http://www.moxiecode.com" },
],
image_class_list: [
{ title: "None", value: "" },
{ title: "Some class", value: "class-name" },
],
importcss_append: true,
template_cdate_format: "\[Date Created (CDATE): %m/%d/%Y : %H:%M:%S\]",
template_mdate_format: "\[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S\]",
height: 300,
image_caption: true,
quickbars_selection_toolbar: "bold italic | h2 h3 blockquote",
noneditable_noneditable_class: "mceNonEditable",
toolbar_mode: "sliding",
skin: "oxide-dark",
content_css: "dark",
content_style:
"body { background-color: rgba(0,0,0,0.3); color: #ebfdffff; font-family:Helvetica,Arial,sans-serif; font-size:14px }",
oninit: "postInitWork"
});

Related

Add inline styles to links (something like link_class_list)

is there some way to add something like link_class_list, but make it use inline styles instead of classes?
I need to make it use styles, because some email clients block the <style> tag and we need to support most of the clients.
Werer loading the editor using JQuery. TinyMCE is on version 5.
Current config:
plugins: ["link, image"],
link_class_list: [
{ title: "None", value: "" },
{ title: "External Link", value: "ext_link" },
{
title: "Internal Links",
menu: [
{ title: "Internal Support Link", value: "int_sup_link" },
{ title: "Internal Marketing Link", value: "int_mark_link" },
{ title: "Other Internal Link", value: "int_other_link" },
],
},
]
Current output (with class):
<a data-mce-href="seznam.cz" href="seznam.cz" class="int_mark_link" data-mce-selected="inline-boundary">
Link example
</a>
Expected output (with style):
<a data-mce-href="seznam.cz" href="seznam.cz" style="color: red;" data-mce-selected="inline-boundary">
Link example
</a>

Magento 2 Add custom video "on the fly" to fotorama when selecting options and make the video auto-plays

I'm trying to add a custom video to the Fotorama slider on the product page when selecting an option.
the code below works but does not play the video when clicking the thumbnail.
galleryData.push({
img: '<img_url>',
thumb: 'thumb_url',
video : '<youtube_video_url>',
type: 'video',
caption: 'Video caption'
});
$('div.product.media').html("");
$('div.product.media').each(function (index, element) {
gallery({
options: {
"nav": "thumbs",
"thumbwidth": 88,
"thumbheight": 110,
"loop": 1,
"arrows": 1,
"navarrows": 1,
"allowfullscreen": 1,
"navtype": "slides",
"navdir": "vertical",
"width": 700,
"height": 560,
"transitionduration": 500
},
data: galleryData,
fullscreen: {
"nav": "thumbs",
"navdir": "vertical",
"navtype": "slides",
"arrows": 1,
"loop": 1,
"transition": "slide",
"transitionduration": 500,
},
"breakpoints": {
"Lesro": {
"conditions": {
"max-width": "767px"
},
"options": {}
}
}
}, element);
});
Thanks a lot!

TinyMCE 5 & Media plugin: Remove (hide) "Embed" tab (section) without affecting other components/controls

I'm using TinyMCE 5 and Media plugin with the following configuration:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function (blobInfo, success, failure) {
setTimeout(function () {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
});
Is there any way to remove (disable, hide) the "Embed" tab (section) without affecting other components/controls?
I've checked the documentation for Media plugin but there's nothing about that...
Also, applying this CSS:
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
hides the "Embed" tab on media-dialog, but it also hides tabs on other dialogs. For example, it would also hide the "Upload" tab on dialog for image.
FIDDLE: http://fiddle.tinymce.com/cwhaab
On Github there is a "feature-request" for this: https://github.com/tinymce/tinymce/issues/6082 ... but I'm looking for a workaround (until this new feature/option becomes available).
I'm using TinyMCE 5.4.2
REALLY BAD CODE ALERT!
Unfortunately there isn't any clean way to configure editor to make it work as you want. That being said, really bad approach would be to filter tab by going through the tab list after media command is executed and hiding any tab which contains text Embed.
Take a look at this playground demo:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function(blobInfo, success, failure) {
setTimeout(function() {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
setup: function(editor) {
editor.on('ExecCommand', (event) => {
const command = event.command;
if (command === 'mceMedia') {
const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
tabElems.forEach(tabElem => {
if (tabElem.innerText === 'Embed') {
tabElem.style.display = 'none';
}
});
}
});
}
});
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Just use CSS to hide the second element;
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
In the real version, you should put the control inside a div and target that with the selector as well so as not to effect all tinymce controls
Edit:
By putting a selector I mean do the following
<style>
.onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<div class="onlyEffectMe">
<textarea name="content"></textarea>
</div>
</form>

sap.ui.table.TreeTable: Set Certain Check Boxes Invisible

I am having trouble to find a way to remove or set the visibility to false for the checkbox of specific rows from a sap.ui.table.TreeTable.
For example, for the table below, I would like to disable or remove the checkbox for subitem1-1, subitem1-2, and subitem2-1.
Please refer to the following for code sample:
sap.ui.getCore().attachInit(function() {
sap.ui.require([
"sap/ui/table/TreeTable",
"sap/ui/table/Column",
"sap/ui/model/json/JSONModel"
], function(TreeTable, Column, JSONModel) {
const treeTable = new TreeTable({
columns: [
new Column({
label: "Name",
template: "name",
}),
],
selectionMode: "MultiToggle",
enableSelectAll: true,
});
treeTable.setModel(new JSONModel({
root: {
name: "root",
description: "root description",
checked: true,
0: {
name: "item1",
description: "item1 description",
checked: true,
0: {
name: "subitem1-1",
description: "subitem1-1 description",
checked: true,
},
1: {
name: "subitem1-2",
description: "subitem1-2 description",
checked: true,
},
},
1: {
name: "item2",
description: "item2 description",
checked: true,
0: {
name: "subitem2-1",
description: "subitem2-1 description",
checked: true,
},
},
},
})).bindRows("/root").placeAt("content");
});
});
<script id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-libs="sap.m, sap.ui.table, sap.ui.unified"
data-sap-ui-xx-async="true"
data-sap.ui-xx-waitForTheme="true"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Any help or suggestions are really appreciated!

Dojo Chart to PDF conversion in IE11

PDF Outputs
I am new to DOJO charts and in one of the requirement, we have to convert Dojo Chart to PDF.
To achieve this we have used "JSPDF" and "html2canvas" libraries.
It is working fine in Google Chrome and not in IE11.
Kindly suggest.
Regards,
Byreddy
Here is my code....
PDF Test
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 600px; height: 400px; background-color:white;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:true, async:true"></script>
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend", "dojox/gfx/utils",
],
function (Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend, Utils) {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap: 6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle: "inside",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{ "value": 1, "text": "A" }, { "value": 2, "text": "B" }, { "value": 3, "text": "C" }, { "value": 4, "text": "D" }, { "value": 5, "text": "E" }, { "value": 6, "text": "F" }]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280],
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF",
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 0, 800, 300, 300], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
//proxy: "https://html2canvas.appspot.com/query",
//useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg");
pdf.addImage(canvas, 'JPEG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/62d219a0fac54b94cd4f230e7bfc55aa3f8dcfa4/FileSaver.js"></script>
<script src="JSRefs/html2canvas_0.5.0-alpha1.js"></script>
Here is the working sample, make a note of the listed important things in the code, which made the difference.
gfxRenderer: "canvas"
htmlLabels: false,
Below is the working code along with Tooltip functionality.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<script>
dojoConfig = {
parseOnLoad: true, // enables declarative chart creation
gfxRenderer: "canvas" // canvas is first priority
};
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="html2canvas.js"></script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
pdf.addImage(img, 'PNG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/gfx/utils",
"dojo/ready",
"dojo/domReady!"
], function (
Chart,
Lines,
Default,
StackedColumns,
Tooltip,
SelectableLegend,
Utils,
ready
) {
var chart1 = new Chart("chart1");
chart1.htmlLabels = false;
chart1.title = "Stacked Chart";
chart1.addPlot("stackedColumnsPlot", {
htmlLabels: false,
type: StackedColumns,
gap: 5,
lines: true,
areas: true,
markers: true,
labels: true,
labelOffset: -10,
labelStyle: "default",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" },
{ "value": 4, "text": "D" },
{ "value": 5, "text": "E" },
{ "value": 6, "text": "F" }
]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
// console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
</head>
<body class="claro">
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
</body>
</html>