Given TinyMCE config fragment
style_formats: [
{ title: 'Headings', items: [
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Heading 4', format: 'h4' },
{ title: 'Heading 5', format: 'h5' },
{ title: 'Heading 6', format: 'h6' }
]},
{ title: 'Blocks', items: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Blockquote', format: 'blockquote' },
{ title: 'Div', format: 'div' },
{ title: 'Pre', format: 'pre' }
]},
],
Does TinyMCE (version 5 or 6) allow somehow defining that when user is currently using "Heading 2" style and he or she presses Enter key, the next style would be "Blockquote"?
Logically it could be something like
{ title: 'Heading 2', format: 'h2', next_style_after_enter: 'Blockquote' },
but obviously this specific syntax is not the correct one because I don't know the correct syntax. Obviously using the label for linking different styles is not optimal either, so better id would be needed, too.
Related
I added two classes by table_class_list, but every time I create a table I have to open the advanced settings, choose the class, and save. Without that it doesn't use any class and is unformatted.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_class_list: [
{ title: 'None', value: '' },
{ title: 'No Borders', value: 'table_no_borders' },
{ title: 'Red borders', value: 'table_red_borders' },
{ title: 'Blue borders', value: 'table_blue_borders' },
{ title: 'Green borders', value: 'table_green_borders' }
]
});
I want the first class to always be selected by default, without me having to open the settings and hit save.
If not, I want to use more than two cards. If not, I want to know how to use List (list code example).
Absolutely not Dialogflow code! I need the ActionsOnGoogle code.
const functions = require('firebase-functions');
const syncRequest = require('sync-request');
const express = require('express');
const {
conversation,
Simple,
Card,
Image,
Button,
List,
Table,
Carousel <-------------------------------(Carousel is not constructor ERROR)
} = require('#assistant/conversation');
const app = conversation({debug:true});
app.handle('callApi', (conv) => {
conv.add(new Card({
title: "hello1",
subtitle: "hi",
text: "blablablablablablablablablablablablablablablablablabla",
image: new Image({
url: "some url",
alt: "Some alternative text",
})
}), new Card({
title: "hello2",
subtitle: "ddddddddd",
text: "testtesttesttesttesttesttesttesttesttesttesttesttesttest",
image: new Image({
url: "some url",
alt: "Some alternative text",
})
}));----------------------------------------------------two Card doesn't it work
});
exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);
Looking for ActionsOnGoogleFulfillment document and example/sample code link.
The Carousel type has been replaced by the Collection type, which does the same thing on most platforms. The name reflects, however, that it may not display as a carousel everywhere, but will still represent a card-like layout.
For Visual Selection Responses such as Lists and Collections, defining the response is done in two parts:
Creating Runtime Type Overrides for a type, and including visual information about each entry
Creating the List or Collection and referencing items in that type to display
You'll create Type Overrides by adding something to the session. So it might look something like this:
conv.session.typeOverrides = [{
name: 'prompt_option',
mode: 'TYPE_REPLACE',
synonym: {
entries: [
{
name: 'ITEM_1',
synonyms: ['Item 1', 'First item'],
display: {
title: 'Item #1',
description: 'Description of Item #1',
image: ASSISTANT_LOGO_IMAGE,
}
},
{
name: 'ITEM_2',
synonyms: ['Item 2', 'Second item'],
display: {
title: 'Item #2',
description: 'Description of Item #2',
image: ASSISTANT_LOGO_IMAGE,
}
},
{
name: 'ITEM_3',
synonyms: ['Item 3', 'Third item'],
display: {
title: 'Item #3',
description: 'Description of Item #3',
image: ASSISTANT_LOGO_IMAGE,
}
},
{
name: 'ITEM_4',
synonyms: ['Item 4', 'Fourth item'],
display: {
title: 'Item #4',
description: 'Description of Item #4',
image: ASSISTANT_LOGO_IMAGE,
}
},
]
}
}];
You would then create and add the Collection object, referencing the keys from the type you are declaring:
conv.add(new Collection({
title: 'Collection Title',
subtitle: 'Collection subtitle',
items: [
{
key: 'ITEM_1'
},
{
key: 'ITEM_2'
},
{
key: 'ITEM_3'
},
{
key: 'ITEM_4'
}
],
}));
});
doing this for a List instead would be similar. The entity type and visual components would be the same, but you'd define the list slightly differently:
conv.add(new List({
title: 'List title',
subtitle: 'List subtitle',
items: [
{
key: 'ITEM_1'
},
{
key: 'ITEM_2'
},
{
key: 'ITEM_3'
},
{
key: 'ITEM_4'
}
],
}));
});
I'm using Bootbox and want to have one of the check boxes pre-selected. For example:
bootbox.prompt({
title: 'What would you like on your pizza?',
inputType: 'checkbox',
inputOptions: [
{
text: 'pepperoni',
value: '1',
},
{
text: 'mushrooms',
value: '2',
},
{
text: 'onions',
value: '3',
}
],
callback: function (result) {
console.log(result);
};
Lets say that I want to have the first item in the array, which is pepperoni, selected as a default. Is it possible to do this using Bootbox? Thanks in advance.
You need to add the value option to prompt.
For a single checked option (https://jsfiddle.net/j7wgncsf/):
bootbox.prompt({
title: 'What would you like on your pizza?',
inputType: 'checkbox',
value: '1', // <----- this
inputOptions: [
{
text: 'pepperoni',
value: '1',
},
{
text: 'mushrooms',
value: '2',
},
{
text: 'onions',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
Or, to have multiple options checked, use an array (https://jsfiddle.net/yasok05p/):
bootbox.prompt({
title: 'What would you like on your pizza?',
inputType: 'checkbox',
value: ['1', '2'],// <----- this
inputOptions: [
{
text: 'pepperoni',
value: '1',
},
{
text: 'mushrooms',
value: '2',
},
{
text: 'onions',
value: '3',
}
],
callback: function (result) {
console.log(result);
}
});
I have this "Format" toolbar button in tinymce, and I just want to know if there's a way to configure it's dropdown list items and how.
For now I have "Headers", "Inline", "Blocks" and "Alignment",
and I want to remove "Blocks".
Thanks in advance :)
Here's a screenshot of what I want to remove:
tinymce dropdown menu item http://imageshack.com/a/img34/2654/wr2h.png
I know this post is old but it appears an answer was never provided. The following will create a custom format menu for the toolbar in TinyMCE 5.0
tinymce.init({
style_formats: [
{ title: 'Headers', items: [
{ title: 'Heading 2', block: 'h2' },
{ title: 'Heading 3', block: 'h3' },
{ title: 'Heading 4', block: 'h4' },
{ title: 'Heading 5', block: 'h5' },
{ title: 'Heading 6', block: 'h6' }
]
},
{ title: 'Blocks', items: [
{ title: 'Paragraph', block: 'p' },
{ title: 'Div', block: 'div' },
{ title: 'Blockquote', block: 'blockquote' },
{ title: 'pre', block: 'pre' }
]
}
]
});
can you try this?
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: '|'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table'},
tools: {title: 'Tools'}
}
});
I am new for sencha touch. I using mvc method. Please see my code below
Main.js
Ext.define('test.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.dataview.NestedList'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'nestedlist',
}
]
}
]
}
});
Nestedlist.js
Ext.define('bluebutton.view.NestedList', {
extend: 'Ext.NestedList',
xtype: 'nestedlist',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
],
config: {
store : { xclass : 'Test.store.data'},
detailContainer: detailContainer,
detailCard: true,
},
});
Test.store.data
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});
model.js
Ext.define('Test.model.data', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
But nested list no able to get the data. I get empty list. Any solution?
If you are providing inline data in store shouldn't it be data attribute instead of root?
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
data: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});