0

I am trying to load an HTML template into a tinyMCE 4.0.8 editor. So, basically, I am getting the id of the button from Page 1 (where a user clicks on a button) to Page 2 ( where the editor is present).

My editor textarea code is defined as follows:

<div class="field">
<textarea id="sTinyMceEditorId" name="sTinyMceEditorId" style="width:948px; max-width:948px; height: 70%"></textarea>
</div>  

And inside the script tag, I have defined my code(some one in my last post suggested me the following code) as follows:

Basically, I am grabbing the URL parameter and corresponding to that, I want the template to load.

<script type="text/javascript">
var button = $.getUrlVars()['button'];

//these values should correspond to the values you are passing in your get parameters.

switch(button){
    case 'temp1':
        $("#sTinyMceEditorId").load("Folder/firsttemplate.html");
        break;
    case 'temp2':
        $("#sTinyMceEditorId").load("Folder/secondtemplate.html");
        break;
    case 'temp3':
        $("#sTinyMceEditorId").load("Folder/thirdtemplate.html");
        break;
    default:
        alert("Button id not recognized.");
        break;
}
</script>

For some reason, it's not loading into my editor. Anything wrong in my code?

Please advise

Here is how I have defined my tinyMCE which is working perfectly fine:

tinymce.init({
        selector: "textarea",
        convert_urls: false,
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true



                });

Here is how I am passing the variable onto the page where all of the aforementioned code is mentioned. Say for example, I am passing from variable from Page 1 to Page 2, where Page 2 has all of the aforementioned code.

<div id="templatesWrap">
    <div class="template" data-templatelocation="templateone" data-templatename="Template ONE" data-templateid="" >
     <div class="templateContainer">
     <span>
      <a href="" title="Use Template">
    <img class="thumbnail" src="templatefiles/thumbnail_010.jpg" alt="templateone">
    </a>
    </span>
        <div class="templateName">Template ONE</div>
                <p>
        <a href="URL_for_page2?button?=temp1" title="Use Template" class="button secondary" id="temp1">Use Template</a>
                </p>
        </div>
    </div>


 <div class="template" data-templatelocation="templatetwo" data-templatename="Template TWO" data-templateid="" >
    <div class="templateContainer">
    <span>
     <a href="" title="Use Template">
    <img class="thumbnail" src="templatefiles/thumbnail_011.jpg" alt="templatetwo">
    </a>
    </span>
    <div class="templateName">Template TWO</div>
    <p>
    <a href="URL_for_page2?button?=temp2" title="Use Template" class="button secondary" id="temp2">Use Template</a>
    </p>
    </div>
</div>

And so on for other templates

6
  • 1
    are you importing jquery?
    – jcho360
    Jan 2, 2014 at 20:36
  • Yup, like this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> on both the pages
    – Jack
    Jan 2, 2014 at 20:37
  • Jack you need to give us more details, is there any JS error?, could you place your code here? jsfiddle.net
    – jcho360
    Jan 2, 2014 at 20:39
  • @jcho360 Please find my updated question with tinyMCE code and code for Page1 where user is clicking on "Use Template" button added. Not sure how would I add these in jsfiddle because the control is getting transferred to another page and the variable is getting passed in URL.Please let me know if you need more information. Thanks
    – Jack
    Jan 2, 2014 at 21:47
  • I tried defining the script tag to load the templates below the tinyMCE.init script tag in a hope that I should load the templates after tinyMCE gets initialized, but still it didn't work :(
    – Jack
    Jan 2, 2014 at 21:55

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.