Home > Developer > Web Develop

How to use JS to get the content of Ewebeditor editor

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Using JavaScript to take control of the value of the original is a simple thing is ewebeditor made very inconvenient, leading to a lot of beginners, do not know how to get. Write our habitual method of value before analyzing it.

[HTML]View Plain Copy
  2. <HTML >
  4.   
  6. <HEAD >
  8.   
  10. <title>ewebeditor: Standard invocation example </title >
  12.   
  14. < META http-equiv=content-type Content  ="text/html; charset=gb2312 ">
  16.   
  18. < link rel=' stylesheet ' type = ' Text/css ' href = ' example.css ' >
  20.   
  22. <script >
  24.   
  26. function Validateform () {
  28.   
  30.   
  32. if (document.getElementById ("Content1"). value!= "") {
  34.   
  36. document.getElementById ("MyForm"). Submit ();
  38.   
  40. }else{
  42.   
  44. alert ("Empty");
  46.   
  48.         }  
  50.   
  52.     }  
  54.   
  56. </script >
  58.   
  60. </HEAD >
  62.   
  64. <BODY >
  66.   
  68. < FORM method="Post " Name="MyForm" action="rs.jsp">   
  70.   
  72. < TABLE border="0" cellpadding ="2" cellspacing="1">
  74.   
  76. <TR >
  78.   
  80. <td> Edit content:</td>   
  82.   
  84. <TD >
  86.   
  88. <INPUT type = "hidden" name = c9>"Content1" >
  90.   
  92. <IFRAME ID = "EWebEditor1" src = ".. /ewebeditor.htm?id=content1&style=coolblue " frameborder=" 0 " scrolling = "no" width = " 550 " height="></IFRAME >
  94.   
  96. </TD >
  98.   
  100. </TR >
  102.   
  104. <TR >
  106.   
  108. < TD colspan= 2 align =right>
  110.   
  112. < INPUT type= button Value="Commit" onclick="Validateform ()" >    
  114.   
  116. <INPUT type = reset value = "Refill">
  118.   
  120. < INPUT type= button Value="View Source file" onclick="Location.replace (' View-source: ' +location) '>
  122.   
  124. </TD >
  126.   
  128. </TR >
  130.   
  132. </TABLE >
  134.   
  136. </FORM >
  138.   
  140. </BODY >
  142.   
  144. </HTML >

The above code is very simple. We generally think of document.getElementById ("Content1"). Value so it can be value, but in fact it is not so, in this way, the value can only be taken to the initial value, when the content of the editor is not available, Why is it? Why the daemon can get the value in the editor, <%=request.getparameter ("Content1")%> here is the content that can be taken to the editor, but document.getElementById (" Content1 "). Value is not allowed. It seems ewebeditor in JS in the hands and feet, must be dynamic to help set the commit event, or dynamically bound in the source code search onsubmit found the following codes, the original dynamic binding onsubmit event, so that each time before committing to execute Attachsubmit function

[JScript]View Plain Copy
  2. oform.attachevent ("onsubmit", Attachsubmit);
  4.   
  6. if (! Oform.submiteditor) Oform.submiteditor = new Array ();
  8.   
  10. Oform.submiteditor[oform.submiteditor.length] = attachsubmit;
  12.   
  14. if (! Oform.originalsubmit) {
  16.   
  18. oform.originalsubmit = Oform.submit;
  20.   
  22. Oform.submit = function() {
  24.   
  26. if (this. Submiteditor) {
  28.   
  30. For (var i = 0; i < this. submiteditor.length; i++) {
  32.   
  34. This . submiteditor[i] ();
  36.   
  38.             }  
  40.   
  42.         }  
  44.   
  46. This . Originalsubmit ();
  48.   
  50.     }  
  52.   
  54. }  
[JScript]View Plain Copy
  2. function attachsubmit () {
  4.   
  6. var oform = olinkfield.form;
  8.   
  10. if (!oform) {return;}
  12.   
  14.       
  16.   
  18. var html = gethtml ();
  20.   
  22. contentedit.value = html;
  24.   
  26. if (scurrmode=="TEXT") {
  28.   
  30. HTML = HTMLEncode (HTML);
  32.   
  34.     }  
  36.   
  38. Splittextfield (Olinkfield, HTML);
  40.   
  42. }  

Attachsubmit is the process of the copy Editor's contents into a hidden field control.

Knowing the process our problems will not be difficult to solve. Simply perform the next attachsubmit before fetching the editor content

[JScript]View Plain Copy
  2. function validateform () {
  4.   
  6. window.frames["EWebEditor1"]. Attachsubmit (); //Execute the Attachsubmit function in the IFRAME page   
  8.   
  10. if(document.getElementById ("Content1"). value!="" ){  
  12.   
  14. document.getElementById ("MyForm"). Submit ();
  16.   
  18. }Else{
  20.   
  22. alert ("Empty");
  24.   
  26.     }  
  28.   
  30. }  

The whole process is over, in fact, many ideas in the Ewebeditor code are very valuable, such as the Attachsubmit binding Submit method of the re-encapsulation, I also found a relatively good writing code is also posted together.

[JScript]View Plain Copy
  2. var urlparams = new Object ();
  4.   
  6. var aparams = document.location.search.substr (1). Split (' & ');
  8.   
  10. For (i=0; i < aparams.length; i++) {
  12.   
  14. var aparam = aparams[i].split (' = ');
  16.   
  18. urlparams[aparam[0]] = aparam[1];
  20.   
  22. }  
  24.   
  26.   
  28.   
  30. var slinkfieldname = urlparams["id"];
  32.   
  34. var sextcss = urlparams["Extcss"];
  36.   
  38. var sfullscreen = urlparams["fullscreen"];
  40.   
  42.   
  44.   
  46. var config = new Object ();
  48.   
  50. CONFIG. StyleName = (urlparams["style"])?  urlparams["style"].tolowercase (): "CoolBlue";
  52.   
  54. CONFIG.  Cusdir = urlparams["Cusdir"];
  56.   
  58. CONFIG.  Serverext = "jsp";

Parsing URL method, this method before Koko told me once, today in Ewebeditor see again, it seems to be a more general method of parsing URL parameters.

Summary: In fact, Ewebeditor just modified the submission form of the two events, before submitting the form to the value of copy, so as to avoid the editor every time the synchronization value of this unnecessary operation.

How to use JS to get the contents of the Ewebeditor editor

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to use tinymce editor how to use sqlite editor how to use node js how to use hex editor how to use html editor how to use get method how to get file content in javascript

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More