I am trying to work TinyMCE into a large professional project I am working on. In one spot we need to have multiple instances in table rows that are draggable. However, when you begin dragging one of the rows the content that is in the TinyMCE iFrame (whether it was loaded with the page or altered by the user) disappears. Once you drop the row the content is still gone but re-appears upon page refresh/reload. Is there a way to get the TinyMCE iFrame to preserve its content without needing to do a page reload? I have an example here:
http://cmzmedia.com/tinymce/examples/simple.html
I can't do it in something like jsfiddle because if you do it there and refresh the page it starts everything back from the beginning again.
Or perhaps there is a way to do it where only the dragged-and-dropped iframe is reloaded?
Since the editor is being re-rendered on a drag and drop, I think you should set the content manually yourself.
You should first grab the contents of the editor being dragged and then restore it after the drop.
To get access to a specific editor you can use TinyMCE.get('myiframe'), and then there should be a getContent and setContent function on that returning editor object to gain access to the editors content.
Related
I am looking for a way to inject HTML into an already loaded page in response to a user clicking the page.
Precisely, what I need to do is:
Capture a click
Generate a HTML string to be displayed
Inject that HTML string into the page, to be displayed on top of the current markup.
Of these, 1 is done and 2 is partially complete, so now I need to display the HTML string on top of the current markup (like a pop-up box). The injected markup should disappear when the markup behind it is clicked. How can I do this?
This is being developed as a feature of an Angular2 web app, so I'd like to achieve this using only typescript, HTML and CSS for styling, rather than use an existing library.
A few pointers to make things a little clearer:
Generated HTML will be interactive, so it may be clicked on, not just a simple popup or alert.
Generated HTML should be removed from the DOM when an area outside of that HTML is clicked.
CONTEXT
I am building an app that loads a third party website within an iframe, through a proxy in order to allow changes to be made to the website. Because of the proxy, I am able to inject JS code into the website, allowing an element selector to be present within it (i.e. something like this: http://jsfiddle.net/rFc8E/)
PROBLEM
My next step is to enable the user to not only select components but to be able to edit them. So, for example, I would be able to select text, type in new text, click save, and then have the selector -> content change values be stored somewhere on my app. This has been accomplished by others, as described here: How does Optimizely & Visual Website Optimizer handle visual DOM editing?.
However, I'm not sure how step 3 is accomplished:
Our user at this point can make changes to the page, like modifying text, swapping out images, or moving elements around. Each change that is made with the editor is encoded as a line of JavaScript that looks something like the following:
$j("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER__||____________ACTION______________|
Could someone point me in the right direction?
A little context on my problem.
I am updating the MathML in this div that is currently displaying HTML. When I load the page the first time, if runs the MathJax script and displays all the MathML perfectly.
When I click "Preview Changes", a button that takes the current changes made in a text area and displays them on the preview div, the MathML disappears.
I think problem here is that refreshing the div doesn't trigger the MathJax script. I have tried $.getScript(), and I tried adding a script using document.createElement(script) everytime the preview changes button is clicked, but all that to no avail.
I was hoping if someone could help me w/ this.
Thank you in advance.
MathJax.Hub.Typeset() is the JavaScript command that can re-render the math content within your page or within individual elements that have been updated by current changes. If you are sure that all typesetting is finished, then you can call it directly, but in general it is good to use the safe way to call it, like this MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
Read more instructions for how to use it here: http://docs.mathjax.org/en/v1.1-latest/typeset.html
For instance, MathJax.Hub.Queue(["Typeset",MathJax.Hub,"previewdiv"]); would re-render the updated contents of the HTML element with an ID of previewdiv after you have updated its contents using your jQuery call.
I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});
I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.
I'm trying to create a custom pop-up window using JavaScript which can hold a form, and then use the contents of this form on the original page.
What I have is a large table split into several sections which hold text. Each section has a title and a body (Which are both table cells which unique IDs). I then use JavaScript to pull content from a form and paste the information into this table (Using the getElementById...innerHTML method). The problem is that the page becomes way too big to fit the table and the form on... Any ideas???
If you are willing to use jQuery then you have some options:
For a dialog box / pop-up scenario, simple-modal dialog is quite nice. You can integrate it via div elements on your main page and this way you can avoid having to manage additional windows in javascript.
If you wish to add paging, filtering and search to your large table DataTables is top notch. It can be applied to a standard html table and is very versatile. It will allow you to hide columns as well, so I would think you could store your identity keys in those columns and use the dialog box easily.
JD-Daz -
I wouldn't use a pop-up. Nobody likes pop-ups, because they are not connected to the original window, and they are reliant on the windowing system of the host operating system. Also, this is useless in tabbed browsers. Instead, you should use a free-floating DIV element as the container of the table. You can allow the table to be scrolled inside the DIV element as appropriate.
--
Mark