Here is my code that should add fontsizeselect to the menu:
tinymce.init({
selector: '#mytextarea',
plugins: 'lists',
toolbar:
"fontsizeselect undo redo | styleselect | bold italic | outdent indent | numlist bullist",
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
});
However the fontsizeselect button does not appear.
From this article it gives this command to show all available buttons
tinyMCE.activeEditor.ui.registry.getAll().buttons
However when I run it, the fontsizeselect parameter is not shown: screenshot of console
I created my app by installing from npm with npm install tinymce found here.
I can't figure out what I am missing. Are there other things I need to install? I have tried in FF and Chrome.
EDIT: My code works when I am using the cloud version of TinyMCE, but I want to use the local version.
Related
I use bootstrapVue version 2.21.2 with bootstrap version 5.1.3.
This bootstrapVue version in tag default generates inline radio inputs,
https://bootstrap-vue.org/docs/components/form-radio#inline-or-stacked-radios
But in my project are generated in stacked mode:
<b-col>
<b-form-group label="Con quota sociale" v-slot="{ ariaDescribedby }">
<b-form-radio-group
v-model="filterQuotaSelected"
:aria-describedby="ariaDescribedby"
name="filter-quota">
<b-form-radio value="">ignora</b-form-radio>
<b-form-radio value="N">non in regola</b-form-radio>
<b-form-radio value="S">in regola</b-form-radio>
</b-form-radio-group>
</b-form-group>
</b-col>
browser render
How to render inline? Have any idea?
After few step I resolved question.
It is a problem of plugin version .
BootstrapVue v.2.21.x was designed to interoperate with bootstrap v4.5.3, setting up my project folder, the installer, for default, have downloaded last version 5.x of bootstrap which is incompatible.
Step for resolving...
change file "package.json" substituting "bootstrap": "^5.x" in dependencies object with
"dependencies": {
"bootstrap": "4.5.3",
...
}
in folder project run
npm update
I am using TinyMCE and for some reason the plugin's do not work. I have downloaded the lates version of tinymce and using the following code.
<script src='../tinymce/tinymce.min.js'></script>
<script src='../tinymce/jquery.tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#tinymce',
branding: false,
height: 500,
plugin: "print", //I have also tried ['print'],
toolbar: "print",
});
</script>
I have checked the print plugin is in the plugins directory as well.
I am using WAMP the latest version on their site as well. Could it be a WAMP setting that prevents this?
If I use the following I get the buttons but still not the print one:
<script>
tinymce.init({
selector: '#tinymce',
branding: false,
height: 250,
plugin: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'formatselect | ' +
' bold italic backcolor | alignleft aligncenter ' +
' bullist numlist outdent indent |' +
' removeformat | help pagebreak print',
});
</script>
I believe the issue is that the configuration option to load plugins is plugins not plugin so I don't believe that you are actually loading the plugins you think you are as you are using the wrong key for that option in the configuration.
https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/#pluginconfiguration
From that documentation page here is an example:
tinymce.init({
selector: 'textarea',
plugins : 'advlist link image lists'
});
Is there a way to disable removing space before parentheses when editing a function in VS Code?
Lets say I have a function
function render () {
// some code here
}
When I start editing it, VS Code removes the space before parentheses and transforms this code to:
function render() {
// some code here
}
Is there a way to disable this behavior?
In VS Code open File -> Preferences -> Settings
Add to your JSON config:
"javascript.format.insertSpaceBeforeFunctionParenthesis": true
function render () {
// some code here
}
"javascript.format.insertSpaceBeforeFunctionParenthesis": false
function render() {
// some code here
}
Now you can continue using your auto format option "editor.formatOnType": true
I had opposite problem with anonymous functions. We use prettier extension. Auto-correct inserts a space before parenthesis. And then prettier complains about it.
var anonfunc = function() {
// Expected syntax.
}
var autocorrected = function () {
// Auto-correct inserts a space
}
There is similar code option, which solves my problem:
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
By default it is true. Took me some time, until I was tired correcting auto-correct.
I had a similar issue with VSCode removing spaces after a constructor and ESLint complaining because there wasn't a space.
Go to File -> Preferences -> Settings
Search for constructor
Add a check next to JavaScript › Format: Insert Space After Constructor
I'm on the VSCode team. As of VSCode 1.8, this formatting option is not supported out of the box, but we are tracking the feature: https://github.com/Microsoft/vscode/issues/15386, https://github.com/Microsoft/TypeScript/issues/12234
As a workaround, try the following:
Install the eslint extension: ext install eslint
Add "eslint.autoFixOnSave": true to your workspace or user settings
In the root of your project, create an .eslintrc.json with:
{
...
"rules": {
...
"space-before-function-paren": "error"
}
}
The eslint extension can create a starter .eslintrc.json for you with the create .eslintrc.json command.
This will automatically format functions to have a space after them when you save the file.
In my case, I wanted the normal indenting/formatting behavior of VS Code, so I disabled the eslint warning:
In the .eslintrc.js file I typed inside the rules:
'rules': {
....
//disable rule of space before function parentheses
"space-before-function-paren": 0
}
I found out I had "editor.formatOnType": true setting enabled. This is what makes the editor auto-format the code when you type. Disabling it helped to resolve the issue.
Also adding to Yan's answer, you can just hit the Command + , on Mac or CTRL + , on your keyboard then, add the following lines in your settings.json
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false
The second entry also disables the space for anonymous functions, on format e.g
var anon = function() {
// do something..
}
Go to Preferences, and search for insertSpaceBeforeFunctionParenthesis in the search bar at top.
Now, select the checkbox which says: JavaScript: Format: Insert Space Before Function Parenthesis
Problem:
My issue was in package.json
My project was using prettier#1.18.2 which did not have the space after the function keyword or arrowParens: 'always' as default configuration.
One of the maintainers upgraded prettier to version 2 prettier#2.3.2, which had these two as default config. These were among the breaking changes in prettier version 2.
https://prettier.io/blog/2020/03/21/2.0.0.html#always-add-a-space-after-the-function-keyword-3903
https://prettier.io/blog/2020/03/21/2.0.0.html#change-default-value-for-arrowparens-to-always-7430
Solution:
npm ci - just installed the npm packages again.
npm install will also work. npm ci will install exact versions from package-lock.json, while npm install would install latest versions with minor changes.
In my case I had to explicitly enable ESLint on my Vue.js project even though I had a .eslintrc.js file that should have been implementing:
extends: ['plugin:vue/exxential', '#vue/standard']
To do that I pressed CTRL+Shift+P and searched for "ESLint: Enable ESLint"
I am about using Wiris with Tinymce. Following the tutorial at INSTALLATION INSTRUCTIONS: WIRIS PLUGIN FOR TINYMCE
, I am unable to go over step 4.
Each time I load the plugins tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry, and tiny_mce_wiris_CAS, the Tinymce text editor does no longer appear.
Here is my code sample
<script src="{{asset('assets/js/tinymce/plugins/tiny_mce_wiris/editor_plugin.js')}}"></script>
<script src="{{asset('assets/js/tinymce/tinymce.min.js')}}"></script>
<script>
tinymce.init({
selector: 'textarea',
plugins: "image imagetools tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry tiny_mce_wiris_CAS"
});
</script>
I wish to know the right way to to it.
This is the error I get in my javascript console
"NetworkError: 404 Not Found - .../assets/js/tinymce/plugins/tiny_mce_wiris_formulaEditor/plugin.min.js"
"NetworkError: 404 Not Found - .../assets/js/tinymce/plugins/tiny_mce_wiris_CAS/plugin.min.js"
"NetworkError: 404 Not Found - .../assets/js/tinymce/plugins/tiny_mce_wiris_formulaEditorChemistry/plugin.min.js"
The name of the plugin you need to include in the plugins section on tinymce.init is tiny_mce_wiris. You have included the name of the buttons instead (tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry and tiny_mce_wiris_CAS).
tinymce.init({
selector: 'textarea',
plugins: "image imagetools tiny_mce_wiris"});
Apart from downloading and using TinyMCE plugin , you can even use Wiris as externally hosted plugin.
I followed this documentation http://www.wiris.com/plugins/docs/resources/external-plugin
My component looked like following, and I was able to get Wiris to work this way.
<editor apiKey="test" [init]="{ plugins : 'image', external_plugins: { tiny_mce_wiris: 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' }, toolbar: 'tiny_mce_wiris_formulaEditor' } "></editor>
As stated in answer above you forgot to add this into tinymce.init :
toolbar: 'tiny_mce_wiris_formulaEditor'
I have a Dynamic Web Project in Eclipse and was wondering if there is a way I can create a WAR and in between minify all my js and css files.
Supposing my project file structure is
iscCSM
|
|
infa9
|
|
csm--ACProxy--include--acproxy--js
| | |
| css *.js
| |
| *.css
|
|
|
view--include--js--custom
| | | |
*.html | *.js *.js
*.jsp css
|
*.css
Update
After googling I got this maven plugin Cactus but I am having problem in configuring pom.xml file to use cactus plugin as given in the same tutorial Can somebody help me which pom.xml I need to modify?
I followed the tutorial and reached the stage where string BUILD SUCCESS appears, but m unable to move forward. Please help.
Web Resource Optimizer for Java (wro4j) is what you are looking for
http://code.google.com/p/wro4j/.
It has support for js, css minifcation, with multiple minificators implementations, and also has support for less,sass, and coffeescript processor.
You can use it as:
maven plugin
standalone application
as library in yours web aplication as ServletFilter - which is nice feater to use during development.