reference error cannot find variable TinyMCE - air

I am trying to run my tinyMCE.js from localhost
<script type="text/javascript" src="http://localhost/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
I am getting error ReferenceError: Can't find variable: tinyMCE
It works when i try to run tinyMCE.js from
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
where tiny_mce is my root folder that contain tiny_mce.js
I can't figure out why

If you are using npm, try npm install tinymce

Related

Install Bulma in Laravel 9

I already have a project in Laravel 9. I want to convert the UI to use Bulma. I don't want to use the CDN. I've read the documentation about doing it in an older version of Laravel as well as a new install. I want to know how to add Bulma to an existing Laravel 9 application. Note I couldn't find an app.scss file in laravel. So far, I've run the following commands.
npm install bulma --save-dev
Created an app.scss file in the resources folder and added the following.
#import '~bulma/bulma';
However, I get the following error. What am I doing wrong? Unfortunately, there is scant documentation on it.
node_modules/bulma/bulma.sass:1 #charset "utf-8" ^
SyntaxError: Invalid or unexpected token at Object.compileFunction
(node:vm:352:18) at wrapSafe
(node:internal/modules/cjs/loader:1026:15) at Module._compile
(node:internal/modules/cjs/loader:1061:27) at
Object.Module._extensions..js
(node:internal/modules/cjs/loader:1151:10) at Module.load
(node:internal/modules/cjs/loader:975:32) at Function.Module._load
(node:internal/modules/cjs/loader:822:12) at Module.require
(node:internal/modules/cjs/loader:999:19) at require
(node:internal/modules/cjs/helpers:102:18) at Object.
(/home/zeenux/Programming/php/blog/webpack.mix.js:17:9) at
Module._compile (node:internal/modules/cjs/loader:1097:14)
This is how i tried it and it works fine, no issue with bulma
First
npm install bulma
Then in resources/css/app.css
#import 'bulma/css/bulma.min.css';
in blade
<head>
.....
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<button class="button is-primary">
Button
</button>
</body>
Now i have tried your way with sass
in resources/sass/app.scss
//#import '~bulma/bulma';
BOTH WORKS FINE
//#import 'bulma/css/bulma.min.css';
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
//.css('resources/css/app.css', 'public/css')
.sass('resources/sass/app.scss', 'public/css');
So all works fine to me, what you are facing is probably npm version issue
i am using 8.5.3 to install that run this npm install -g npm#8.5.3. Please do keep in mind while playing with npm versions, install only that npm version which is compatable with all of your packages you are using in your project.

Issues with Vue installation

I'm new to Vue, this may seem a basic question but I'm stuck with this problem:
I have installed Vue 3 using npm, according to the documentation:
https://v3.vuejs.org/guide/installation.html#npm
I have included Vue to my html file, like so:
<script src="../node_modules/vue/dist/vue.csj.js"></script>
But I get this error in the console:
vue.cjs.js:3 Uncaught ReferenceError: exports is not defined
at vue.cjs.js:3 (anonymous) # vue.cjs.js:3
I have seen some similar issues and I know it has something to do with browser compatibility and webpack; like the browser does not natively recognise import/export commands but it seems like everything is installed correctly and I don't know how to solve this issue. I couldn't find anything helpful in the documentation.
So my question is
How do I successfully install Vue and include it in my working files?
I don't think you followed that guide correctly. I would recommend you install the Vue CLI, then create your app using the cli:
$ npm install -g #vue/cli - install cli
$ vue create my-app
https://cli.vuejs.org/
However, if you don't want the CLI, I'd recommend a CDN:
<script src="https://unpkg.com/vue#next"></script>
Or you can just copy the contents of the file to your app, maybe vue.js
(https://unpkg.com/vue#next).
And you then on your html <script src="vue.js"></script>
Firstly ,
npm install -g #vue/cli After ,
on commandline run vue ui
and create a project

Stenciljs: How to fix polyfills issue for Edge

I just start using Stenciljs. I have polyfills related question.
Code below works at Chrome but it does not work on on Edge or IE11 browser which are two browsers that I need polyfills.
<script type="module">
import { applyPolyfills, defineCustomElements } from 'https://unpkg.com/<my-component>/loader/index.mjs';
applyPolyfills().then(() => {
defineCustomElements(window);
});
</script>
I am using
"#stencil/core": "^1.0.7"
Does anyone know how to make polyfills work?
Thanks.
Try to use the following command to run the Stenciljs application:
Enabling ES5 builds during development:
npm run dev --es5
For stencil-component-starter, use:
npm start --es5
Enabling full production builds during development:
npm run dev --prod
For stencil-component-starter, use:
npm start --prod
If still not working, add the following tag in the header of the index.html page:
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>

how do i install Vue.js using cli on my local machine using Apache?

I installed node.js, run apache via xampp, and configured my apache server so that I can use www.example.com as my practice server domain on my local machine.
I started my command prompt as admin and typed the following lines but and they all ran successfully:
install vue-cli
$ npm install --global vue-cli
create a new project using the "webpack" template
$ vue init webpack my-project
install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
I followed the cli installation section on https://v2.vuejs.org/v2/guide/installation.html
When I go to my folders, all the vue.js files are installed inside 'my-project', but when I go to my apache server at www.example.com or www.example.com/my-project, a blank page shows. And if I got into my index.html file in the 'my-project' folder and edit it to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>project3</title>
</head>
<body>
<div id="app">sdfsf</div>
<!-- built files will be auto injected -->
</body>
</html>
I just get a blank page with the text sdfsf. What am I doing wrong? why isn't vue.js hello install screen page loading?
When you run:
npm run dev
It starts a Node JS server. The exact command can be found in package.json, and you can see the result by going to http://localhost:8080/.

npm, bwr versus simple download

We use to download folders and files and while on the Visual studio we started to use the nuget. Now when I am working on the angular js, I am seeing bower and npm. I want to ask are the equivalent to download? If it is, what benefits they give us? Or they worked after the download?
For example see the below extract from the website.
via bower:
$ bower install angular-loading-bar
via npm:
$ npm install angular-loading-bar
via CDN:
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>