Like the question says has anyone been able to take a OpenWYSIWYG control and change its contents dynamically with JavaScript? It's hard because it takes your textarea and transforms it into a WYSIWYG editor by making the textarea invisible and inserting some kind of iframe and uses that as the editor.
I've tried code like this but failed:
document.getElementById("textarea-wysiwyg").value = "BLARG";
If you know that is it the only frame on the page then you can do something like this:
window.frames[0].document.body.innerHTML = 'blarg'
The above works when I tried it on http://www.openwebware.com/wysiwyg/demo.shtml in firebug.
Hope this helps...
Related
I'm currently working on a web editor where you can enter your HTML, CSS and JavaScript code and see the result in real time. Something similar to JSBin or JSFiddle. (I'm doing that to get an offline editor)
I've already been through many problems especially when it comes to CSS but I solved them by using an iframe and injecting all my code into it. And that works amazingly well until you type some JavaScript.
I'm sending the code between <script></script> but unlike CSS it won't run. What's very weird is that when I enter something like $('button').css('color', 'red');, the buttons of the editor effectively get affected but not those of my iframe. Exactly the opposite of what I expected. I've tried many things, looked at many topics on the forum, but nothing works. I also tried to load a blank page in my iframe. In that case, JavaScript runs but it becomes impossible to edit the code in the iframe! What's going on? Where am I going wrong? Thank you in advance for your help!
Here's my editor : https://jsbin.com/tuqite/edit?html,js,output/
Try updating the content of the iframe like this.
// this string contains both html and script
var html_string= "content";
document.getElementById('childFrame').src = "data:text/html;charset=utf-8," + escape(html_string);
By directly updating the iframe DOM like the way you are doing may not be the right way .
I am building a web app which uses Summernote to allow for HTML editing.
Users are allowed to add and edit JavaScript as well, using inline <script> tags. This works fine and can be done in the editor's "Code View" mode.
What I'd like to do is, in the preview/WYSIWYG mode, instead of having the script being executed, just display an image (or text) to let the user know that there's a script there.
Something like:
I looked around and I don't think this has been done before. Is it possible? Any pointers on how I could accomplish this?
Thanks!
https://github.com/summernote/summernote/issues/495 explains how to do it using CSS only.
I need to be able to extract, manipulate and update the text in wordpress's tinymce #content textbox.The code is coded in a wordpress plugin.
The below post helps but i am unable to comment or contact the original creator to ask him further questions. Having 1 points I cant practically do anything except ask questions. Let me know if i am doing this wrong.
Basically the code from this link is what i need to manipulate or edit the content in wordpress tinymce editor.
Manipulating TinyMCE content with jQuery
But the code seems to be overly simplified.
so my question is:
Do i need to include jquery
Do i need to include the tinymce js or class? is it in wordpress itself?
The code seems to be half javascript half php? Is the code suppose to be coded in a .js file?
do i need to put php tags here?
// make it into a jQuery object
var $content = $(content);
// manipulate the jquery object using jquery
$content = $content.remove('a');
Thanks.
hi I have figured it out after a bit more researching.
At first I was working with php to manipulate data after it is saved. But then i went on to wanting to manipulate the text before it was saved like underlining certain text based on a list in the database. So I needed to move on to javascript because i was editing the text before it was submitted or a page reload which i didn't wrap my head around yet.
So next i just coded the changes into javascript and built a button to call the process.
and seems i didn't need to include the tinymce class because probably the header of the editor page has already included it.
I have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.
I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.
I need to insert code for flash to TinyMCE with JavaScript. If I insert the same code using HTML menu of TinyMCE, it automatically add flash icon to the editor. But if I insert the code using JavaScript, the actual code is inserted but it shows nothing on the screen.
One trick I found is toggle TinyMCE to normal textarea and back to TinyMCE. Then, it shows the flash icon. Is there a better way to do that?
Thanks.
Sam
Try this code...
var content=tinyMCE.get('comment').getContent()+"ur flash content";
tinyMCE.get('comment').setContent(content);
Since i dont know about flash. but using this way u can insert into tinymce
Have u tried using:mceRepaint ?
http://wiki.moxiecode.com/index.php/TinyMCE:Commands