Create div tag in plugin tinyMCE

[duong_thua_Tuong]

Hi All. I write a new plugin. I want creat Element ‘div’ tag when insert data code . But it is error .
Can you help me , check this code, please . Thanks for help.

tinymce.PluginManager.add('meCloud', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('meCloud', {
        text: 'Add meCloud video',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'MeCloud plugin',
                body: [
                    {   type: 'textbox',
                        name: 'code', 
                        label: 'Video code'
                    }
                ],
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    if(e.data.code){
						var mmCode = e.data.code;
						editor.insertContent( mmCode );
						var div = editor.document.createElement( 'div' );
						div.setAttribute( 'data-vid', getVideoId(value) );
						div.setAttribute( 'data-type', 'videoplayer' );
						div.setText( value );
						div.id = 'videoplayer-' + Math.random().toString(36).replace(/[^a-z]+/g, '');
						editor.insertElement('div');
			
						function getVideoId(str){
						if(str == '') return false;
						str = str.replace("[mecloud]", "");
						str = str.replace("[/mecloud]", "");
						return str;
			}
					}else{
	tinyMCE.activeEditor.windowManager.alert('Please fill the code field to use meCloud plugin.');
					}			
                }
            });
        } 
    });
    // Adds a menu item to the tools menu
    editor.addMenuItem('mecloud', {
        text: 'MeCloud plugin',
        context: 'tools',
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'meCloud plugin',
                url: 'http://mecloud.vn/video/me',
                width: 800,
                height: 600,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
    });
});

[James_Hibbard]

Hi,

It would help greatly if you could provide enough code for us to recreate the problem and also if you could tell us what the error is and how we can reproduce it.

[Lokesh]

Try to put your code into online code playgrounds like http://jsfiddle.net or http://codepen.io

It will help us to reproduce & understand the exact issue you are facing.

[duong_thua_Tuong]

Hi Pullo and Lokesh,
Thanks for help. This code example. I want to create div tag & save div tag in database.
http://www.mediafire.com/download/1gj5i6aamr5lf4o/example.zip

[James_Hibbard]

I (and probably most others) won’t download unknown files from mediafire.
Why not use one of the services Lokesh mentioned, or paste the code here.

[duong_thua_Tuong]

Oh, I’m sorry.

demo.html (2.5 KB) .
I want you help me check file is \tinymce\plugins\meCloud\plugin.min.js. Thankstinymce.zip (275.1 KB)

tinymce.PluginManager.add('meCloud', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('meCloud', {
        text: 'Add meCloud video',
        icon: false,
        onclick: function() {
            // Open window
            editor.windowManager.open({
                title: 'MeCloud plugin',
                body: [
                    {   type: 'textbox',
                        name: 'code', 
                        label: 'Video code'
                    }
                ],
				
                onsubmit: function(e) {
                    // Insert content when the window form is submitted
                    if(e.data.code){
						var mmCode = e.data.code;
						editor.insertContent( mmCode );
						var div = doc.createElement( 'div' );
						div.setAttribute( 'data-vid', getVideoId(value) );
						div.setAttribute( 'data-type', 'videoplayer' );
						div.setText( value );
						div.id = 'videoplayer-' + Math.random().toString(36).replace(/[^a-z]+/g, '');
						editor.insertElement('div');
			
						function getVideoId(str){
						if(str == '') return false;
						str = str.replace("[mecloud]", "");
						str = str.replace("[/mecloud]", "");
						return str;
			}
					}else{
						tinyMCE.activeEditor.windowManager.alert('Please fill the code field to use meCloud plugin.');
					}
					
                }
            });
        } 
    });

 
    // Adds a menu item to the tools menu
    editor.addMenuItem('mecloud', {
        text: 'MeCloud plugin',
        context: 'tools',
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'meCloud plugin',
                url: 'http://mecloud.vn/video/me',
                width: 800,
                height: 600,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
    });
});

[James_Hibbard]

Ok, last try.
This still is not enough context to understand what your problem is.
Please post a runnable demo that demonstrates the problem, or failing that a link to a site where we can see this not working.

I just saw the HTML file. Let me take a look at that.

[James_Hibbard]

For me it does show the same (apart from a couple of <p> tags):

Did I miss something, or do you mean that you want to show:

<p><div data-type="videoplayer" data-vid="123" id="whatever">[mecloud]123[/mecloud]</div></p>

instead of:

<p>[mecloud]123[/mecloud]</p>

[duong_thua_Tuong]

@James_Hibbard

<p><div data-type=“videoplayer” data-vid=“123” id=“whatever”>[mecloud]123[/mecloud]</div></p>

Thank you verry much. Yes, I want to show: <p><div data-type=“videoplayer” data-vid=“123” id=“whatever”>[mecloud]123[/mecloud]</div></p> instead of <p>[mecloud]123[/mecloud]</p>. Can you help me, please ?

[James_Hibbard]

Hi,

changing plugin.min.js to the following worked for me:

tinymce.PluginManager.add('meCloud', function(editor, url) {
  // Add a button that opens a window
  editor.addButton('meCloud', {
    text: 'Add meCloud video',
    icon: false,
    onclick: function() {
      editor.windowManager.open({
        title: 'MeCloud plugin',
        body: [{
          type: 'textbox',
          name: 'code',
          label: 'Video code'
        }],

        onsubmit: function(e) {
          if(e.data.code){
            tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'div', {
              id: 'videoplayer-' + Math.random().toString(36).replace(/[^a-z]+/g, ''),
              'data-vid': e.data.code,
              'data-type': 'videoplayer',
            }, "[mecloud]" + e.data.code + "[/mecloud]");

          } else {
            tinyMCE.activeEditor.windowManager.alert('Please fill the code field to use meCloud plugin.');
          }
        }
      });
    },
  });

  // Adds a menu item to the tools menu
  editor.addMenuItem('mecloud', {
    text: 'MeCloud plugin',
    context: 'tools',
    onclick: function() {
      // Open window with a specific url
      editor.windowManager.open({
        title: 'meCloud plugin',
        url: 'http://mecloud.vn/video/me',
        width: 800,
        height: 600,
        buttons: [{
          text: 'Close',
          onclick: 'close'
        }]
      });
    }
  });
});

As an aside, I wouldn’t give this file a .min extension, as it’s not minified.

[duong_thua_Tuong]

Hi ,
You helped me so much. And I fixed this . Thank you very much.