When one adds an event handler to a tinymce-editor web component, the target of the received event appears to not be the tinymce-editor element, but another component
below the shadow-root of the tinymce-editor element.
Is there any simple way around this because its quite difficult to determine which tinymce-editor element the event was from if you have more than one for example?
(Is this a common approach for, or limitation of, web components or something - seems a bit odd??)
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function changeHandler(evt) {
console.log(evt.target.id); //gives something like mce_<n>
}
</script>
<tinymce-editor id='e1' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<tinymce-editor id='e2' api-key="<api-key>" on-Change="changeHandler"></tinymce-editor>
<script src="https://cdn.jsdelivr.net/npm/#tinymce/tinymce-webcomponent#2/dist/tinymce-webcomponent.min.js"/>
</body>
</html>
Related
How to add a notification under an input when focused ?
Like this:
(source: cjoint.com)
Is there any bootstrap plugins for this ?
Thanks,
Vincent.
There is a bootstrap plugin for it. have a look at it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notification in text nox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<input type ="text" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Have a good day!!
I did "ionic start myApp sidemenu" to start a sidemenu app. It starts with the "Playlists" page with 6 items. I click on one of those, say "Raggae" and it takes me to the "Playlist" page. At this point, the sidemenu does not open when I sweep from left to right.
In the following plnkr example from another StackOverflow question, the sidemenu does open after I nagivate to the "Playlist" page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
http://plnkr.co/edit/0RXSDB?p=preview
Is this my local environment problem or something wrong with the sidemenu template code?
With a brute force method, I found out the ionic.bundle.js come with the "ionic start myApp sidemenu" is causing the problem. If I inlcude the ionic 1.0.0-beta.1 version as in the plnkr example, the problem is gone. But the beta version is causing other different behavior in navigation. Hopefully ionic gets better.
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Render javascript source code in sapui5</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.
I have this link to a chess game but instead of it just displaying on the page id like it to be in a pop up. iv got videos, images, websites ext to pop up but having trouble with this. iv tried using a hidden div but couldnt get it to work.
I would much appreciate it if anyone could help.
thanks in advance
stephen
site with game i want to embed.
http://www.freegaming.de/onlinegames/Casino-|-Card-|-Board-Games/Classic-Chess-Game.html
I Read about Fancybox Usage in its home page...
Make sure You Have latest fancybox, folder layout like this...
It's a quick solution :) but it works!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<a id="various4" href="http://www.freegaming.de/components/flash//classic chess.swf">Swf</a>
</body>
</html>
I think now it's the asked solution....
I want to use jquery live() to automatically select the text in a text box but it doesn't seem to work in internet explorer 8. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('input.textInput')
.live('focus',
function(e){
$(this).select();
// alert(1) // if i uncomment this it works
});
});
</script>
</head>
<body>
<input type="text" class="textInput" value="0,00" />
</body>
</html>
If, however, i uncomment the alert(1) statement it does work. Any ideas what the problem is here?
This is strange, it also works if you don't use the live event:
http://jsfiddle.net/JKVXU/1/
Try
$('input.textInput').live("focus",function(e){
$(this).focus(function () {
$(this).select();
});
});
http://jsfiddle.net/JKVXU/23/
Have you tried using val() to get the text box vlaue instead?
I think the browser doesn't like the integer value on the alert.
try this: alert('1');