Hello,
I'm trying to write a JavaScript hack to return the content of an HTML editor, but can't seem to make it work. I've read that there is a function HTMLarea.GetHtml() that should do the job, but when I call this from within the page containing the htmlarea, it doesn't return anything.
The page in question is the grading window for an assignment. The HTMLarea object on the page has some generated instance name like editor-12345abcd, which seems to be constant for any given submission.
But when I try to use editor-12345abcd.GetHtml(), it returns nothing.
Any bright ideas, other suggestions for how I can get to this content?
Thanks!
Steve
In reply to Steve Bond
Re: How to get the content of HTML editor using JavaScript?
by Itamar Tzadok -
The HTML editor is a layer over a a simple html textarea (at least in all the instances I've encountered and possibly in the assignment grading page too). This means that you should be able to retrieve the content by getting the value property of the html textarea underlying the editor. However, changes to the content in the editor are not transferred to the textarea on-change and so if you need to get the content while modifying it you have to switch to text mode (
) and back to update the textarea. Alternatively you can try the following:
var editor=editor-12345abcd;
editor.focusEditor();
var sel = editor._getSelection();
var range = editor._createRange(sel);
if (HTMLArea.is_ie) {
range.getHtml();
} else {
editor.getHtml();
}
The point is that you need to get the editor in focus in order to access the content. I use this code for inserting content rather than retrieving content and I haven't used the getHtml method and so I follow your post for its syntax.
Hopes this helps.
) and back to update the textarea. Alternatively you can try the following:var editor=editor-12345abcd;
editor.focusEditor();
var sel = editor._getSelection();
var range = editor._createRange(sel);
if (HTMLArea.is_ie) {
range.getHtml();
} else {
editor.getHtml();
}
The point is that you need to get the editor in focus in order to access the content. I use this code for inserting content rather than retrieving content and I haven't used the getHtml method and so I follow your post for its syntax.
Hopes this helps.
In reply to Itamar Tzadok
Re: How to get the content of HTML editor using JavaScript?
by Steve Bond -
Dear Itamar,
Thanks, that's very helpful. I'd had a look at the textarea object but it seemed to remain unchanged from its initial state - I hadn't realised that it would be updated when clicking the <> button.
I think your focussing trick will do the job for me. I'll give it a go.
Thanks again
Steve
Thanks, that's very helpful. I'd had a look at the textarea object but it seemed to remain unchanged from its initial state - I hadn't realised that it would be updated when clicking the <> button.
I think your focussing trick will do the job for me. I'll give it a go.
Thanks again
Steve
In reply to Itamar Tzadok
Re: How to get the content of HTML editor using JavaScript?
by Steve Bond -
Hello again,
I'm afraid I'm getting nowhere with this, despite Itamar's previous advice. The problem seems to be that the HTMLArea object that I can see on the page is not the actual HTML editor. So the content of the editor is not a property of the object.
To clarify, this is the HTML editor that appears in the 'Grade' window for an assignment (but I'm not sure that's relevant to the problem).
The script on the page creates an HTMLArea object, as follows:
Thanks
Steve
I'm afraid I'm getting nowhere with this, despite Itamar's previous advice. The problem seems to be that the HTMLArea object that I can see on the page is not the actual HTML editor. So the content of the editor is not a property of the object.
To clarify, this is the HTML editor that appears in the 'Grade' window for an assignment (but I'm not sure that's relevant to the problem).
The script on the page creates an HTMLArea object, as follows:
editor = new HTMLArea('edit-');Then it replaces all textareas on the page, as follows:HTMLArea.replaceAll(editor.config); Which in turn calls the HTMLArea.generate() function for each textarea, thus: var tas = document.getElementsByTagName("textarea"); for (var i = tas.length; i > 0; (new HTMLArea(tas[--i], config)).generate());
So here's the problem: the actual content of the HTML editor is a property of these new HTMLAreas that are generated by 'editor', not a property of 'editor' itself. And I can't work out how to refer to these new HTMLAreas.
Has anyone else managed to do this? Can you give me any advice?Thanks
Steve
In reply to Steve Bond
Re: How to get the content of HTML editor using JavaScript?
by Itamar Tzadok -
I suspect that the syntax is incorrect after all. If you haven't, try getHTML() rather than GetHtml().
In reply to Itamar Tzadok
Re: How to get the content of HTML editor using JavaScript?
by Marcus Caba -
I'm a javascript-noob, who would need help with setting / getting content of the html-area.
I'm stuck with a problem, and I cant find any useful doc on htmlarea.com.
Concerning your piece of code i'd like to ask:
where do i find editor-12345, and what it is? Is there a function in order to get 'The' html editor on a page? Do I get it by HTMLArea or by document.getElement?
In reply to Marcus Caba
Re: How to get the content of HTML editor using JavaScript?
by Itamar Tzadok -
The HTML editor is an object over a textarea element. You can get the editors name for a certain page (e.g. editor_78e711027g8fd50ed722340b7c9a63b3) from the page source of that page. But if you only need to get the content immediately after the page is loaded you can get it from the underlying textarea which you can access by document.getElement and you can find the element id in the page source. Hope this helps.
In reply to Itamar Tzadok
Re: How to get the content of HTML editor using JavaScript?
by Marcus Caba -
Thanks for your advice!
Now I can figure out the name of my object from the source code, and your piece of code would work fine (using getHTML ;) ).
Still I would need a cleaner way to call my obect (without having to know the html-output of my script, i.e. an interface providing a handle for the object). The point is that I would like to add a onclick-handler on mod/quiz/attempt.php, but I cant figure out how to get the object's reference on runtime, without touching the js-code of the htmlarea.
In reply to Marcus Caba
Re: How to get the content of HTML editor using JavaScript?
by Andrej Vitez -
If you need a reference for HTMLArea objects you can get them by looping through window object (DOM) until you find what you are looking for.
The problem with this approach is that it wont work in IE. At least it didnt for me.
However, the better approach is to hack /lib/weblip.php in function use_html_editor(...) and write a line of javaScript code where you will "save" reference of every HTMLArea object. For example you can use globally-defined array.
Also check "defer" attribute for <script> tag as it might present a problem.
Cheers
The problem with this approach is that it wont work in IE. At least it didnt for me.
However, the better approach is to hack /lib/weblip.php in function use_html_editor(...) and write a line of javaScript code where you will "save" reference of every HTMLArea object. For example you can use globally-defined array.
Also check "defer" attribute for <script> tag as it might present a problem.
Cheers
Hi,
I've given up trying to make this work now, so if anyone would like to take on a small amount of paid work to do it for me, please let me know. This is the background and what I'm trying to do:
The Wimba Voice Tools plugin for Moodle allows a teacher to record audio and embed it within the HTML editor. However, the resulting embedded button does not work within the editor; then student can listen to what you recorded, but you cannot review your own recording.
So, I added a 'preview' area above the editor in the assignment grading window (/mod/assignment/submissions.php), to show the teacher what the student will see. That's a start, but you can only see the preview after you have saved changes. What I really need is a way to preview the content of an HTML editor without saving it - either by use of a 'Preview' button, or dynamically by updating a preview every time the content of the HTML editor changes.
Either way, I can't do it. I cannot find a way to get the content of the HTML editor on this page using JavaScript, despite all the advice given above.
So, if anyone thinks they know how to do that and can code something to do it, please get in touch (click my name above and message me) and maybe we can make a deal.
Best wishes
Steve
I've given up trying to make this work now, so if anyone would like to take on a small amount of paid work to do it for me, please let me know. This is the background and what I'm trying to do:
The Wimba Voice Tools plugin for Moodle allows a teacher to record audio and embed it within the HTML editor. However, the resulting embedded button does not work within the editor; then student can listen to what you recorded, but you cannot review your own recording.
So, I added a 'preview' area above the editor in the assignment grading window (/mod/assignment/submissions.php), to show the teacher what the student will see. That's a start, but you can only see the preview after you have saved changes. What I really need is a way to preview the content of an HTML editor without saving it - either by use of a 'Preview' button, or dynamically by updating a preview every time the content of the HTML editor changes.
Either way, I can't do it. I cannot find a way to get the content of the HTML editor on this page using JavaScript, despite all the advice given above.
So, if anyone thinks they know how to do that and can code something to do it, please get in touch (click my name above and message me) and maybe we can make a deal.
Best wishes
Steve
Moodle version 1.8
1) How do I create a combo box or list box on the front page of moodle which contains the titles of all the links & courses running on my site. I need it to look like an index- menu box of the whole site. I need to import all the links into this list box or combo box.
2) Also in each page on my site, I need to insert a button that takes me back to the front/home page. how is this done.?
3) How do I convert all html editing/conf blocks in my moodle site into widgets (so that I can let users drag and move around blocks according to their custom settings?
1) How do I create a combo box or list box on the front page of moodle which contains the titles of all the links & courses running on my site. I need it to look like an index- menu box of the whole site. I need to import all the links into this list box or combo box.
2) Also in each page on my site, I need to insert a button that takes me back to the front/home page. how is this done.?
3) How do I convert all html editing/conf blocks in my moodle site into widgets (so that I can let users drag and move around blocks according to their custom settings?
I know this is a bit old, but the problem is the editor content is in an iframe. it makes it very difficult to get the content.
The good news is that, from what I understand, moodle2.0 will be using tinymce, which has some built in functions and methods for getting the editor's content. So you may have better luck with the new version of moodle once it is out...?
The good news is that, from what I understand, moodle2.0 will be using tinymce, which has some built in functions and methods for getting the editor's content. So you may have better luck with the new version of moodle once it is out...?
Actually once you realize that the editor is an iframe it becomes very easy to get the content (as long as you don't have to support IE). At any rate, Moodle2 is indeed good news in this respect.