tinyMCE in tinyMCePopup - javascript

I created a plugin which open a tinyMCEPopup. The tinyMCEPopup is a html file with a form and i need to have a tinyMCE textarea in it. here is the structure of the popup:
<!DOCTYPE html>
<head>
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<textarea id="mceEditor"></textarea>
</form>
</body>
</html>
I tried to use:
tinyMCEPopup.execCommand('mceAddControl',false,'mceEditor');
or
tinyMCE.execCommand('mceAddControl',false,'mceEditor');
and the tinyMCE.init() function but it doesn't work.
Thanks in advance.

try
tinyMCE.execCommand("mceAddEditor", true, 'mceEditor');

Related

TinyMCE with Ajax: How to return POST response to display in TinyMCE?

So, I can send a Post to my PHP program and it can send a response to a div on my HTML page. However, what I want to do is have this response display in the TinyMCE editor and NOT in the div area. How do I adapt my code to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>getdata</title>
<script type="text/javascript" src="tinymce/js/jquery.min.js"></script>
<script type="text/javascript" src="tinymce/plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="tinymce/plugin/tinymce/init-tinymce.js"></script>
<script type="text/javascript">
function post()
{
tinyMCE.triggerSave();
var documentx= $('#texteditor').val();
$.post('validate.php',{postdocument:documentx},
function (data)
{
$('#data-container').html(data);
} );
}
</script>
</head>
<body>
<form id="get-data-form" method="post">
<textarea class="tinymce" id="texteditor"> </textarea>
<input type="button" value="submit" onclick="post();" />
</form>
<div id="data-container"> </div>
</body>
</html>
When the data is sent back via JavaScript just use the appropriate TinyMCE API to set the content:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent
...placing it back into the underlying textarea won't do anything unless you remove and re-init the editor.
EDIT: Please see this TinyMCE Fiddle for a fully working example: http://fiddle.tinymce.com/aPfaab

setAttribute in JavaScript not working with oraSearch

I'm working in ORMB and have an input element like this
<input id="charVal" class="oraInput" oraField="charVal">
I want to dynamically add an oraSearch attribute using Javascript but it's not working
document.getElementById("charVal").setAttribute("oraSearch","CM_SR_CHAR");
Though if I try with other attributes, it's working fine. Also if I add the oraSearch statically like below, then also it's working
<input id="charVal" class="oraInput" oraField="charVal" oraSearch="CM_SR_CHAR">
I believe the problem is in the DOM path for the JavaScript code.
I tried to put the script from the <head> and it didn't work, like this:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("charVal").setAttribute("oraSearch","CM_SR_CHAR");
</script>
</head>
<body>
<input id="charVal" class="oraInput">
</body>
</html>
But, if you put it in the body, it works fine:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="charVal" class="oraInput">
<script>
document.getElementById("charVal").setAttribute("oraSearch","CM_SR_CHAR");
console.log(document.getElementById("charVal"));
</script>
</body>
</html>
Note: if you are taken the script from another file put the <script></script> inside the <body>

jQuery click event not working on HTML page

I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.

jQuery iframe- how to get parent window URL when using an iframe?

I have given an example.
test.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</head>
<body>
<h1>main window test</h1>
<iframe src="./iframe.html"></iframe>
</body>
</html>
iframe.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>iframe testing</h1>
<script type="text/javascript">
$(document).ready(function() {
alert("window.location.href"+window.location.href);
});
</script>
</body>
</html>
In alert--> i am getting the iframe url "C:\Users\nn96589\Desktop\testfolder\iframe.html"
but, i need the main window URL which is "C:\Users\nc96589\Desktop\testfolder\test.html"
can anyone help me.
Thanks in advance.
Try utilizing document.referrer
<iframe src="data:text/html,<!DOCTYPE html><html><body><script>document.write(document.referrer)</script></body></html>">
</iframe>

SetReadOnly Ckeditor

I'm having a hard time using setReadonly of CKEDITOR. I want to use setReadonly when the Editor is already loaded and ready to be used. I tried using instanceReady:
var editor;
CKEDITOR.on( 'instanceReady', function( ev ){
editor = ev.editor;
editor.setReadOnly( true );
});
but this does not work, I tried using buttons like the sample is using and it works fine. Is there anyway to setReadonly automatically when the editor is ready to be used?
Thanks
It might be better to create it as readOnly instead of waiting for it to finish and then tell it to restart as readOnly.
For example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid', {readOnly: true} );
</script>
</body>
</html>
Fiddle demo
Here you can see how does it work!! For me works right.
http://ckeditor.com/latest/samples/readonly.html
It's simple, use disabled tag in textarea.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid" disabled="disabled">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid');
</script>
</body>
</html>

Categories