Where did I make mistake it does not show the TinyMCE and Reponsive Filemanager, This is their website:
TinyMCE
Responsive Filemanager
This is my folder structure:
--Home/example/
--public_html
--media
--thumbs
--laravel
--vendor
--filemanager
--filemanager
--dialog.php
--config
--config.php
--resource
--views
--posts
--edit.blade.php
--mail
--www
--etc
TinyMCE config which is in edit.blade.php:
tinymce.init({
.
.
.
image_advtab: true ,
relative_urls:false,
auto_focus: "main_editor",
entity_encoding: 'raw',
paste_auto_cleanup_on_paste : true,
},
external_filemanager_path:"../laravel/vendor/filemanager/filemanager/",
filemanager_title:"Filemanager",
external_plugins: { "filemanager" : "../laravel/vendor/filemanager/filemanager/plugin.min.js"}
});
Config of Responsive Filemanager which is in config.php:
'base_url' => 'http://example.com'
'upload_dir' => '/public_html/media/',
'current_path' => '../../../../public_html/media/',
'thumbs_base_path' => '../../../../public_html/thumbs/',
Thank you.
external_filemanager_path and external_plugins path must be absolute so start with /
and don't touch base_url in config.php
It's not possible because Javascript is a client side script and cannot access outside the Public_html directory.
Related
I am using tincyMce, however I want to limit copy and pasting to only be used within the actual tinyMce component within my webpage. i.e I can copy and paste inside of the tinyMce texteditor however I could not copy its contents to a word document. Is this possible? This is my current config
init={{
plugins: config.plugin,
selector: 'text',
menubar: config.menubar,
toolbar: config.toolbar,
statusbar: false,
skin: false,
branding: false,
paste_data_images: false,
paste_block_drop: false,
paste_postprocess: (editor, args) => {
[...args.node.getElementsByTagName('img')].forEach((image) => image.remove());
},
}}
Hello I'm creating website on Nuxt and i have created a new app on Nuxt 3. But I have an probleme for the deployement, there is no 'normal' build for 'normal server' as Nuxt 2.x.
I'm using 'Lamdba' preset.
https://v3.nuxtjs.org/docs/deployment/presets/lambda
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt3'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
// Global page headers: https://go.nuxtjs.dev/config-head
nitro: {
preset: 'lambda'
},
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'icon', type: 'image/png', href: '/favicon.png' }
],
script: [
{
type: 'text/javascript',
src: '/mana.js',
}
]
},
})
And on Nuxt 2.x I used this :
// nuxt.config.js
export default {
// Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
ssr: false,
// Target: https://go.nuxtjs.dev/config-target
target: 'static'
}
What configuration i should to use on Nuxt 3 to have 'normal' export with an index.html file at the root for all server ?
Please use generate script like yarn generate this will create the .output/public and output will depend on ssr: boolean property in nuxt.config.ts.
if ssr is true which is by default, then there will be individual html for each dynamic route and that means dynamic routes are rendered at build time and whenever there is change in data or number of dynamic routes then you will need to run this command again.
if ssr is false then rendering will be done at client side, like SPA app and dynamic routes will have only one file that will do client side rendering and data will be fetched at client side that way site will show latest data.
Check static-hosting
Static deployment is not currently available for Nuxt 3
Besides adding target: 'static' in your nuxt.config.ts
export default defineNuxtConfig({
target: 'static' // default is 'server'
})
You also need to update your build script to be nuxi generate in your package.json (which was nuxi build originally)
{
"scripts": {
"build": "nuxi generate"
}
}
References: https://v3.nuxtjs.org/bridge/overview#static-target
I managed to deploy my nuxt3 project static to gh-pages. I had to overcome two obstacles.
yarn generate did not generate static routes until I explicitly forced it by setting
generate: {routes: ['/','all','my','other','routes']} ....
in nuxt.config.js as target:"static" did not work for me.
gh-pages need an empty .nojekyll file which seems currently not being generated by nuxt generate nor gh-pages. I entered the following into my package.json:
"deploy": "touch .output/.nojekyll && gh-pages --dotfiles -d .output"
This seems ugly but works for me.
I feel like I must be missing something really simple here, but for all my searching and going over the docs, I just cannot find a solution to this problem.
I have an inherited file structure (which at the moment cannot change) that looks like this:
- Folder 1
-Web Files Folder
- Folder 2 (root)
- .eslintrc.js
Folder 1 and 2 are siblings of one another, my main set of js, jsx, ts and tsx are set up in the Web Files Folder, and my eslint and webpack configs, package.json and entry point files are all in Folder 2.
I cannot seem to get the IDE (in this case VS Code) to effectively lint the files within the Web Files Folder. I have tried a whole host of things, the latest of which was trying to use overrides in my .eslintrc.js file to point to the relevant directory:
module.exports = {
env: {
browser: true,
es6: true,
jest: true,
jquery: true,
node: true
},
extends: [
'eslint:recommended',
'eslint-config-prettier',
'plugin:#typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:jsx-a11y/recommended',
'prettier',
'prettier/#typescript-eslint'
],
parser: '#typescript-eslint/parser',
parserOptions: {
jsx: true,
ecmaVersion: 2020
},
plugins: ['#typescript-eslint', 'react', 'prettier', 'jsx-a11y', 'jest'],
root: true,
rules: {
'array-callback-return': 0,
'consistent-return': 0,
...
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
},
react: {
version: 'detect'
}
}
overrides: [
{
files: ['../Folder 1/Web Files Folder/*.js', '../Folder 1/Web Files Folder/*.jsx', '../Folder 1/Web Files Folder/*.ts', '../Folder 1/Web Files Folder/*.tsx']
},
]
};
This results in the error in the Eslint console: Invalid override pattern (expected relative path not containing '..')
However nothing I have tried works. I am not worried about the linting in the build, only getting the errors to appear in the IDE and resolve on save (which works perfectly if I place the files within Folder 2)
I am looking for a solution which I can use in my eslintrc.js file rather than any changes to settings in the IDE if possible. Something like
project: ['./**/*', '../Folder 1/Web Files Folder/**/*']
I am trying to set up a website with Svelte for the frontEnd and Sails for the backend.
My problem is that I can't display my Svelte public build as my Sails default web page.
I want to keep the organization below (or maybe something similar) and have my Svelte public build page when I go on 'http://myserver:1337' instead of having the default Sails page : file organization
PS: I am using Node: v14.4.0, Sails: v1.2.4 and Svelte: v6.14.5.
Thank you all :)
You could try something like:
Compile Svelt to build into the /public directory on Sails.js.
Open your rollup.config.js and change the path of your public/build/bundle.js and public/build.bundle.css to the public sails path, i.e. "../server/public...".
Configure /task/pipeline.js to include the compiled js and css files:
// tasks/pipeline.js
var cssFilesToInject = [
'css/**/global.css',
'css/**/bundle.css',
'css/**/*.css',
];
var jsFilesToInject = [
'js/**/bundle.js',
'js/**/*.js'
];
Create a controller to load the index file:
// router.js
'/*': { action: 'index', skipAssets: true, skipRegex: /^\/api\/.*$/ },
The excluded "/api" routes is to allow you to configure the CRUD routes.
The index controller:
module.exports = {
friendlyName: 'View homepage',
description: 'Display a compiled index page',
exits: {
success: {
statusCode: 200,
viewTemplatePath: 'pages/index'
},
},
fn: async function () {
return {};
}
};
And the index page you could include the template index.html or create your own index.ejs to load the static content, the same you configured before:
// views/templates/template.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<!--TEMPLATES-->
<!--TEMPLATES END-->
<%- body %>
<!-- exposeLocalsToBrowser ( ) %>
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
And the index.ejs:
// views/pages/index.ejs
<!-- Nothing here I mean -->
Thank you for your answer it helps me to understand how does it works.
I am sorry but I did not follow your tutorial exactly (because I was not able to understand what I was supposed to do ;) ).
I edit the rollup.config.js as :
import svelte from 'rollup-plugin-svelte';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
const BUILD_PATH = '../server/assets';
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: `${BUILD_PATH}/build/bundle.js`
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write(`${BUILD_PATH}/build/bundle.css`);
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload(BUILD_PATH),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}
And I move my files is the assets as :
file organization
Then I deleted the homepage.ejs in server/views/pages/
And it works :) !
Thank you again for your quick answer
I want to serve a folder app, which is at the same level with assets folder, under the url /app.
It's possible with AppController to serve file according the url, but I want to know whether it is possible to do this like the following with express?
app.use(express.static(__dirname + '/public'));
You can use custom middleware for express in sails by adding it to your config/http.js:
var express = require('express');
module.exports.express = {
customMiddleware: function (app) {
app.use(express.logger());
app.use(express.compress());
app.use('/app', express.static(process.cwd() + '/../client/www/'));
}
};
Off the top of my head, there's two choices:
Create a symlink assets/app pointing to your destination. The resources should be accessible via http://your.host.com/app/* since that's the way Sails serves assets.
There's still Express underneath Sails, you should be able to access it with sails.express.app and do your thing, let's say, from config/bootstrap.js:
var express = require('express');
…
sails.express.app.use(express.static(process.cwd() + '/app'));
I'm using Sails.js v0.12.4. The http.js uses module.exports.http and not module.exports.express I did the following to serve up another folder like the existing /assets folder. In my example to serve up the app folder, replace the 'node_modules/bootstrap/dist' path with /app
In the config/http.js file I added
var express = require('express');
Then in the middleware object I added the express static module. I'm wanting to serve up the bootstrap assets contained in my node_modules folder.
bootstrapAssets: express.static('node_modules/bootstrap/dist'),
Then in the order array, I added the 'bootstrapAssets' in the order I wanted this middleware to run. Here is the full code:
var express = require('express');
module.exports.http = {
middleware: {
passportInit : require('passport').initialize(),
passportSession : require('passport').session(),
bootstrapAssets : express.static('node_modules/bootstrap/dist'),
order: [
'startRequestTimer',
'cookieParser',
'session',
'bootstrapAssets',
'passportInit',
'passportSession',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'$custom',
'router',
'www',
'favicon',
'404',
'500'
],
Now in my HTML I can access the the bootstrap css using the following:
<link rel="stylesheet" href="/css/bootstrap.min.css">
In Sails 1.0 you can modify the file config/routes.js and add this:
var express = require('express')
var serveStatic = require('serve-static')
var os = require('os')
const dir = `${os.homedir()}/foo` // dir = /home/dimas/foo
module.exports.routes = {
'/public/*': serveStatic(dir, {skipAssets: true}), // <-- ADD THIS
'/': {
controller: 'FooController',
action: 'checkLogin'
},
};
Then you have to create the directory structure:
/home/dimas/foo/public
NOTE that the public entry (the route) is INCLUDED in the filesystem path, the files to be served must be placed there!
After that you can access any content by hitting the following URL:
http://localhost:1337/public/foratemer.txt
You can serve your files simple like this:
var express = require('../node_modules/sails/node_modules/express');
module.exports.express = {
middleware: {
custom: true
},
customMiddleware: function (app) {
app.use(express.logger());
app.use(express.compress());
app.use('/api/docs',express.static('assets/swagger-ui/dist/'));
}
};
This is my config/express.js file
You can use this for sails 0.12.3:
Install express to your sail: npm install express --save
After that, modify config/route.js
module.exports.routes = {
...
'/public/*': require('express').static('the-directory-that-contains-public-director')
...
}
This will works. However, it is a bit ugly that you have to create a directory as a parent for your public directory. It is because the static middleware create by express will count the '/public/' prefix in calculating to path to the target files.
Sails v1.0: Serve a file with a . dot folder in sails. Example: https://myWebSite.com/.well-known/test.txt
in the config/http.js file add express.static to serve and then add publicFolder in the order array.
module.exports.http = {
middleware: {
publicFolder: express.static('public/public'),
order: [
'cookieParser',
'session',
'publicFolder'
// 'favicon',
],
}}
Create a public folder and .well-known folder so public/.well-known/test.txt