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'
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'
});
I am using nuxt.js and with this image lazyload plugin
This works great, but now I want to use some options of the plugin, like a custom loader image.
The code would look like this in my nuxt plugin file:
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
const options = {
preLoad: 1.3,
loading: '~/static/media/loader.svg',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
}
Vue.use(VueLazyload, options)
In the plugins docs there is an example using a path like this:
loading: 'dist/loading.gif',
But I want to see the loading not only after I generated a dist folder, I want to see in locally.
So my question is:
How would I set paths in a Vue plugin file to make them work locally and after nuxt generate?
As an example: in CSS files you can set url('~/static/…PATH')
I have not found anything here:
https://nuxtjs.org/guide/directory-structure/
nor here
https://nuxtjs.org/guide/assets
As #Aldarund correctly proposed
loading: require('~/static/media/loading.svg'),
works perfectly.
Thanks 👍🏼
I'm trying to develop an apache cordova application using Visual studio tools for apache cordova and the facebook connect plugin. With this plugin i'm trying to implement login with facebook.
I installed the plugin from the option custom / plugins, introducing the git repository https://github.com/Wizcorp/phonegap-facebook-plugin
The plugin was successfully installed, the solution compiles correctly.
In the index.html I included the script after platform overrides script:
...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="facebookConnectPlugin.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
..
The first question is that the facebookConnectPlugin.js was not automatically included within the www root folder in the plugin installation, in this case I don't know how to the application find this script, installing camera.js plugin happened the same but i had not problems in the inclusion, it seem the browser found the js. Where must be located facebookConnectPlugin.js? Do we have to include using the plugins folder? ej:
When I debug the project and tried to launch login with the following instructions it doesn't work:
var fbLoginSuccess = function (userData) {
alert("UserInfo: " + JSON.stringify(userData));
}
function initLogin() {
facebookConnectPlugin.login(["public_profile"],
fbLoginSuccess,
function (error) { alert("" + error) }
);
}
The message I found with Ripple -Nexus (galaxy) emulator is:
"I Haz cheeseburger!
FacebookConnectPlugin.login
We seem to be missing some stuff :(
What is kinda cool though you can fill in the textarea to pass a json object to the callback you want to execute"
Summary:
Which is the src to include the facebookConnectPlugin.js?
Why I found an error with the emulator?
Best regards.
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>