CODEWITHSUNDEEP
jqueryjquery-mobiletinymce
Todd Vance
Todd Vance

Reputation: 4721

TinyMCE and a jQuery Mobile textarea

This would seem to be super simple but I cannot get it to work nor can I find the answer.

I have a textarea (editcontent) and in my onLoad function I tried this:

$('#editcontent').tinymce({
    // Location of TinyMCE script
    script_url: 'tinymce/jscripts/tiny_mce/tiny_mce.js',

    // General options
    theme: "advanced", 
    plugins:"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

When I get to this page, the textarea is there in the DOM but does not show up on the screen (I am checking this on Chrome). I know the script locations are correct. What am I missing?

Upvotes: 2

Views: 1907

Answers (3)

evilReiko
evilReiko

Reputation: 20503

This is how I do it, to have TinyMCE work, you need to apply 3 things correctly:

1) Place tiny_mce.js script file in the correct folder

2) Fetch TinyMCE script file in the tag:

<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

3) Initiate TinyMCE document ready with the options you like:

$(document).ready(function() {
    tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        theme_advanced_buttons1 : "bold,italic,bullist,numlist",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_resizing : false
    });
});

Upvotes: 2

Thariama
Thariama

Reputation: 50840

You can use this init function setting to make it work for one or more editor instances

  tinyMCE.init({
    mode: 'exact',
    elements : "id_of_texarea, id_of_textarea2, id_of_a_div",
    theme : "advanced",
    plugins : ... 
  });

Upvotes: 1

Todd Vance
Todd Vance

Reputation: 4721

Since I only have one textarea, I just used the tinymce init way of doing it. I am sure it could be done the other way but I dont know what was wrong.

SO:

  tinyMCE.init({
        mode : "textareas",
        theme : "advanced",
        plugins : "emotions,spellchecker,advhr,insertdatetime,preview",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left"        
    });

This works for me on my one textarea... I just didnt want to have to declare ALL textareas as tinyMCE boxes (even though I am technically only using one).

Upvotes: 1

Related Questions