Print Plugin for Tinymce not working using WAMP - tinymce

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'
});

Related

fontsizeselect parameter not adding button in in tinyMCE

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.

React Testing Library getByRole('heading') how to get node with a specific heading level

I have a h1 tag and I'm trying to get the node using specific heading level but running to the error:
Found multiple elements with the role "heading"
According the documentation this query supposed to return only h1.
here is the example:
import React from "react";
import { render, screen } from "#testing-library/react";
it("Should found only header1", async () => {
render(
<div>
<h1>editable content</h1>
<p>and</p>
<h2>other header</h2>
</div>
);
screen.debug(screen.getByRole("heading", { level: 1 }));
});
and here is the error:
Found multiple elements with the role "heading"
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
<body>
<div>
<div>
<h1>
editable content
</h1>
<p>
and
</p>
<h2>
other header
</h2>
</div>
</div>
</body>
Solved.
The reason is the version of the library. By default create-react-app installing outdated version of #testing-library.
Run CLI command npm outdated and check the versions of dependencies:
Package Current Wanted Latest
#testing-library/jest-dom 4.2.4 4.2.4 5.11.4
#testing-library/react 9.5.0 9.5.0 11.0.2
#testing-library/user-event 7.2.1 7.2.1 12.1.4
To update dependencies open package.json and manually update them to the latest:
...
"dependencies": {
...
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.0.2",
"#testing-library/user-event": "^12.1.4"
...
},
...
Save changes and run CLI command: npm install

SCSS in Svelte not recognized by Visual Studio Code

VSCode does not recognize the scss that I include within a svelte file. It thinks they are css styles and, the first nesting css that it meets, gives me error.
I tried to disable the validation of the css in the settings through but it doesn't seem to have any effect: "css.validate": false,
The svelte application works correctly, either by launching it locally or by compiling the bundle for production (it's not a problem of my code).
It's just a problem with how VSCode controls my styles. For this problem, most of my svelte components seem wrong even if they are not really.
To compile styles like scss I include the attribute type="text/scss" to the tag:
<style type="text/scss">
All errors have code: "css-syntax-error".
I think that the reason is because VS Code doesn't recognize that it's SCSS and not CSS.
I have these extensions for sass in svelte:
SCSS IntelliSense
Beautify css/scss/sass/less
Live SASS Compiler
Svelte plugin 0.9.3
My VSCode settings:
{
"svelte.language-server.runtime": "......",
"scss.lint.important": "warning",
"editor.formatOnPaste": true,
"css.completion.triggerPropertyValueCompletion": false,
"css.completion.completePropertyWithSemicolon": false,
"css.lint.argumentsInColorFunction": "ignore",
"css.lint.hexColorLength": "ignore",
"css.lint.duplicateProperties": "warning",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"workbench.colorTheme": "Material Theme Darker",
"css.validate": false,
"editor.codeActionsOnSave": {},
"git.enableSmartCommit": true,
"css.fileExtensions": [
"css",
"scss"
],
"beautify.options": {
},
}
From the error it seems that the preprocessing of your svelte file failed. You need a svelte.config.js at the root of your project. The Plugin uses this to preprocess files.
If you use this preprocessor plugin for svelte https://github.com/kaisermann/svelte-preprocess , setting it up is as easy as this:
svelte.config.js:
const sveltePreprocess = require("svelte-preprocess");
module.exports = {
preprocess: sveltePreprocess(),
};

How to load Wiris plugin in Tinymce 4

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'

How to deploy the extension of Firebug Lite?

On the Firebug Lite website there is information on how to write an extension for Firebug Lite, but it doesn't say how to deploy that extension.
I read that deploying an extension for Firebug is like installing a plugin in Firefox. Is it gonna be the same for an extension of Firebug Lite?
You should be able to extend Firebug Lite by simply including your script on the page as shown on the Firebug Lite website:
Firebug.extend(function(FBL) { with (FBL) {
// ***********************************************************************
function PluginPanel(){};
PluginPanel.prototype = extend(Firebug.Panel,
{
name: "Plugin",
title: "Plugin",
initialize: function(){
Firebug.Panel.initialize.apply(this, arguments);
this.panelNode.innerHTML = "Hello World!";
}
});
Firebug.registerPanel(PluginPanel);
// ***********************************************************************
}});
To include your extension the code needs to be executed after Firebug Lite is loaded. E.g. this can be done by saving the code above into a file and include it via a <script> tag after including Firebug Lite:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="my-firebug-lite-extension.js"></script>