I'm trying to use the sencha sdk to generate my minified file.
I have my page set up on
http://www.mysite.localhost/ext/jobs/index.html
reading from just index.html is not easily possible. When i enter
sencha create jsb -a http://www.mysite.localhost/ext/jobs/index.html -p app.jsb3
I get the following jsb file.
{
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": []
},
{
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
{
"path": "",
"name": "all-classes.js"
},
{
"path": "",
"name": "app.js"
}
]
}
],
"resources": []
}
ie it's not included all my classes. If i update
"path": "app/",
"name": "app.js"
app-all.js is created correctly. But how can i get the controllers and views. There are a lot of files. Does any one have any example mvc application jsb. My app is base on pandora.
app/app.js
Ext.Loader.setConfig({ enabled: true });
Ext.application({
name: 'Pandora',
models: ['Part', 'Material', 'Job', 'Process', 'Invoice', 'InvoiceDetail', 'PurchaseOrder'],
stores: ['SalesContact', 'Parts', 'Materials', 'Jobs', 'AccountHandlers', 'JobTypes', 'Processs', 'Artwork', 'Varnish', 'VarnishType', 'PrintType', 'ProofRequired', 'InvoiceDetails', 'PurchaseOrders'],
controllers: ['Part', 'Material', 'Job', 'Process', 'Invoice'],
launch: function () {
Ext.QuickTips.init();
var cmp1 = Ext.create('App.view.Jobs', {
renderTo: "form-job"
});
cmp1.show();
}
});
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div id="form-job"></div>
</body>
</html>
Update
We got this working without the need for including everything in Ext.Loader() in app.js. Make sure you pass Ext.Loader() an array with your Viewport class. Still make sure you do the correct uses: and requires:. That way you final output for the jsb3 file contains everything.
I managed to sort this out on my end. I needed to use the Ext.Loader() in my app.js file. The general idea is you need to tell the loader where your source files are. Making sure your class file's are included in the build. Based on your code above for app/app.js.
Ext.Loader.setConfig({ enabled: true });
// SDK builder required source files, use the class names.
Ext.Loader.require(['Pandora.view.Viewport']);
Ext.application({
name: 'Pandora',
models: ['Part', 'Material', 'Job', 'Process', 'Invoice', 'InvoiceDetail', 'PurchaseOrder'],
stores: ['SalesContact', 'Parts', 'Materials', 'Jobs', 'AccountHandlers', 'JobTypes', 'Processs', 'Artwork', 'Varnish', 'VarnishType', 'PrintType', 'ProofRequired', 'InvoiceDetails', 'PurchaseOrders'],
controllers: ['Part', 'Material', 'Job', 'Process', 'Invoice'],
launch: function () {
Ext.QuickTips.init();
var cmp1 = Ext.create('App.view.Jobs', {
renderTo: "form-job"
});
cmp1.show();
}
});
I found that in your view and controller classes make sure if you have stores tied to your view (like a combobox) that you are adding items to the view itself in the initComponent and you use the requires: 'MyApp.store.Users' for the class. Or you will receive strange errors as the view will initialize before the store.
The Ext.Loader.require() must be placed before the Ext.Application. Once you have it all setup with the models and controllers, you'll want to add your views too.
You should be in a good place to create your jsb3 file now, and see that your models, views, and controllers are now part of the process for the build.
Related
Does someone know why this happens? If I run nuxt locally (server) it works fine, but whenever I run yarn generate and load the index.html file in my browser all content between <client-only> tags disappear.
My nuxt config file:
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: true,
// Target: https://go.nuxtjs.dev/config-target
target: 'static',
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'Site name',
htmlAttrs: {
lang: 'nl'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Description
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'preconnect', href: "https://fonts.gstatic.com"},
{ href: 'https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&family=Open+Sans+Condensed:wght#700&display=swap', rel: 'stylesheet'}
],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ["#/assets/css/hamburgers.scss"],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/fontawesome',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
styleResources: {
scss: [
"assets/css/variables.scss",
"assets/css/hamburgers.scss",
]
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
Okay I've got it to work.
Javascript wasn't working properly because the files weren't linked correctly when I open index.html.
Because index.html is in a local folder somewhere on my PC, it searches for the javascript files on the root of the machine (where they don't exist).
I tested this locally on an Apache server with XAMPP and the same problem ocurred when I put the dist content generated by yarn generate in a subfolder so the URL would be localhost/subfolder.
The fix for this specific problem in this context would be to add to nuxt.config.js this:
router: {
base: '/subfolder/'
},
In the end this solution was not neccesary for me because when I were to host this on an actual Apache server and would put the files in the root directory so then the router property isn't needed unless I would put it there in a subfolder.
Earlier related questions from me:
Click events in Nuxt don't work after generating static site
Href and src generated by Nuxt in static site are not properly linked to js files after nuxt generate
I have a use case to migrate a large angularjs application and I want to start by doing this process in a small application first. So for that reason, I've took the tour of heroes angularjs webapp and I started to add angular to it ( by creating a new project with the angular-cli ) and then adding the NgUpgrade module.
The problem that I have now is that the angularjs webapp runs pretty well inside the angular 8 application but the components that belong to angular 8 they are not rendered.
I have the impression that my angular components are not bootstrapped since I've bootsraped manually angularjs but I'm not sure ... when I add explicitly the bootstrap property inside the #NgModules it works only for the angular components but not for angularjs (it makes sense ). So I was thinking maybe I have to upgrade the angularjs components or downgrade the newest angular components but I don't think so.
Here you will find the git repository with the code. Below more information related to my project:
angular version: 8.2.8
angularJS version: 1.6.10
angular-cli: 8.3.6
Project structure
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Common</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<hero-list></hero-list>
</body>
</html>
index.ts ( angularjs root module)
// initialize root module and make it exportable to be able to bootstrap it
// inside angular
export const heroAppModule = angular.module('heroApp', [
'ngMaterial',
'perfect_scrollbar',
'ngJsTree',
'ngTagsInput',
'ui.router',
'heroApp.underscore'
]).config(['$stateProvider', function ($stateProvider) {
var heroState = {
name: 'hero',
url: '/hero',
template: '<hero-list></hero-list>'
};
$stateProvider.state(heroState);
}]);
/** start: REQUIRE ZONE for angularjs
* Add angularjs files since they aren't yet fully ES6 modules
* we use requirejs as module loader
*/
require('./editable-field/editable-field');
require('./hero-detail/hero-detail');
require('./hero-list/hero-list');
require('./underscore/underscore.module');
require('./underscore/underscore.service');
/**
* end: REQUIRE ZONE for angularjs
*/
app.module.ts ( bootstraping angularjs with NgUpgrade )
import * as angular from 'angular';
import { UpgradeModule, setAngularJSGlobal } from '#angular/upgrade/static';
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { heroAppModule } from './../ngjs/index';
import { HelloworldComponent } from './helloworld/helloworld.component';
#NgModule({
declarations: [ HelloworldComponent ],
imports: [
BrowserModule,
UpgradeModule
] // ,
// bootstrap: [HelloworldComponent]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
setAngularJSGlobal(angular);
this.upgrade.bootstrap(document.body, [heroAppModule.name], { strictDi: true });
}
}
main.ts
import 'zone.js/dist/zone'; // Included with Angular CLI.
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/ngx/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
hero list component (angularjs)
declare var angular: angular.IAngularStatic;
(function () {
'use strict';
angular.module('heroApp').component('heroList', {
template: require('html-loader!./hero-list.html'),
controller: HeroListController,
controllerAs: 'vm'
});
HeroListController.$inject = ['$scope', '$element', '$attrs'];
function HeroListController($scope, $element, $attrs) {
var vm = this;
vm.list = [
{
name: 'Superman',
location: 'The sky'
},
{
name: 'Batman',
location: 'Baticueva'
}
];
vm.updateHero = function (hero, prop, value) {
hero[prop] = value;
};
vm.deleteHero = function (hero) {
var idx = vm.list.indexOf(hero);
if (idx >= 0) {
vm.list.splice(idx, 1);
}
};
}
})();
app-root component ( file name: helloworld.component)
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './helloworld.component.html',
styleUrls: ['./helloworld.component.scss']
})
export class HelloworldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
app-root template
<p>helloworld works!</p>
angular.json ( angular-cli file )
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"common": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/common",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets" ],
"styles": [
"bower_components/jstree/dist/themes/default/style.min.css",
"bower_components/ng-tags-input/ng-tags-input.bootstrap.min.css",
"bower_components/utatti-perfect-scrollbar/css/perfect-scrollbar.css",
"bower_components/angular-material/angular-material.css",
"src/styles.scss"
],
"scripts": [
"bower_components/jquery/dist/jquery.js",
"bower_components/angular/angular.js",
"bower_components/angular-material/angular-material.js",
"bower_components/angular-animate/angular-animate.js",
"bower_components/angular-aria/angular-aria.js",
"bower_components/jstree/dist/jstree.js",
"bower_components/ng-js-tree/dist/ngJsTree.js",
"bower_components/ng-tags-input/ng-tags-input.js",
"bower_components/utatti-perfect-scrollbar/dist/perfect-scrollbar.js",
"bower_components/angular-perfect-scrollbar/src/angular-perfect-scrollbar.js",
"node_modules/#uirouter/angularjs/release/angular-ui-router.min.js",
"node_modules/underscore/underscore.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "common:build"
},
"configurations": {
"production": {
"browserTarget": "common:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "common:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "common:serve"
},
"configurations": {
"production": {
"devServerTarget": "common:serve:production"
}
}
}
}
}},
"defaultProject": "common"
}
Result...
Finally I've figured out that the solution that I need will never use both components of each framework side by side at the root of my application. Instead, I've used the following pattern as the angular documentation says:
Once you're running a hybrid app, you can start the gradual process of upgrading code. One of the more common patterns for doing that is to use an Angular component in an AngularJS context. This could be a completely new component or one that was previously AngularJS but has been rewritten for Angular.
So as my old application is written in angularjs this framework will contain always my root application and also will be the wrapper of all my future features. So If someday I decide to write a new component in Angular 8 this component will live inside angularjs and it will be downgraded to be able to make it work.
Isolate your Angular 1 code and Angular 8 code
<body>
<app-root></app-root>
<div ng-controller="MyController">
<hero-list></hero-list>
</div>
</body>
I had a similar issue, even though in my index.html I had this:
<body>
<app-root></app-root>
</body>
I found that with the setup of the Angular docs for ngUpgrade, the top-level component needs to be the one from Angular.js, not the one from Angular:
<body>
<hero-list></hero-list>
</body>
I'm setting up a new AngularJS project (first time for me) and I'm finding it very touchy... Latest issue is getting bower to properly configure things in my index.html file.
If I just hardcode things to the googleapis, it all works just fine (example in the index.html file).
If I setup bower and do a grunt bowerInstall, it adds what look to be the correct lines in my index.html but they don't work at all. I get errors like:
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8081/bower_components/angular/angular.js".
and
Uncaught SyntaxError: Unexpected token < for the angular files.
So far bower has been a royal pain... any ideas what's going wrong here? Thanks!
BTW, the simple app is working as expected and I've gotten some basic karma tests working.
bower.json:
{
"name": "meanjs_book",
"version": "0.1.0",
"homepage": "https://github.com/JESii/xxx",
"authors": [
"Jon Seidel <jseidel#edpci.com>"
],
"description": "Rudimentary app from MeanJS Book",
"main": "server.js",
"moduleType": [
"node"
],
"keywords": [
"MongoDB",
"Express",
"AngularJS",
"Node",
"HighPlans"
],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"spec"
],
"dependencies": {
"angular-route": "~1.3.15",
"angular": "~1.3.15",
"angular-animate": "~1.3.15",
"angular-mocks": "~1.3.15"
}
}
Gruntfile
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
},
bowerInstall: {
target: {
// Point to the files that should be updated when
// you run `grunt bowerInstall`
src: ['public/app/views/index.html'], // index.html support
// Optional:
// ---------
cwd: '',
dependencies: true,
devDependencies: false,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
grunt.loadNpmTasks('grunt-bower-install');
};
index.html:
<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-mocks.js" type="text/javascript" charset="utf-8"></script>
<!-- bower:js -->
<!-- <script src="../../../bower_components/angular/angular.js" type="text/javascript"></script> -->
<!-- <script src="../../../bower_components/angular-route/angular-route.js" type="text/javascript"></script> -->
<!-- <script src="../../../bower_components/angular-animate/angular-animate.js" type="text/javascript"></script> -->
</script> -->
I'm assuming you're getting that error when running grunt serve. The console message you pasted indicates that grunt isn't allowing JS files through. If a particular file type isn't allowed, it's replaced with index.html which is why it was transferred with MIME type HTML. Where did you get that Gruntfile from?
Additionally, I recommend using Yeoman to scaffold a basic Angular app. Check it out here: http://yeoman.io/codelab.html. It's very easy to follow and will make you more comfortable with using tools like Grunt & Bower.
I wonder if this is because we don't have this app structure:
MyApp
/app
/controller
/model
/store
/view
But instead we have this app structure:
MyApp
/app
/feature1
/controller
/model
/store
/view
/feature2
/controller
/model
/store
/view
Here is a sample define:
Ext.define('base.model.Job', {
Here is from app.js
Ext.application({
name: 'AMC',
appFolder: 'app',
requires: [
'base.model.Job',
I'm looking into using Sencha Cmd 4.0.2.67. I generated a skeleton app with generate, created a workspace and a package, and sencha app build runs fine, no errors or warnings.
But when I look in the /workspace/build/production/AMC/ folder, minified app.js has only 19 Ext.define, but my app has at least 250 Ext.define for all my classes.
I thought when I define app.js in my dev environment, dependencies would be resolved, and all mode code would be minified and put in app.js in production.
Here is an example of my app.js in my dev enviroment:
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name: 'AMC',
appFolder: 'app',
requires: [
'atlas.model.Pool',
'atlas.model.Volume',
'base.model.Job',
'atlas.model.Performance',
'atlas.utilities.CommonUtil',
'atlas.utilities.CommonVTypes'
],
views: [
'atlas.view.login.Login'
],
controllers: [
'atlas.wizard.impl.hanode.controller.WizardHaNodeController',
'atlas.wizard.impl.agg.controller.WizardAggController',
'atlas.wizard.impl.disk.controller.WizardDiskController',
'atlas.wizard.impl.mem.controller.WizardMemController',
'atlas.wizard.impl.ads.controller.WizardAdsController',
'atlas.wizard.base.controller.WizardReviewController',
'atlas.wizard.base.controller.WizardWindowController',
'atlas.wizard.base.controller.WizardPanelController',
'atlas.wizard.base.controller.WizardFormTypeTierController',
'atlas.wizard.base.controller.WizardFormTypeOptimizeController',
'atlas.wizard.base.controller.WizardFormTypeInMemoryController',
'atlas.wizard.base.controller.WizardFormTypeMemoryPureController',
'atlas.wizard.base.controller.WizardLookupDataStoreController',
'atlas.wizard.base.controller.WizardLookupImportsController',
'atlas.wizard.base.controller.WizardLookupHostDatastoreController',
'atlas.controller.ha.HaNodeController',
'atlas.controller.portlet.GraphiteController',
'atlas.controller.setting.VcenterController',
'atlas.controller.setting.SettingController',
'atlas.controller.PerspectiveController',
'atlas.controller.cluster.AssignVolumeToClusterController',
'atlas.controller.cluster.AssignPoolToClusterController',
'atlas.controller.login.LoginController',
'atlas.controller.ha.DeleteHAConfigController',
'atlas.controller.ha.CreateHAConfigController',
'atlas.controller.pool.AddAggregatorToPoolController',
'base.controller.HeaderLinkController',
'atlas.wizard.base.controller.WizardOptionsController',
'base.controller.task.TaskListController',
'base.controller.TabPanelController',
'atlas.controller.cloud.CloudGettingStartedController',
'atlas.controller.cloud.CloudOverviewController',
'atlas.controller.aggregator.AggregatorHostListController'
],
models: [
'atlas.model.Pool',
'atlas.model.Volume',
'base.model.Job',
'atlas.model.Performance',
'base.model.Task'
],
stores: [
'atlas.wizard.base.store.WizardHaConfigStore',
'atlas.store.PerformancePoolTypeStore',
'atlas.store.PerformanceVolumeTypeStore',
'atlas.store.PerformanceChartTypeStore',
'atlas.store.TimeRangeStore'
],
init: function()
{
var me = this;
me.setRestWebServiceUrl();
delete Ext.tip.Tip.prototype.minWidth;
// This statement is disabling browser default context menu when right-clicking in ExtJS.
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
},
launch: function()
{
//Ext.create('atlas.view.login.LoginForm');
Ext.create('atlas.view.login.Login');
//Ext.create('atlas.view.Viewport');
},
onAddController : function(index, controller, key)
{
controller.init(this);
},
getPerspective: function()
{
return this.perspective;
},
getPerspectiveId: function()
{
return this.perspectiveId;
},
getPerspectiveController : function()
{
return this.getController('atlas.controller.PerspectiveController');
}
});
I'm using aloha editor on my project but when I try to use a plugin I have always the same problem:
Aloha-Editor Error: The following module failed to load: css!format/css/format.css
Aloha-Editor Error: The following module failed to load: css!image/css/image.css
Aloha-Editor Error: The following module failed to load: css!image/vendor/ui/ui-lightness/jquery-ui-1.8.10.cropnresize.css
I think I'm missing something but I couldn't find which is the real error, here is part of my code.
<head>
<link rel="stylesheet" href="{{ MEDIA_URL }}aloha_editor/aloha/css/aloha.css" id="aloha-style-include" type="text/css">
<script type="text/javascript" src="/media/jquery.js"></script>
<script type="text/javascript" src="/media/script.js"></script>
<script src="/media/aloha_editor/aloha/lib/aloha.js" data-aloha-plugins="common/format,extra/draganddropfiles,common/image,common/link"></script>
</head>
<body>
<script type="text/javascript">
(function(window,document) {
var
$ = window.jQuery,
GENTICS = window.GENTICS,
$body = $('body');
Aloha.settings = {
logLevels: {'error': true, 'warn': true, 'info': true, 'debug': true},
errorhandling : false,
ribbon: false,
"i18n": {
// let the system detect the users language
"acceptLanguage": '<?=$_SERVER['HTTP_ACCEPT_LANGUAGE']?>'
//"acceptLanguage": 'fr,de-de,de;q=0.8,it;q=0.6,en-us;q=0.7,en;q=0.2'
},
"plugins": {
"format": {
// all elements with no specific configuration get this configuration
config : [ 'b', 'i','sub','sup'],
editables : {
// no formatting allowed for title
'#title' : [ ],
// content is a DIV and has class .article so it gets both buttons
'#content' : [ 'b', 'i', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat']
}
},
"dragndropfiles": {
config : { 'drop' : {'max_file_size': '200000',
'upload': {//'uploader_class':GENTICS.Aloha.Uploader, //this is the default
'config': {
'url': '/media/images_dragged/',
'extra_headers':{'Accept':'application/json'},
'additional_params': {"location":""},
'www_encoded': false }}}}
},
"table": {
config: ['table']
},
"image": {
config : { 'img': { 'max_width': '50px',
'max_height': '50px' }},
editables : {
'#title' : {},
}
}
}
};
$body.bind('alohaReady',function(){
$('#content').aloha();
});
})(window, document);
</script>
...
...
</body>
You've some issues in your code... eg. to use .aloha() use Aloha.jQuery not your own jQuery version (it's fine to use your jQuery for other stuff), settings need to be initialized before loading Aloha Editor, there's a new/better way to check for Aloha.ready ...
See here for a working example of your code: https://gist.github.com/1993723
All the best,
Rene
BTW:
you can also use the Aloha Editor forum here: http://getsatisfaction.com/aloha_editor