Is there any way to apply css class to whole tinyMCE container without explicit code after load or force it to inherit the classes from element it is applied to?
If you have for example textarea
<textarea id="foo" class="myClass"></textarea>
<script type="text/javascript">
$('textarea.recipe-material').tinymce({
//some property here to force tinyMCE to inherit myClass in container
});
</script>
Use to add the textarea's classes to tinymce container
textarea.tinymce({
setup: function(editor) {
editor.on('init', function(event) {
var class = editor.getElement().className;
editor.getContainer().className += ' ' + class;
});
}
});
The setup init attribute isn't in the documentation but works fine with tinymce 4
Related
I have been trying to use Ag-Grid with Svelte. I understand that the main problem with using this grid library is that it needs to bind to a dom element that may not exist at the time of the code executing. For example:
// lookup the container we want the Grid to use
var eGridDiv = document.querySelector('#myGrid');
In this case, the #myGrid element does not exist yet.
I have tried creating an element and then placing it on the HTML part of the Svelte component, like this.
let eGridDiv = document.createElement("DIV");
let gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(eGridDiv, gridOptions);
And then down on the HTML section
<eGridDiv />
However, the new element does not seem to be initialized by Ag-Grid.
So what is the recommended way to use these types of libraries in Svelte?
If you want to use a DOM node in the script part of your component you can use the bind:this={domNode} element binding to get a reference to it, and then use it after the component has been rendered in onMount.
<script>
import { onMount } from 'svelte';
let domNode;
// ...
onMount(() => {
const gridOptions = { columnDefs: columnDefs, rowData: $orders };
new Grid(domNode, gridOptions);
});
</script>
<div bind:this={domNode} />
I'm trying to use Leaflet-draw in VueJS, after calling it
import LeafletDraw from 'leaflet-draw'
But when I'm trying to use it
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
I only have a partial control's toolbar
Am I missing a CSS file to include ?
If someone is still looking for a solution so inside the vue component for example Map.vue you need to add this:
<script>
import "leaflet-draw/dist/leaflet.draw.css";
.
.
.
</script>
The issue was related to this one https://github.com/Leaflet/Leaflet.draw/issues/617
Importing the CSS file directly in my component and overriding the CSS property did the trick (with a valid path to the sprite; in Vue case, the static folder)
.leaflet-draw-toolbar a {
background-image: url('/static/spritesheet.png');
}
I'd like to be able to create a class to pass to the Polymer function to create elements. The obvious use case is to have a base class that our developers can use to build Polymer elements.
However, Polymer seems to ignore lifecycle methods on the class. The following code does not run #created. Is there a workaround?
//attempt 1
class CustomElement {
is = 'sample-multi-view-polymer-buic'
created() { console.log('created') } // never called
}
export default Polymer(new CustomElement()) // doesn't work (see error below)
Since I'm using Babel to transpile ES6 to ES5, the above is equivalent to the code below. It also does not work.
// attempt2
function CustomElement() {
this.is = 'sample-multi-view-polymer-buic'
}
CustomElement.prototype.created= function() { console.log('hi') } //never called
There's an article for using ES6 with Polymer in the docs
So there's 2 things missing on your end:
You are missing a beforeRegistered() method.
You need to use Polymer() to instantiate your element's Class.
Here's how I do it:
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<dom-module id="x-example">
<template>
<paper-input value="{{name::input}}"></paper-input>
<h4>{{name}}</h4>
</template>
<script>
"use strict";
class xExample {
beforeRegister() {
this.is = "x-example";
this.properties = {
name: {
type: String,
value: "I'm a data-binded prop"
}
}
}
ready() {
console.log("ready");
}
}
Polymer(xExample);
</script>
</dom-module>
<x-example></x-example>
Note:
The above snippet only works on Chrome/FF
For everything else you can of course "babelize" it.
I'm just about to experiment with reactjs I'm new to it. Is reactjs capabile to add a component to existing DOM.
So I have already server-side created DOM and on the flow reactjs should add a component which should render inside body but keep what already is there.
<script type="text/jsx">
var VisualEditor = React.createClass({
render: function() {
return (
<div>Hello, world!</div>
);
}
})
var initVisualEditor = <VisualEditor params={true} />
React.render(initVisualEditor , document.body);
</script>
this one is removing everything inside body and is returning
<div>Hello, world!</div>
React won't add a new div.
The render function is where the component will be rendered and replaces the current code already there.
I recommend you make a div with an id in the template and then render to that in React.render.
Template:
<body><div id="app"></div></body>
React:
React.render(
<Component />,
document.getElementById('app')
)
It's also bad practice to render to the body.
How can I select YUI node with this keyword?
Example:
<a href='javascript:test(this);'>Click Me!</a>
<script>
function test(el){
YUI().use('transition', function (Y) {
var selectedElement = Y.one(el);
});
}
</script>
Thanks a lot for help.
In your code, "this" will refer to the Window object, not the link. A better way to do this in YUI is:
Click Me!
<script>
YUI().use('transition', function(Y) {
Y.one('#my-link').on('click', function(e) {
e.halt();
var selectedElement = e.target;
});
});
</script>
This avoid JavaScript embedded in the markup, which is considered best practice. Also, it wraps all your code in the YUI sandbox, which is the recommended way.