After reading a few examples of tinyMCE, the project is like changing every available textarea into a rich-text editor. I never find it init with an element id or selector by any kind. So can I make an ordinary textarea co-exist with a tinyMCE rich-text editor?
<html>
<head>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas"
});
</script>
</head>
There are two ways you can do this.
You can either set the mode to "exact" and specify the ID's of the textarea(s) you want converted to TinyMCE instances using the elements config item.
Alternatively you can set the mode to "specific_textareas" and specify the CSS class you want to assign to the appropriate textareas that are to be converted to TinyMCE instances using the editor_selector config item.
Related
I have a bunch of inputs on my HTML page, plus a textarea which is replaced by a TinyMCE editor. There are various scenarios where this page is loaded and every time one of the inputs must get the focus. But when the TinyMCE is initialized, it just steals the focus. I narrowed down the problem to an execCommand call which sets the default font size in TinyMCE.
The issue can be reproduced in this simplified code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
});
}
});
</script>
</head>
<body>
<input id="inp" />
<textarea>Hello, World!</textarea>
<script>
document.getElementById("inp").focus();
</script>
</body>
</html>
I have tested this in Firefox, Chrome, and Edge, and the same issue happened in all of them. Any idea how I can prevent this? I do not want to set the focus again once the TinyMCE is done initializing, since at that point the page has scrolled to the wrong spot.
I know I said I did not want to set the focus "again" once the TinyMCE is done initialization, but I ended up doing something similar to that. Instead of setting the focus at the bottom of the page, I moved the code inside the tinymce.init and also called $(document).scrollTop(0);. Here is the code:
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
// Scroll to the top of the page.
$(document).scrollTop(0);
// Now set the focus.
document.getElementById("inp").focus();
});
}
});
I believe there is a bug in TinyMCE and I hope it gets fixed in one of the future revs. I also hope this workaround helps someone down the road.
While you are issuing the command to change the font size, you aren't actually setting a default font in the TinyMCE editor. You are firing those commands, but if there is any content to be loaded into the editor, it won't have this font information applied.
To set default font information in TinyMCE use CSS, either via the content_css or content_style configuration options:
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
Here are examples that show the differences between the two approaches.
In this example: https://fiddle.tiny.cloud/oAhaab
...commands to set the default font family and size are issued, but they aren't applied to the content that is then loaded into the editor. They are fired, but don't end up applying to content loaded into the editor.
Whereas,in this example: https://fiddle.tiny.cloud/nAhaab
...the default font information is applied to loaded content via CSS as expected.
I want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
I've noticed, that there is large qwerty keypad in some apps(Facebook, Browser), that differs from popup. How do I use it in SDK.
P.S. I have multi-scene app, with ime module included in app.json
I found out from Samsung support, that you can use IMEShell_Common object.
First you include these:
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/ime.js'></script>
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/inputCommon/ime_input.js'></script>
in body tag
After you can use shell like this:
var imeBox = new IMEShell_Common();
document.getElementById('search').focus();
imeBox.onShow();
In Samsung this can be achieved by IME. A very well described step by step procedure is mentioned in the below link. It also has a sample app that demonstrate the full functionality:
http://www.samsungdforum.com/Guide/tut00049/index.html
Here is the small demostration:
Load the plugin js:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
Now load the IME js:
<script type="text/javascript" src="$MANAGER_WIDGET/Common/IME_XT9/ime.js"></script>
Create instance of the plugin:
var pluginAPI = new Common.API.Plugin();
Now register you IME key and initialize it for a text field.
pluginAPI.registIMEKey();
imeMail = new IMEShell("messageText", Main.imeInitId, this);
imeMail.setKeySetFunc('qwerty');
Now just focus on the input field:
jQuery("#messageText").focus();
For more details, please check the above mentioned URL.
Happy Coding!
I have got problem with TinyMCE when TinyMCE is in Pop-up. Look on my explanation of this problem.
This code is in my JSON pop-up
<!-- TinyMCE -->
<script type="text/javascript" src="../../Scripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" rows="8" cols="80" style="width: 80%">
Pełny opis...
</textarea>
<br />
When pop-up show first time you can see this editor
When pop-up show second time you can see this editor
In my opinion problem is here (only once is working this JS)
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
In the second case you see the textarea html element. This is probably because of the fact that you didn't shut down tinymce correctly when closing the first pop-up.
What happened behind the curtain is that the html structures are gone, but tinymce still got the editor instance registred and won't open up a new one with the same id when you reopen the pop-up. Solution here is to shut down tinymce when closing the pop-up.
To shut down an editor instance use:
tinymce.execCommand('mceRemoveControl',true,'your_editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'your_editor_id');
Tinymce takes as editor id the id of the source html element (your textarea). In case there is none "content" is the default.
I'm developing a Tumblr site.
When the user clicks on the "read more", the content is revealed and expanded on the same page,how can I do this?
As Tumblr is reworking the UI for editing, the Read More tool may have been hidden from you. Reset your preferences to use the Rich Text Editor to edit posts. The Read More tool is between the bulleted list tool and the image tool. See the screenshot.
Ok, It's a simple script, but it works. Add this code in your theme before tag (or as it should be):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spa').click(function(){
$(this).parent().children('div.spb').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.spb{display:none;}
.spa{cursor:pointer;display:block;}
.spa:after{display:block;content: "{lang:Read more}";margin-bottom:10px;}
</style>
Now, when you write a new text, add to it those things.
Text before Spoiler
<div class="spb">
Text after Spoiler
</div>