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>
Related
I have been able to implement multiple language support in Flutter using the developer docs (https://flutter.dev/docs/development/accessibility-and-localization/internationalization)
I was wondering if there is a way to access the language strings we define within a widget but by not changing the locale of the context.
Here is my use case.
I am presenting a set of books as a grid of cards. The content is of different languages (e.g. English and Spanish). Now, based on the language I would like to use some of the text strings from the locale just for one card of the grid.
For example, if the data of each book is: language (en, es), title (...), no_pages (x). Then, when presenting the grid I would like to use the word "pages" from the string either as "Pages" or "Pagina".
How does one go about it? Thanks
Take a look at the language_builder package in pub.dev It is very easy to use. By wrapping your root widget with LanguageBuilder you can configure your app's language. Tell your app to use the phones' language or change it manually from the app.
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Language Builder Example',
home: LanguageBuilder(
useDeviceLanguage: false,
defaultLanguage: 'en',
languagesMap: Languages.languages,
child: MainPage(),
//splash: Container(),
),
),
);
}
class Languages {
static Map<String, String> languages = {
"tr": """{
"main_page": {
"title": "Ana Sayfa",
"second_page": "İkinci Sayfa"
},
"second_page": {
"title": "İkinci Sayfa",
"main_page": "Ana Sayfa",
"message":"Bu sayfa 2. sayfadır."
}
}""",
"en": """{
"main_page": {
"title": "Main Page",
"second_page": "Second Page"
},
"second_page": {
"title": "Second Page",
"main_page": "Main Page",
"message":"This is 2nd page."
}
}""",
"de": """{
"main_page": {
"title": "Hauptseite",
"second_page": "Zweite Seite"
},
"second_page": {
"title": "Zweite Seite",
"main_page": "Hauptseite",
"message":"Dies ist die 2. Seite."
}
}"""
};
}
//MainPage
Scaffold(
appBar: AppBar(
title: Text(
LanguageBuilder.texts['main_page']['title'],
),
),
),
You can configure the example above for your case. For more info take a look at language_builder:
language_builder
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"
});
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>
I try to implement button in basic card i got an error
API Version 2: Failed to parse JSON response string with 'INVALID_ARGUMENT' error: "(expected_inputs[0].input_prompt.rich_initial_prompt.items[1].basic_card.buttons[0].open_url_action) versions: Cannot find field." HTTP Status Code: 200.
conv.ask(new BasicCard({
text: `This is a basic card. Text in a basic card can include "quotes" and`,
subtitle: 'This is a subtitle',
buttons: [
{
"title": "Call",
"openUrlAction": {
"url": "tel:+91123456789",
"androidApp": {
"packageName": "com.android.phone"
},
"versions": []
}
},
],
"formattedText": "Some text",
image: new Image({
url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
alt: 'Image alternate text',
}),
"title": "Card Title"
}));
and I tried all the ways add another empty object in button array also same error:
buttons: [
{
"title": "Call",
"openUrlAction": {
"url": "tel:+91123456789",
"androidApp": {
"packageName": "com.android.phone"
},
"versions": []
}
},
{}
],
Tried code below got error:
expected_inputs[0].input_prompt.rich_initial_prompt.items[1].basic_card.buttons[0].open_url_action: the protocol must be http or https.
buttons: new Button({
"title": "button text",
'url': "tel:+91123456789",
"androidApp": {
"packageName": "com.android.phone"
}
})
got response in action console simulator:
"buttons": [
{
"title": "button text",
"openUrlAction": {
"url": "tel:+919177723773"
}
}
]
You cannot open a tel: URL through the Assistant.
As the error noted:
expected_inputs[0].input_prompt.rich_initial_prompt.items[1].basic_card.buttons[0].open_url_action: the protocol must be http or https.
Keep in mind that the Assistant runs on devices that do not support tel: URLs, even if they support https: URLs.
The URL property that you are using includes a phonenumber. The link property can only use links to a webpage. This also comes back in the error message that you are getting:
"the protocol must be http or https.".
So if you want to fix the error, you need to include a http or https link in your button instead of a phonenumber.
As for calling a phonenumber from the Google Assistant App, I'm not sure if this feature is supported at the moment.
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!