CKEDITOR And Styles configuration with only toolbar - styles

I try to configure CKEDITOR in Oracle Framework "Endeca v 11.1.0" but something is wrong.
I can only configure toobar like this :
[
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
{ name: 'others', items: [ '-' ] },
{ name: 'about', items: [ 'About' ] }
];
and i cannot configure styles like i want.
By default i have sur styles of ckeditor and it is normal. i have not set a good style.js with good configuration.
I want to configure specific style and i have read somes documentation like this : http://docs.ckeditor.com/#!/guide/dev_styles
but how can i do that in my configuration :
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' } }
]);
How can i set specific style in toolbar configuration only ??
Thx for help

I'm going to give advice that you might not find helpful :) Instead of creating a custom editor for use within Experience Manager (and then having to maintain that during upgrades, etc), it might be better instead to give them an editor UI completely separate from XM. Then, when they have their nice HTML to copy and paste it into XM.
Another idea: Instead of creating a Flex editor directly (like what you're doing), create a light-weight Flex editor that launches a popup window (where that would be a webapp hosted outside of XM directly). Then have that popup window return a block of HMTL as text. This would allow you to create a fancy editor but not be constrained by Flex.
I can't share a full code example for my second recommendation, but in Flex you can open a popup windoww by doing:
ExternalInterface.call("window.open",
popupUrl, "Select Value",
"menubar=1,resizeable=1,width=1000,height=800,location=yes,menubar=yes,scrollbars=1,toolbar=1");
... where popupUrl would be the URL of your exteranl web app.
Then, in the webapp, when you want to pass back a value, you can do:
windowOpener = window.opener.document.xmgrSwfElement;
windowOpener.selectValue(path);
window.close();

In 11.1, configuration file location of CK Editor has been changed. It is moved inside a .jar. Check ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup\25\richTextEditor-11.1.0.jar file for build-config.js

Thx for your answer.
My action :
extract war file "ifcr-11.1.0.war" in
"/ToolsAndFrameworks/11.1.0/server/webapps/ifcr-11.1.0.war"
extract "richTextEditor-11.1.0.jar" in "icfr-11.1.0/WEB-INF/resources/bundles/25"
make modification on file "richTextEditor-11.1.0/content/ckeditor_4.3.3_full/ckeditor/style.js" for my specific style.
I have open build-config.js but i can't see config for styles.
i have rebuild package richTextEditor-11.1.0.jar and ifcr-11.1.0.war and restart tomcat and i can't see modification on ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup\25\richTextEditor-11.1.0.jar.
i have try to delete all files and folder on ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup* and restart tomcat for deploying artifact and other but my folder "ToolsAndFrameworks\11.1.0\server\workspace\state\sling_ifcr-11.1.0\startup\" is empty.
A crazy thing is my webapp run with succes without this folder and files.
are there a cache or other ?

Related

Meta data keeps showing as "## Build Setup" for every page in Vuejs/Nuxt?

I've added individual meta to every page following the Nuxt documentation but whenever I share my links on social media, the meta just show this '## build setup'. Another issue is the same metadata is showing for every page. I read you need to put "hids" to have individual page meta but nothing seems to be working?
Index Meta:
<script>
export default {
head: {
title: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing',
meta: [
{ property: 'og:description', hid: 'og:description', name: 'og:description', content: 'Vote monthly in Animal Crossing Tier Lists for New Horizons & Pocket Camp! Including Villager Tier Lists, Sanrio, Gyroids & more at Animal Crossing Portal!' },
{ name: 'twitter:title', hid: 'twitter:title', content: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing' },
{ name: 'twitter:description', hid: 'twitter:description', content: 'Vote monthly in Animal Crossing Tier Lists for New Horizons & Pocket Camp! Including Villager Tier Lists, Sanrio, Gyroids & more at Animal Crossing Portal!' },
{ name: 'twitter:card', hid: 'twitter:card', content: 'summary_large_image' },
{ name: 'twitter:image:src', hid: 'twitter:image:src', content: 'https://www.animalcrossingportal.com/images/meta.jpg' },
{ property: 'og:title', hid: 'og:title', name: 'og:title', content: 'Animal Crossing Portal | The Best Tier Lists for Animal Crossing' },
{ property: 'og:type', hid: 'og:type', content: 'website' },
{ property: 'og:site_name', hid: 'og:site_name', content: 'Animal Crossing Portal' },
{ property: 'og:url', hid: 'og:url', content: 'https://www.animalcrossingportal.com/' },
{ property: 'og:image', hid: 'og:image', content: 'https://www.animalcrossingportal.com/images/meta.jpg' }
],
link: [
{
rel: 'canonical',
href: 'https://www.animalcrossingportal.com/'
}
]
}
}
</script>
My nuxt.config.js file has:
head: {
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
}
The meta was actually lying inside of a README.md file, removing it from there fixed OP's issue!
I thought it was the readme file, but after a few hours of digging (issue resurfaced), turns out it was actually an empty build tag in the nuxt config file which was making Nuxt try SSR. Removing the empty tag 100% fixed it.
I was running into the same issue recently. After having a look into the source code view of the rendered page (Ctrl + U in the browser), a quick search yielded that the meta-field og:description was not populated correctly. Correction of that was straightforward.
Thus, a look on your rendered page source code might reveal the missing/wrongly populated field (e.g. "description").

How to configure CKEditor to display centered pasted image?

I currently have a Classic themed editor configured in my angular app and my problem is that while pasting the image on the admin-side works fine as well as its positioning, it displays differently once it is retrieved on my client-side of the app. Moreover, larger images ignore the editor's container. Are there specific configurations for these?
As of now, these are my configurations configured in my angular component's HTML files.
<ckeditor [editor]="Editor" data="" (change)="change($event)"
[config]="{
toolbar:
[ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'undo', 'redo' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title:'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title:'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title:'Heading 3', class: 'ck-heading_heading3' }
]
}
}">
</ckeditor>

Android Management API - Single App in Kiosk Mode - How to hide status and navigation bar?

What I would like to achieve?
For internal purposes only / within our enterprise only, I would like to have Android tablets, which run only one single app (made with Ionic/Angular) which even appears after restarting the tablet and the user is not able to leave it.
I think the technical description of what I would like to achieve is called a dedicated devices (formerly called corporate-owned single-use, or COSU).
How would I like to achieve it?
I would like to achieve this with Android Management API, which looks like a great choice for a MDM (Mobile Device Management) solution.
Here Google shows how to achieve this with an Android Management API policy.
The Problem?
I am not able to get rid of the status and navigation bar.
For testing purposes I tried to achieve this with the regular YouTube app. With "statusBarDisabled": true, I was able to disable the status bar, so the user can not interact with it, but it is still visible.
And same goes for the navigation bar with
"persistentPreferredActivities":[
{
"receiverActivity":"com.google.android.youtube",
"actions":[
"android.intent.action.MAIN"
],
"categories":[
"android.intent.category.HOME",
"android.intent.category.DEFAULT"
]
}
]
I was able to hide the home and recents buttons, but the back button is still there and the whole navigation bar is visible.
The following image visualises the problem:
Anyone an idea how I can get rid of the status and navigation bar completely?
This is how my whole policy looks like:
import json
policy_name = enterprise_name + '/policies/policy1'
policy_json = '''
{
"safeBootDisabled": true,
"statusBarDisabled": true,
"keyguardDisabled": true,
"screenCaptureDisabled": true,
"factoryResetDisabled": true,
"cameraDisabled": true,
"blockApplicationsEnabled": true,
"systemUpdate": {
"type": "WINDOWED",
"startMinutes": 120,
"endMinutes": 240
},
"policyEnforcementRules": [{
"settingName": "persistentPreferredActivities",
"blockAction": {
"blockAfterDays": 0
},
"wipeAction": {
"wipeAfterDays": 3,
"preserveFrp": true
}
}],
"applications": [
{
"packageName": "com.google.android.youtube",
"installType": "FORCE_INSTALLED",
"lockTaskAllowed": true,
"defaultPermissionPolicy": "GRANT"
}
],
"persistentPreferredActivities": [
{
"receiverActivity": "com.google.android.youtube",
"actions": [
"android.intent.action.MAIN"
],
"categories": [
"android.intent.category.HOME",
"android.intent.category.DEFAULT"
]
}
]
}
'''
androidmanagement.enterprises().policies().patch(
name=policy_name,
body=json.loads(policy_json)
).execute()
The two bars you've highlight are actually part of the youtube app NOT part of the android OS/UI. So you can't hide those using the device management API.

Sencha Architect View Disappearing after first setActiveItem

Here is the problem. I have a view
Ext.define('Journal.view.CreateGoal', {
extend: 'Ext.form.Panel',
It is part of main
Ext.define('Journal.view.Main', {
extend: 'Ext.Container',
requires: [
'Journal.view.GoalList',
'Journal.view.CreateToDo',
'Journal.view.Choice',
'Journal.view.CreateGoal'
],
config: {
layout: {
type: 'card'
},
items: [
{
xtype: 'GoalList'
},
{
xtype: 'createtodo'
},
{
xtype: 'choice'
},
{
xtype: 'creategoal'
}
]
}
});
I have a button in GoalList that fires
var createGoalForm= Ext.create('Journal.view.CreateGoal');
console.log('create goal view');
Ext.Viewport.setActiveItem(createGoalForm);
The first time I press that button, everything is fine.
If I have used a back button that triggers either of these
Ext.Viewport.setActiveItem(0);
or
Ext.Viewport.setActiveItem(Journal.view.GoalList);
The next time I press the button I do not see the contents of createGoalForm
The console.log still fires, so it's getting into the function.
I tried several methods such as
Ext.Viewport.setActiveItem(Journal.view.CreateGoal);
and a few others. Each version I have tried, the first time I go to the view its fine, every other time its blank.
I have changed the autoDestroy setting to no avail.
So what am I doing wrong?
Thanks

ExtJS: How to force tabbed FormPanel fill all available space?

I want to make a tabbed formPanel fitting user's screen.
here's my code:
var form2 = new Ext.FormPanel({
labelWidth: 75,
border:false,
items: {
// removing next line affects the layout %)
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[
{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name'
}
]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Home'
}
]
}
]
}
});
form2.render('container');
And later in my a have an , of course.
That makes a form with incredibly big width...
If I revome line with "xtype: 'tabpanel'" everything works fine (except there's no tabbed panel on screen)
Is it a bug or I forgot something. Help me figure it out, please=)
Thanks for your attention.
Set anchor and set layout : fit configs for formpanel.

Resources