Using json to post data from tinyMCE to Web API? - javascript

I have a Span that I have attached TinyMCE to so that I can do inline editing. When I make changes I want to post the changed content back to my Web API call as a json object.
Using X-Editable I was able to do this but I am trying to get away from WYSIHTML5.
This is my Jquery code to init TinyMCE and attach a function to the Save event.
$(document).ready(function () {
tinyMCE.init({
selector: ".editable",
inline: true,
plugins: "preview autoresize save",
toolbar1: 'preview | save',
menubar: "edit insert | tools",
autoresize_min_height: 100,
resize: 'both',
statusbar: true,
save_enablehendirty: true,
setup: function (editor) {
editor.on('SaveContent', function () {
MySaveFunction;
});
},
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall ' },
tools: { title: 'Tools', items: 'spellchecker code' }
}
});
One of the issues I'm running into is that the SaveContent tries to post the whole page and all I really want to do is post the contents of the active editor that I am using.
Does anyone know of a good example on how to post from a save in a specific TinyMCE edit area?

Related

TinyMCE : “forecolor” and “backcolor” buttons not showing up in toolbar

Here is my tinymce script
tinymce.init({
selector: 'div.tinymceinline',
inline: true,
theme: 'modern',
plugins: 'textcolor',
toolbar1: 'forecolor backcolor',
});
Added plugin "textcolor" & "forecolor & backcolor" in toolbar options still its not showing up.
Any Help?
Here is a TinyMCE Fiddle that works using your exact code:
http://fiddle.tinymce.com/3bgaab/1
Does that work for you? If so either something is cached in the browser or your configuration is not what you think it is. Are there any errors in the browser's console?

Control cursor onload on tinymce/codemirror

I have a codemirror editor and tinymce editor side by side. When I load the page, cursor automatically comes at the tinymce editor. How can I prevent this?
EDIT
tinymce.init({
selector: "#mytextarea",
theme: "modern",
plugins: ['ice code table contextmenu'],
contextmenu: "align_element | add_callouts add_ref add_refitems",
visual: false,
toolbar1:'bold,italic,|,search,replace,code,|,ice_toggleshowchanges,iceacceptall,icerejectall,iceaccept,icereject,|,alignleft,aligncenter,alignright,|,table'
})
Are you loading the auto_focus plugin?
https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus
If you don't load that the editor does not grab focus on page load in my testing.

Auto-File upload after selecting file in Sencha Touch 2.3

I have a Sencha Touch 2.3 application that I am helping develop. One of the features I want to implement is uploading a file that I then do various things with using PHP in the back-end. However, I cannot find a way that works to actually complete the upload (or even show a dialog box to select a file to upload!)
I have a navigation bar that looks like the following:
...
navigationBar: {
docked: 'top',
id: 'mainAdminToolbar',
items: [
{ ...
},
{
align: 'right',
hidden: true,
text: 'Import',
itemId: 'ImportBtn',
}
]
...
In my main controller file, I have the following:
ImportBtn: "adminMain #ImportBtn",
"adminMain #ImportBtn": {
tap: "onImportTap"
},
...
I looked at the a lot of examples (such as this one and this one), but I can get none of them to work. I believe the latter might be for a more updated version of the framework, too, but I cannot update as of right now and have to work with version 2.3
What I want to do is the following:
Have a user click the button
Have a dialog window pop up in which a user can select a file
Have the file auto-upload after being selected
Do various server-side things with the file
How can I achieve this using Sencha Touch 2.3?
Try to use
xtype: 'filefield' and it's 'updatedata' event
To select file you can write something like this
{
xtype: 'filefield',
itemId: 'ImportBtn',
listeners: {
change: function (button, newValue, oldValue, eOpts) {
alert(newValue);
}
}
}
And after selecting the file you can get it with this (It works fine in 2.4)
var file = [your-filefield].getComponent().input.dom.files[0];
Here is more about filefield
http://docs.sencha.com/touch/2.3.0/#!/api/Ext.field.File

how to make tinymce 4 toolbar external and always visible?

I have this settings for tinyMCE:
tinymceOptions = {
inline: true,
resize: false,
plugins: "textcolor",
selector: "div.editing",
toolbar: "forecolor backcolor",
fixed_toolbar_container: ".my-toolbar"
}
and that worked as I it should be, but doesn't satisfy my needs, what I want is a fixed external toolbar for multiple editor instances that will not disappear when focus is lost (blur event) which not the case with this settings.
Note:
removing the inline: true has no effect!?
If you want the toolbar to be external, and you don't want to auto-focus it, here's what you do:
tinymceOptions = {
inline: true,
resize: false,
plugins: "textcolor",
selector: "div.editing",
toolbar: "forecolor backcolor",
fixed_toolbar_container: ".my-toolbar",
init_instance_callback: function (editor) {
// This will trick the editor into thinking it was focused
// without actually focusing it (causing the toolbar to appear)
editor.fire('focus');
},
setup: function (editor) {
// This prevents the blur event from hiding the toolbar
editor.on('blur', function () {
return false;
});
}
}
I'm looking for the same thing here. I have a somewhat hacky approach that I discovered on the TinyMCE forums and am currently looking for a better approach.
By throwing an error after the blur event is fired it prevents TinyMCE's cleanup from removing the editor.
tinymce.init({
menubar: false,
plugins: "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media textcolor table contextmenu paste wordcount",
toolbar: [
"undo redo removeformat searchreplace code",
"styleselect fontsizeselect forecolor",
"bold italic underline strikethrough superscript subscript",
"alignleft aligncenter alignright alignjustify | outdent indent blockquote",
"bullist numlist table | link image media"
],
selector: '.selected .inline-preview',
inline: true,
autofocus: true,
fixed_toolbar_container: 'section[data-sidebar-text-controls] > div',
init_instance_callback: function () {
tinymce.activeEditor.focus();
},
setup: function (editor) {
editor.on('blur', function () {
throw new Error('tiny mce hack workaround');
});
}
});
My understanding is each editor has it's own toolbar.
When using 'fixed_toolbar_container' it simply displays the current editor's toolbar in that container.
If no editor is selected it can't know which editor's toolbar you want displayed - sadly it doesn't yet have mind reading capabilities ;)
A possible work-around for you would be to somehow make sure an editor is always selected, therefore a toolbar will always be displayed. Sorry, no time to figure out how but maybe others can expand (blur()/focus() maybe?).
With an editor initialized with auto_focus: true, and the following in the css will force the tool bar to always be visible. Though the toolbar does not exist until focus is made on the editor.
.mce-tinymce.mce-tinymce-inline.mce-container.mce-panel {
display: block !important;
}

How to setup the TinyMCE mention plugin?

I am trying to get the mention plugin to work with TinyMCE. The problem is: whenever I enable the plugin, I get the dreaded "tinymce is not defined" error. I think it may be loading the plugin "too soon", but I don't know how to delay the plugin load until TinyMCE is fully loaded.
Here's how I have the the init() configured:
$(document).ready(function(e) {
tinymce.init({
selector:'textarea.update',
menubar:false,
toolbar:"undo redo | bold italic | bullist numlist | link unlink",
width:'100%',
plugins: "link,mention",
mentions:
{
source: [
{ name: "Michael" },
{ name: "Erica" },
{ name: "Sloan" }
]
}
});
});
The Text area is
<textarea class="update"></textarea>
If I remove the mention option and the "mention" from the plugins list, it works fine. As soon as I put the plugin back into the "on" mode, it breaks.
How do I fix this?
The problem (as leakim571 so astutely pointed out) was that I was using CacheFly instead of hosting my own copy. When I got rid of the cachefly reference, downloaded the whole tinymce package, and put the mention plugin in that package, everything started to work perfectly.

Categories

Resources