Incoporar iframe social networks in wysiwyg - Tinymce

Asked

Viewed 224 times

-1

Whoops, anyone knows how to add option to add or in ckeditor or tinymce, options similar to this:

inserir a descrição da imagem aqui Adding the iframe of a social network, the embed block goes directly to the body of the editor.

I managed to insert a custom button in Tinymce, when clicking on it a modal is opened, from there inserted in the body of the editor, but, I could not add more than one button, as I can add more than one button in Tinymce?

<head>
    <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: 'textarea#textarea_content',
            height: 500,
            toolbar: 'mybutton',
            menubar: false,

            setup : function(editor)
            {
                editor.addButton('mybutton', {
                  text: 'My button',
                  icon: false,
                  onclick: function () {
                        editor.windowManager.open({
                            title: 'Example plugin',
                            body: [
                                {type: 'textbox', name: 'title', label: 'Title'}
                            ],
                            onsubmit: function(e) {
                                editor.insertContent(e.data.title);
                            }
                        });
                  }
                });
            }
        });
    </script>
</head>
<body>
    <textarea id="textarea_content" cols="85" rows="10"></textarea>

</body>
tinymce wysiwyg

  • In the documentation of plugin there is no information on how to add custom buttons?

  • 1

    Take a look at the ckeditor Adons, I found this to embed Youtube http://ckeditor.com/addon/youtube

1 answer

0


I solved it as follows:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
        <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

        <script>

        tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
          ['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
           editor.addButton("style-" + name, {
               tooltip: "Toggle " + name,
                 text: name.toUpperCase(),
                 onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
                 onPostRender: function() {
                     var self = this, setup = function() {
                         editor.formatter.formatChanged(name, function(state) {
                             self.active(state);
                         });
                     };
                     editor.formatter ? setup() : editor.on('init', setup);
                 }
             })
          });
        });
            tinymce.init({
                selector: 'textarea#textarea_content',
                themes: "advanced",
                height: 500,
                toolbar: 'undo redo | bold italic |  style-h2 style-h3  | bullist numlist | link | facebook youtube twitter | code',
                menubar: false,
                plugins: "stylebuttons link code",
                default_link_target: "_blank",
                language_url : 'langs/pt_BR.js',
                language: 'pt_BR',
                setup : function(editor)
                {
                    editor.addButton('facebook', {
                      title:'Adicionar Incorporação do Facebook',
                      text: '',
                      image: 'https://image.freepik.com/free-icon/facebook-symbol_318-37686.jpg',
                      icon: true,
                      onclick: function () {
                            editor.windowManager.open({
                                title: 'Adicione conteúdo do Facebook',
                                body: [
                                    {type: 'textbox', name: 'title', label: 'Link'}
                                ],
                                onsubmit: function(e) {
                                    editor.insertContent(e.data.title);
                                }
                            });
                      }
                    });

                        editor.addButton('youtube', {
                            title:'Adicionar Incorporação do Youtube',
                            text: '',
                            image: 'http://safari-adventures.com/wp-content/uploads/2015/07/you-tube-icon.png',
                            icon: true,
                          onclick: function () {
                                editor.windowManager.open({
                                    title: 'Adicione conteúdo do Youtube',
                                    body: [
                                        {type: 'textbox', name: 'title', label: 'Link'}
                                    ],
                                    onsubmit: function(e) {
                                        editor.insertContent(e.data.title);
                                    }
                                });
                          }
                        });

                            editor.addButton('twitter', {
                                title:'Adicionar Incorporação do Twitter',
                                text: '',
                                image: 'http://www.bentleys.com.au/getattachment/sa/Twitter-B-W2.png',
                                icon: true,
                              onclick: function () {
                                    editor.windowManager.open({
                                        title: 'Adicione conteúdo do Twitter',
                                        body: [
                                            {type: 'textbox', name: 'title', label: 'Link'}
                                        ],
                                        onsubmit: function(e) {
                                            editor.insertContent(e.data.title);
                                        }
                                    });
                              }
                            });
                }
            });
        </script>
    </head>
    <body>
        <textarea id="textarea_content" cols="85" rows="10"></textarea>

    </body>
</html>

For translation into English, just download pt_BR on this page:

https://www.tinymce.com/download/language-packages/

and add the folder Langs, as it is in the language configuration in: language_url : 'langs/pt_BR.js'

Browser other questions tagged tinymce wysiwyg

You are not signed in. Login or sign up in order to post.