I have a yaml-configuration for own classes in the ckeditor:
- { name: "Subline", element: "p", attributes: { class: "subline" } }
- { name: "Intro", element: "p", attributes: { class: "lead" } }
- { name: "Farbwelt-Text", element: "p", attributes: { class: "text-farbwelt" } }
- { name: "small", element: "p", attributes: { class: "small" } }
- { name: "Style: h1", element: "p", attributes: { class: "h1" } }
- { name: "Style: h2", element: "p", attributes: { class: "h2" } }
- { name: "Style: h3", element: "p", attributes: { class: "h3" } }
- { name: "Style: h4", element: "p", attributes: { class: "h4" } }
- { name: "Style: h5", element: "p", attributes: { class: "h5" } }
- { name: "Farbformatierung", element: "p", attributes: { class: "wie-color" } }
- { name: "Farbe: Afrika", element: "p", attributes: { class: "afrika" } }
- { name: "Farbe: Europa", element: "p", attributes: { class: "europa" } }
- { name: "Farbe: Asien", element: "p", attributes: { class: "asien" } }
- { name: "Farbe: Orient", element: "p", attributes: { class: "orient" } }
- { name: "Farbe: Lateinamerika", element: "p", attributes: { class: "lateinamerika" } }
# Inline styles
- { name: "Telefon-Icon", element: "span", attributes: { class: "telefon" } }
- { name: "Button (orange)", element: "a", attributes: { class: "btn btn-wie-default" } }
- { name: "Button (orange) small", element: "a", attributes: { class: "btn btn-wie-default btn-sm" } }
- { name: "Button (orange) small + Pfeil", element: "a", attributes: { class: "btn btn-wie-default btn-sm btn-pfeil" } }
- { name: "Button (grau) small + Outline + Pfeil", element: "a", attributes: { class: "btn btn-sm btn-outline-secondary btn-pfeil" } }
- { name: "E-Mail-Icon", element: "a", attributes: { class: "email" } }
- { name: "Link-Icon", element: "a", attributes: { class: "link" } }
Everything works fine, except these styles:
- { name: "Button (orange)", element: "a", attributes: { class: "btn btn-wie-default" } }
- { name: "Button (orange) small", element: "a", attributes: { class: "btn btn-wie-default btn-sm" } }
- { name: "Button (orange) small + Pfeil", element: "a", attributes: { class: "btn btn-wie-default btn-sm btn-pfeil" } }
- { name: "Button (grau) small + Outline + Pfeil", element: "a", attributes: { class: "btn btn-sm btn-outline-secondary btn-pfeil" } }
In the editor only the first element is shown. If I change the second element like this:
- { name: "Button (orange) small", element: "a", attributes: { class: "btn btn-sm btn-wie-default" } }
Then the first and second entry is shown.
When I shuffle the classes of the other two missing styles too, the third style appears, but not the fourth.
Any ideas, what to do?
It's a bug in ckeditor. The classes need to be in alphabetical order. See https://dev.ckeditor.com/ticket/13206 and https://github.com/ckeditor/ckeditor-dev/issues/2578
Related
I a project I work on we need to restrict users with predefined styles that can be changed by the user.
In my jsFiddle the function setStyle() works. You can try out by uncommentting the setStyle([]). It seems to me that I can use the config.stylesSet = assignment only once.
The function to change the style does not work after a button click nor after setTimeout.
Is there any way to set styles via a script in CKE4 more than once?
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
CKEDITOR.stylesSet.add( 'my_styles2', [
// Block-level styles
{ name: 'Default Title', element: 'h2', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
] );
var ckeditor = CKEDITOR.inline('editor1', {
removePlugins: 'exportpdf,sourcearea',
fillEmptyBlocks : false,
});
// setStyle([])
setTimeout(() => {
console. log("resetting styles")
setStyle([])
}, 5000);
function setStyle(style){
// ckeditor.config.stylesSet = style
CKEDITOR.config.stylesSet = style
// console.log(ckeditor)
console.log(style)
}
I am using b-table (Bootstrap-vue) with API Laravel.
This is the vue code:
<TableCli
:items="items"
:fields="fields"
:rows="rows"
:perPage="perPage">
</TableCli>
.
data: function () {
return {
mode: "save",
item: {},
items: [],
paises: [{}],
checked: 1,
page: 1,
perPage: 10,
fields: [
{ key: "id", label: "Código", sortable: true },
{ key: "name", label: "Name", sortable: true },
{ key: "tva", label: "TVA", sortable: true },
{ key: "country_id", label: "Country", sortable: true},
{ key: "cp", label: "CP", sortable: true },
{ key: "city", label: "City", sortable: true },
{ key: "address", label: "Address", sortable: true },
{
key: "status",
label: "Status",
sortable: true,
formatter: (value) => (value ? "Yes" : "No"),
},
{ key: "actions", label: "Actions" }
],
};
Methods:
methods: {
loadCli() {
const url = `${baseApiUrl}/api/cli`;
axios.get(url).then((res) => {
this.items = res.data;
});
},
loadCountrys() {
const url = `${baseApiUrl}/api/country`;
axios.get(url).then(res => {
this.country = res.data
})
},
My table returns the country id, how do I return the country name?
Another question, how do I add an action button in the Actions column?
The button to edit and delete.
I think this snippet answers your questions. The main idea is using slot for b-table.
new Vue({
el: '#app',
data() {
return {
table_fields: [
{
key: "title",
label: "Title"
},
{
key: "user",
label: "User"
},
{
key: "id",
label: "Detail Button"
}
],
page_contents: [
{
id: "title-id-1",
title: "title 1",
user: {
id: "user-id-1",
name: "name 1",
},
}
]
}
},
methods: {
do_sth(id) {
console.log(id)
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-table-lite striped small hover :items="page_contents" :fields="table_fields">
<template #cell(id)="data">
<b-button size="sm" #click='do_sth(data.value)'>Detail Button</b-button>
</template>
<template #cell(user)="data">
<span> {{ data.value.id }} </span>
<span> || </span>
<span> {{ data.value.name }} </span>
</template>
</b-table-lite>
</div>
I've read a lot of comments about it, but I didn't resolve my problem.
So my navigation code looks like this
export function pushScreens() {
Navigation.setRoot({
root: {
sideMenu: {
id: 'sideMenu',
left: {
visible: true,
component: {
id: 'Drawer',
name: SIDE_DRAWER,
},
},
center: {
bottomTabs: {
children: [{
stack: {
children: [{
component: {
name: HOME_SCREEN,
passProps: {
text: 'Home'
},
}
}],
options: {
bottomTab: {
text: 'Home',
icon: HomeIcon,
testID: 'FIRST_TAB_BAR_BUTTON'
},
}
}
},
{
component: {
name: PROFILE_SCREEN,
passProps: {
text: 'Profile'
},
options: {
bottomTab: {
text: 'Profile',
icon: HomeIcon,
testID: 'SECOND_TAB_BAR_BUTTON'
},
}
}
},
{
component: {
name: POSTS_SCREEN,
passProps: {
text: 'Posts'
},
options: {
bottomTab: {
text: 'Posts',
icon: HomeIcon,
testID: 'SECOND_TAB_BAR_BUTTON'
}
}
}
}]
}
}
}
}
});
}
I can pull the drawer from the left side of the screen by default, but how I could add the icon for that?
On the view that you wish to have the hamburger button, add:
static get options() {
topBar: {
leftButtons: [
{
color: colors.white,
id: TOOLBAR_HUMBERGER_BUTTON_ID,
icon: require("../resources/hamburger_topBar_button.png")
}
]
};
return topBar;
}
and then handle it like every other button of topBar:
navigationButtonPressed({ buttonId }) {
if (buttonId == TOOLBAR_HUMBERGER_BUTTON_ID) {
Navigation.mergeOptions(SIDEMENU_ID, {
sideMenu: {
left: {
visible: true
}
}
});
}
}
I have the problem, that the "fontsize" field is not shown at my own custom configuration.
My YAML File looks like this:
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
config:
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:myext/Resources/Public/css/rte.css"]
format_tags: "p;h1;h2;h3;h4;h5;pre;div"
stylesSet:
# block level styles
- { name: "align-left", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-left' }}
- { name: "align-center", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-center' }}
- { name: "align-right", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-right' }}
- { name: "align-justify", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-justify' }}
- { name: "Interview", element: ['h5', 'p', 'span'], attributes: { 'class': 'ecx-interview' }}
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: "Tiny Paragraph", element: "p", attributes: { 'class': 'p-tiny' }}
# Inline styles
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: "Important", element: "span", attributes: { 'class': 'c-important' }}
- { name: "Tiny Word", element: "span", attributes: { 'class': 'c-tiny' }}
# List styles
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: 'UL Style 2', element: 'ol', attributes: { 'class': 'ul-style2' } }
- { name: 'No UL Bullets', element: 'ul', attributes: { 'class': 'no-bullet' } }
# Link styles
- { name: "External Link", element: "a", attributes: { class: "external-link"} }
- { name: "Arrow-link", element: "a", attributes: { class: "ecx-explore-arrow-link more d-flex align-items-center"} }
# Form styles
- { name: "Table Responsive", element: "table", attributes: { 'class': 'contenttable table-responsive' } }
toolbar:
- [ 'Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
- [ 'NumberedList', 'BulletedList']
- [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ]
- [ 'Undo', 'Redo', 'RemoveFormat', 'ShowBlocks' ]
- "/"
- [ 'Format', 'Styles','Size' ]
- [ 'Bold', 'Italic', 'Underline', 'Blockquote', 'Subscript', 'Superscript']
- [ 'Source', 'Maximize', 'About']
extraPlugins:
- justify
- specialchar
- showblocks
- codesnippet
- font
justifyClasses:
- align-left
- align-center
- align-right
- align-justify
codeSnippet_theme: 'monokai_sublime'
removePlugins:
- image
processing:
allowTags:
- iframe
I've tried to import some other .yaml (full, processing, ... ) Files or to include the official font plugin from ckeditor but nothing work.
I'm using TYPO3 8.7.16.
The configuration looks like this in the backend: TYPO3 Backend custom configuration ckeditor
Thank you!
Using your configuration:
toolbar:
- [ 'Format', 'Styles','FontSize' ]
Instead of
toolbar:
- [ 'Format', 'Styles','Size' ]
See:
CKEditor 4 - how to add font family and font size controls to the toolbar
How could I convert my hash to 2 very different hashes?
My hash:
{ "grey"=> ["421_01.jpg", "421_02.jpg", "421_03.jpg"],
"heather blue"=> ["422_01.jpg", "422_02.jpg", "422_03.jpg"],
"indigo"=> [],
"dark grey"=> ["435_01.jpg", "435_02.jpg", "435_03.jpg"] }
1. Desired hash: (all values from my hash)
[{ src: "421_01.jpg" },
{ src: "421_02.jpg" },
{ src: "421_03.jpg" },
{ src: "422_01.jpg" },
{ src: "422_02.jpg" },
{ src: "422_03.jpg" },
{ src: "435_01.jpg" },
{ src: "435_02.jpg" },
{ src: "435_03.jpg" }]
2. Desired hash:
[{
image: "421_01.jpg, 421_02.jpg, 421_03.jpg",
attributes: [
{
name: "Color",
option: "grey"
}
]
},
{
image: "422_01.jpg, 422_02.jpg, 422_03.jpg",
attributes: [
{
name: "Color",
option: "heather blue"
}
]
},
{
image: "",
attributes: [
{
name: "Color",
option: "indigo"
}
]
},
{
image: "435_01.jpg, 435_02.jpg, 435_03.jpg",
attributes: [
{
name: "Color",
option: "dark grey"
}
]
}]
Please note: empty array in my hash shouldn't add any images to color variation, but should add variation with empty image string. (All shown in examples)
h = { "grey"=> ["421_01.jpg", "421_02.jpg", "421_03.jpg"],
"heather blue"=> ["422_01.jpg", "422_02.jpg", "422_03.jpg"],
"indigo"=> [],
"dark grey"=> ["435_01.jpg", "435_02.jpg", "435_03.jpg"] }
a = h.values
#=> [["421_01.jpg", "421_02.jpg", "421_03.jpg"],
# ["422_01.jpg", "422_02.jpg", "422_03.jpg"],
# [],
# ["435_01.jpg", "435_02.jpg", "435_03.jpg"]]
For #1:
a.flat_map { |s| { src: s } }
#=> [{:src=>"421_01.jpg"}, {:src=>"421_02.jpg"}, {:src=>"421_03.jpg"},
# {:src=>"422_01.jpg"}, {:src=>"422_02.jpg"}, {:src=>"422_03.jpg"},
# {:src=>"435_01.jpg"}, {:src=>"435_02.jpg"}, {:src=>"435_03.jpg"}]
For #2:
h.map { |k,_| { image: a.shift.join(', '),
attributes: [{ name: "Color", option: k }] } }
# => [{:image=>"421_01.jpg, 421_02.jpg, 421_03.jpg",
:attributes=>[{:name=>"Color", :option=>"grey"}]},
{:image=>"422_01.jpg, 422_02.jpg, 422_03.jpg",
:attributes=>[{:name=>"Color", :option=>"heather blue"}]},
{:image=>"", :attributes=>[{:name=>"Color", :option=>"indigo"}]},
{:image=>"435_01.jpg, 435_02.jpg, 435_03.jpg",
:attributes=>[{:name=>"Color", :option=>"dark grey"}]}]