Cannot get tinymce to render texture

frocco

Hello,

I took my exact code from another working project and applied it to nette.

$form->addTextArea('content', 'Content:')
            ->setAttribute('class', 'mceEditor')
            ->setRequired('Content is required.');

script language="javascript" type="text/javascript">
      tinymce.init({
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    theme: "modern",
    menubar: false,
    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 colorpicker textpattern"
    ],
    toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        { title: 'Test template 1', content: 'Test 1'},
        { title: 'Test template 2', content: 'Test 2'}
    ]
});
    </script>
{control newsForm}

frocco

Still not able to get this working.
I viewed browser source and am able to link on .js files to verify they load.

tpr

Do you have any error message?

Perhaps you should add n:syntax=“off” attribute to the script element to avoid latte problems with curly braces.

frocco

ok, thanks. I added this, but still not working. no error messages.

<script type="text/javascript" n:syntax="off">
tinymce.init({
    selector: "textarea",

tpr

Also no JavaScript error in the Inspector?

frocco

Access to restricted URI denied.
bootstrap.js
netteForms.min.js
?_fid=lncv
Core.js
extensionconfig.js

Firebug lite shows these errors.

tpr

You should make them go away first, there's a chance they are causing the problem.

frocco

Not sure how to do this.
Will look into this, but this code runs fine in other frameworks.
Is there something in nette I can check?

David Matějka

afaik setAttribute('class', ...) sets class to the label-input pair container. try this instead:

->addTextArea(...)->controlPrototype->class('mceEditor')

frocco

Still no go

$form->addTextArea('content', 'Content:')
		     ->setAttribute('id', 'content')
             ->controlPrototype->class('mceEditor')
		     ->setRequired('Content is required.');

<script type="text/javascript" n:syntax="off">
tinymce.init({
     tinymce.init({
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    theme: "modern",
    menubar: false,
    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 colorpicker textpattern"
    ],
    toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link ",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        { title: 'Test template 1', content: 'Test 1'},
        { title: 'Test template 2', content: 'Test 2'}
    ]
});
</script>

tpr

Access to restricted URI denied.

Are you loading the js files from another server?
If you view the source of the page (in the browser) can you verify that js files are accessible?

frocco

I am on my own local server.
Yes, I can view the source and when I click on each js file, it loads.
This is a mystery to me.

tpr

Is the js file in a public directory of your server (eg. in the “www/js” dir)?

Try loading it with a relative path if currently not.

frocco

my structure is

/Library/WebServer/Documents (localhost)
   nette-app
	   www
          js
			files
			tinymce
				tinymce.min.js

Last edited by frocco (2015-03-26 22:27)

frocco

This is resolved.

I was loading the tinymce at the bottom of the latte template in the {block scripts} section.
I moved the script to the <head> area and the textarea rendered.

Thank you so much for trying to help me resolve this.

Last edited by frocco (2015-03-27 01:40)

tpr

Glad you figured it out, perhaps it will help to others too.