How to extend tinymce's media plugin? - javascript

TinyMCE already has a bunch of nice plugins out of the box. One of them - media plugin - wich i would like to extend.
Problem: I use an exterenal Video service with an API. In order to play video on the page, i need to embed it with an iframe. The iframe-code - especialy the src-attribute - can be generated only on the server by specific page_id and video_id and some other data from database. So whoever tries to embed a video from that particular video-service needs an already generated iframe-block or at least a generated url and that is the problem.
Goal: Somehow extend tinymce' functionality. Ideally the "media" plugin.
I would like to add either a new input-field to "General" tab or create a separate tab with additional input fields. Something like that:
or
Question: What would be the best (or simplest) way to achive this ?

The best, and only, way to achieve this is to edit the code (plugin.js) of the media plugin (the non-minified files can be downloaded here https://github.com/tinymce/tinymce)
Adding a tab and fields to the interface can be done by extending the tabpanel (in the file around line 155). And furthermore writing the code to submit your fields to the editor. I have worked with plugins in tinymce before and must say it can be a complicated matter.
A very short introduction on plugins in tinymce can be found here: http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
Good luck!

Related

Research for a visual html editor which can export the changes or Finding a method for reapplying the user changes in initial html

I am looking for a visual HTML editor script that works in browser basically. Its initial content will be generated from an existing URL and all the changes which will be done by the user, should be exportable in some kind of format. The aim here is reaching the final look later by applying this exported data.
The user here will be non-technical end user. The editor can be similar to WYSIWYG so user can switch between preview and code. The editor should not rely on some kind of special CSS/JS frameworks, it should be able to read from CSS and JS files directly from URL while generating the page.
There are lots of visual editors out there with lots of cool stuff. Some are using drag-and-drop UI elements, some are meant to work just with Bootstrap etc. But so far I could not find something I can use.
So if existing tools are not enough, I need to find a way of generate same result by comparing the outputs.
Beside taking diff of the contents, is there any method for generating the exportable changes for reapplying to initial HTML later?
using diff may actually work but it may generate lots of bugs while working with js frameworks
If you are looking for what I think then.. https://ckeditor.com/ Check this one. I have used this HTML editor in a website. It changes the initial HTML and works like the way wordpress HTML editor works.

Acrobat JavaScript: Directory Contents and Hyperlinking Files

I've recently been looking into automating a few things in Acrobat through JavaScript and had a couple questions that came up. I'm wondering if anyone might have thoughts or tips on these, it would be appreciated!
Is it possible to either get the contents of a directory (so the list of documents can be stored as an array), or check for the existence of a file? From what I've gathered, this may not be something that JavaScript in Acrobat is able to accomplish due to lack of access to the file system.
Two tricks that I've seen suggested for checking to see if a file exists are to either import it as an attachment, or attempt to open the file and see what the result is. e.g. if (this.importDataObject("myFile", "/testfile.pdf/")) { This doesn't seem to work well for my situation as the files in question can be quite large, and importing or opening them can be slow.
Is there a best way to use JavaScript to set a hyperlink in a pdf to open a file? I've tried l.setAction("app.openDoc(\"testfile.pdf\")") which adds the quoted JavaScript to the hyperlink and uses it to open the file in a new window, but I'm wondering how this compares with the way Acrobat normally links to a file, or if there's another more optimal way to set this programmatically.
For question #1 - Short answer is "No". As you said, Acrobat JavaScript doesn't have access to the file system. Long answer is "Yes - depending on what you want to do". Acrobat has a way to run "Actions" that can process all the files in a given directory, a list of files, or all the files that are currently open. You can run JavaScript on each file in a directory using an action without that script needing to actually know the file name.
For Question #2. The only option you have to set a link action via JavaScript is to set the JavaScript action. If you create a link, you only get to set the mouse up action. However, you can add a button instead of a link where the background and border are transparent and there's no caption and you get something that visually looks like a link but you can set more actions like mouse up, down, and rollover (enter/exit).

Smartest input to <iframe> for youtube, vimeo, ..?

I would like to add an option for users to add a link to a video to insert into the post.
The thing is that for users sometimes this might be confusing, this value could be:
The actual video embed code
The link of the embed iframe (src)
The link of the video in the site
Is there any plugin that checks and turns any of those into the embed code? Of course I could try to implement this, but getting to a stable solution could be slow, and there won't be a point if there is any public feature alike
Any workarouds like this?
I remember of jquery oembed, but this was only working for second option I think
I've been using oembed in a few forms, but the latest plugin I've used was jquery-oembed-all
This works for the video url instance.
If you need to allow all options you could use some javascript to detect if an iframe tag exists.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

gmail type filechooser for firefox

I have a simple requirement:
One browse button opens multiple file choosers.
When file is chosen, its filename gets added to an order list.
This works just fine in IE, because i can programatically click on hidden file inputs, but firefox does not let the click event open the file choose dialog.
Question:
What options do i have? I noticed that gmail uses a piece of flash to make this happen, this isnt really an option for me, i need to stick to an html/javascript solution if possible.
Thanks.
There's a reason GMail uses a piece of Flash: it is the best least-worst option. Some other sites I've seen use Java applets or their own browser add-on or Active-X component, which I find much more intrusive to the user than Flash.
If it were possible with HTML/javascript, you wouldn't see so many sites (like GMail) going out of their way to use flash or Java.
If you're stuck to HTML/Javasctipt, the next best thing you can do is the way GMail used to do it: put an "attach another file" link below the file selection input field, when the user clicks it another file selection input field is added to the page with javascript, so that they can add an unlimited number of files without navigating away from the page, but they still have to pick them one at a time.
There is not much you can do aside from Flash because the file input fields have been locked down for security over the past few years. If you want, there are several freely available Flash uploaders that will do the trick you want.
impossible Based on your data (users not having Flash) this is not possible with just HTML and Javascript. has alway been a huge debate whether to improve it or not. It doesn't even support too much CSS styling.
Multiple file uploads are able only via plugins. Either Flash, Java or Silverlight nowadays.

Categories