I am trying to use tinyMCE in a ruby on rails application. This is my initialization code.
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
// script_url: '/tiny_mce/tiny_mce.js',
mode : "textareas",
theme : "advanced",
plugins : "layer,inlinepopups",
relative_urls : false,
theme_advanced_buttons3_add : "tablecontrols",
table_styles : "Header 1=header1;Header 2=header2;Header 3=header3",
table_cell_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
table_row_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
table_cell_limit : 100,
table_row_limit : 5,
table_col_limit : 5,
The initialization is working fine. Now, I am not using the tinyMCE toolbar, and instead have my own links, which when clicked, the tinyMCE functions for formatting text, inserting image, etc. should be invoked.
For instance, I have used tinyMCE table plugin, and need to insert table into the textarea when my page loads. This is what I tried:
editor = tinyMCE.get('editor');
editor.mceInsertTable();
But its not working. Please help.
Thanks.
mceInsertTable is an execCommand. You will need to call the following
tinymce.activeEditor.execCommand('mceInsertTable');
Sure, you just use the TinyMCE JavaScript API:
http://tinymce.moxiecode.com/js/tinymce/docs/api/index.html#
For example:
tinymce.activeEditor.hide();
Related
I have an application made with JSF 2.0, Primefaces 5.2, using MDL: Material Design Lite from Google (MDL). When I put p:editor on my jsf page it's not working: every element on the editor is disabled. When I inspect the elements, I can see that every div is disabled.
Also, when I first open the page, the editor does not work, but when I press F12 (to see javascript console) and close that tab (console) the editor starts to work.
Can anyone help me?
Apparently , JavaScript MDL interfered with jquery, when load page, the Editor.init() from Jquery was called, then MDL did something that p:edit was disabled. So, I make it:
<script type="text/javascript">
$(function () {
setTimeout(function () {
PrimeFaces.ab({s: 'id_from_editor', p: 'id_from_editor', u: 'id_from_editor'});
}, 1000);
})
</script>
It's working.
I'm using the tablesorter search/filter plugin to search names from a list. so when i type in a letter corresponding to the letters in the list will display. I used this: http://mottie.github.io/tablesorter/docs/example-widget-filter-external-inputs.html as a reference.
Below is my code:
var $table = $('#table').tablesorter({
sortList: [[0,0], [1,0]],
theme: 'blue',
widgets: ["zebra", "filter"],
widgetOptions : {
filter_columnFilters: false,
filter_saveFilters : true,
}
});
$.tablesorter.filter.bindSearch( $table, $('.search-subaccounts') );
HTML:
<input class="search-subaccounts" type="search" data-column="1"/>
I'm trying to filter names based on first name.
so when i try to execute it, gives me the following error:
Uncaught TypeError: Cannot read property 'bindSearch' of undefined
I dont know why it says 'filter' is undefined whereas i tried executing exactly the way its in the demo. What did i do wrong here?
Any ideas??
It sounds like the widget file isn't being included since the bindSearch function isn't being found - it's included with the filter widget. Make sure you load the following files on your page (theme file name will vary depending on your choice):
<link rel="stylesheet" href="css/theme.blue.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
I've been trying to get TinyMCE to use a custom execcommand_callback handler to perform actions when the File Menu::New Document option is selected, but have been unable to get it to work at all, even on the most basic level. The project is on Rails 4, and I'm using the tinyMCE-rails gem from:
https://github.com/spohlenz/tinymce-rails
and following the example from:
http://www.tinymce.com/wiki.php/Configuration3x:execcommand_callback
I've put the following in tinymce.yml
execcommand_callback: "myCustomExecCommandHandler"
The resulting html:
<script>
//<![CDATA[
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {
alert('hello');
}
//]]>
</script>
some html ...
<form accept-charset="UTF-8" action="" id="homepage_form" method="post">
<textarea class="tinymce" cols="10" id="editor" name="editor" rows="10"></textarea>
<script>
//<![CDATA[
tinyMCE.init({"selector":"textarea.tinymce","document_base_url":"/",
"theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen,image,link",
"plugins":"table,fullscreen,image,link",
"execcommand_callback":"myCustomExecCommandHandler"});
//]]>
</script>
more form fields ...
</form>
To all appearances, this does nothing. Doesn't even raise a warning or error. What am I doing wrong?
Ok, I figure I should wrap this up for anyone else interested in this question, and thanks to Nishant for getting me on the right track.
Using TinyMCE 4 with the tinymce-rails gem (https://github.com/spohlenz/tinymce-rails) is straightforward and requires less configuration. Since I wanted the ability to embed links and images, my tinymce.yml file looks like:
document_base_url: /
plugins:
- image
- link
setup: "myNewDocumentHandler"
An my custom command handler looks like:
function myNewDocumentHandler(ed) {
ed.on('BeforeExecCommand', function(e) {
if (e.command === 'mceNewDocument') {
alert('New Document Command Handled');
}
});
}
You can see it work here: http://fiddle.tinymce.com/uRdaab/4
There is no problem in your callback . It works fine .
Check http://fiddle.tinymce.com/pRdaab
There is some problem here in plugins line , when you remove image and link it works . Check my fiddle and here is the code . I dont know why but try to figure that.
image is usually advimage , not sure about link plugin / feature however .
<script type="text/javascript">
function myCustomExecCommandHandler(editor_id, elm, command, user_interface, value) {alert('hello');}
tinyMCE.init({"selector":"textarea",
"document_base_url":"/",
"theme_advanced_toolbar_location":"top",
"theme_advanced_toolbar_align":"left",
"theme_advanced_statusbar_location":"bottom",
"theme_advanced_buttons3_add":"tablecontrols,fullscreen",
"plugins":"table,fullscreen",
"execcommand_callback":"myCustomExecCommandHandler"});
</script>
<form method="post" action="dump.php">
<textarea>Foo</textarea>
</form>
So normally its good to use a classic TinyMCE init and then work on it . Its better to first get TinyMCE working properly and then examine add the call back functionality . One issue at a time saves a lot of troubleshooting . I am trying to implement that in my programming skills too !
I am using cordova 2.2.0 with Xcode 4.5.2. On one of my pages I have a select component and once a particular option is selected I want to display a table within a div. My html looks like this: <div class="hero-unit" id="#facprog"></div>
The javascript/jquery looks like this:
<pre><code>
$(function() {
$('#selFaculty').change(function() {
var facultyName = $('#selFaculty').val();
var progDetails = app.fillFacultyProgramme(facultyName);
alert(progDetails);
$('#facprog').append(progDetails);
});
});
</code></pre>
Note that #selFaculty is the id of the select object. However, when the select option changes, everything in javascript executes except for the append. Nothing shows up in the div. Is there a different way to add html element to a div in jquery under cordova 2.2.0 in iOS?
Thanks in advance,
José
With jquery you can refresh a div.
This is a good example:
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>
and now you need to put the div in the body section of your page
<div id="loaddiv">
</div>
from http://designgala.com/how-to-refresh-div-using-jquery/
and there is another example here:
refresh div with jquery
The first example is useful when you need to load a script and refresh and the second one is useful when you need to make a change, e.g. append html and then refresh as in your case.
Version Drupal 7.16
I'm trying to use draggable of jquery in Drupal way :
I have a simple page (with hook_menu) wich call an js and render a simple div with the good class to draggable :
(function($) {
Drupal.behaviors.testJs = {
attach : function(context, settings) {
$('.test-js').draggable();
});
}
}
})(jQuery);
This js is load.
I add library of jquery Drupal :
drupal_add_library('system', 'ui');
or
drupal_add_library('system', 'ui.draggable');
But nothing happen....
When I had an external jquery like :
drupal_add_js('http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js', 'external')
draggable work.
I try to enable jquery update module, but nothing more....
It is most likely that the hook you are calling isn't called int the right order. template_process_html is where css and js are finalized and rendered to template variables. Try adding your code in hook_preprocess_html and see if that works. Otherwise find a hook that is called before template_process_html like hook_init. If that doesn't work give a more detailed code sample of how you are trying to achieve this.
https://api.drupal.org/api/drupal/includes%21theme.inc/function/template_process_html/7
https://api.drupal.org/api/drupal/modules%21system%21theme.api.php/function/hook_process_HOOK/7
https://api.drupal.org/api/drupal/includes%21theme.inc/function/theme/7
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_init/7