Plugin for TinyMce v4

Question

Good day. Need to make a plugin for TinyMce v4 . The essence of the plugin is that there is some JSON array with a list of photos, i.e.

{images:{id:150,name:'imeges1.jpg'}, id:151,name:'imeges2.jpg'}, id:152,name:'imeges3.jpg'}]}

It is necessary to make it so that a window opens in TinyMce v4 , a clutch of photos is formed in the window, and when you select a photo (click on the photo), you put an {images-152} tag in the text that is not highlighted with <p></p> tags. And if somehow it is possible that the picture itself would also be inserted, provided that the code all the same was the tag {images-152}

I don’t understand how to insert the HTML code into the window, and then when I click on the photo, close it and at the same time insert the tag

lampa lampa 16k 17 44 · Accepted Answer · 2014-07-30T06:51:05

If you connect the min library, then:

../plugins/pasteImage/plugin.min.js

If full , then

../plugins/pasteImage/plugin.js

Plugin content:

 tinymce.PluginManager.add('PasteImage', function(editor, url) { // Adds a menu item to the tools menu editor.addMenuItem('PasteImage', { text: 'PasteImage plugin', context: 'tools', onclick: function() { var images = [ {image: 'https://secure.gravatar.com/avatar/870c227ab02e5c61101a8265cdd14989?s=128&d=identicon&r=g' , id: '120'}, {image: 'https://secure.gravatar.com/avatar/870c227ab02e5c61101a8265cdd14989?s=128&d=identicon&r=g' , id: '123'}, {image: 'https://secure.gravatar.com/avatar/870c227ab02e5c61101a8265cdd14989?s=128&d=identicon&r=g' , id: '142'}, ]; for(var i=0, html = ''; i < images.length; i++) { html += "<img src='" + images[i].image + "' style='width:190px;margin: 10px;' data-paste='{images-" + images[i].id + "}'>"; } // Open window with a specific url editor.windowManager.open({ title: 'Choise image', width: 600, height: 400, html: html, buttons: [{text: 'Закрыть', onclick: 'close'}], onclick: function(ed) { ed.preventDefault(); if(ed.target.tagName.toLowerCase() == 'img') { editor.insertContent(ed.target.outerHTML); var win = editor.windowManager.getWindows()[0]; win.close(); } } }); } }); });

In init :

 tinymce.init({ selector: "textarea", plugins: 'PasteImage' });

Hmm interesting, but you would not want to write all the modules that I need for TinyMce v4 fl.ru/projects/2023450/…
Slightly corrected and directly what is needed if (ed.target.tagName.toLowerCase () == 'img') {editor.insertContent (ed.target.outerHTML);

Plugin for TinyMce v4

1 answer 1

More articles: