Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting Namecheap.com - Cheap domain name registration, renewal and transfers - Free SSL Certificates - Web Hosting

jQrte

2012
May 05
DOWNLOAD

LICENSE

  • jQrte is distributed under the terms of the MIT license
  • Free of charge for both personal or commerical use.
  • You are free to use and modify the software.
  • You can distribute the software, but do so in the spirit of Open Source.
  • We wish you to keep the copyright icon on the rich text editor.
  • Give credit where credit is due, spread the word, link to us if you can.

DEMONSTRATION

NEWS

  • 2012/01/16 fixed IE9 upload image and upload file issue.
  • 2011/07/09 updated the external plugin to fix IE9 issue.
  • 2010/02/15 jQRTE v0.4.1 released, combined with new version of jQpopup and jQCP.
  • 2009/12/19 Added Dutch (Belgium) Langauge Pack by member Brecht Cloetens.
  • 2009/11/26 Added Romanian Langauge Pack by member prtechro.
  • 2009/10/24 jQRTE v0.4 released (fixed form post,<pre> tag issue).
  • 2009/09/13 jQRTE v0.3.3 released.
  • 2009/07/15 jQRTE v0.3.3-beta released (fixed Safari4, Google Chrome2 Issue).
  • 2009/06/28 jQRTE v0.3.2-beta released (fixed Opera Issue).
  • 2009/06/28 jQuery WYSIWYG Rich Text Editor – jQRTE v0.3.1 released (integrated with jQpopup v0.2).
  • 2009/06/20 jQuery WYSIWYG Rich Text Editor – jQRTE v0.3 released.
  • 2009/06/20 Fixed the issue of the id with underline e.g. “content_test”.
  • 2009/06/4 Added Argentina Langauge Pack by Diego Maldonado.
  • 2009/05/23 Found jQRTE Japanese Langauge Pack from sksuare.net. We can link back to your site or provide the contact point if any developer interested in providing us the language pack (save in UTF-8 format). Send to us through tech@jqframework.com.
  • 2009/05/19 jQuery WYSIWYG Rich Text Editor – jQRTE v0.2 released.
  • 2009/05/19 jQuery WYSIWYG Rich Text Editor re-license to MIT.
  • 2009/05/19 jQuery WYSIWYG Rich Text Editor upgrade to v0.2, code size reduced from 55k to 32k.
  • 2009/05/03 jQuery WYSIWYG Rich Text Editor – jQRTE v0.1 released.

TIPS

How to remove the unused icon on jQRTE

Simple! For example, you want to remove the subscript icon, you just need to remove the line below in index.php:
<td id=”content_rte_subscript” title=”Subscript”></td>

If you are a experienced developer, you can try to remove items in the iconList and some functions on jquery.jqrte.js.
Lastly, you have to modify the image jqrte_icon.gif yourself.

How to set upload file limit on jQRTE

Easy! The file upload size is control directly by php.ini.

You can check genericupload.php, on line 8, it will report the maximum size for uploading, ini_get(“post_max_size”)
What you need to do is to change the value in php.ini and that’s all!

How to solve the flicking issue of the jQRTE icon in IE6

This is a known bug in IE6, you can add scripts to detect browser version and execute this workaround solution.

<script type=”text/javascript”>
   try {
      document.execCommand(“BackgroundImageCache”, false, true);
   }
   catch(e) {}
</script>

How to add text initially

you want to set the initial value for the textarea, what you need to do is to set the text into the textarea, just like our example. we are calling this script: $(“#demo2_rte”).jqrte();
so you just need to fill in <textarea id=”demo2″>initial text</textarea> (define the id by removing “_rte”)

DESCRIPTION

  • jQRTE Seperated logic and template, easy for you to change the look & feel.
  • jQRTE Seperated the language file from the editor, easy for internationalization.
  • jQRTE is easy to integrate and customize.
  • jQRTE is tested with IE6, IE7, IE8,IE9, FF3, Opera9, Safari4, Google Chrome2.
  • jQRTE is Free and Free of charge under the MIT License.

DOCUMENTATION

To initialize the jQRTE

  1. <textarea id=”content” name=”content” class=”jqrte_popup” rows=”5″ cols=”5″></textarea>
  2. <script type=”text/javascript”>
  3. window.onload = function(){
  4. try{
  5. $(“#content_rte”).jqrte();
  6. }
  7. catch(e){}
  8. }
  9. $(document).ready(function() {
  10. $(“#content_rte”).jqrte_setIcon();
  11. $(“#content_rte”).jqrte_setContent();
  12. });
  13. </script>

To Setup a rich text editor menu and the body

The rich text editor menu and the body sample stored in content.php

  1. <div class=”jqrte_body”>
  2. ……
  3. <td id=”content_rte_bgcolor”></td>
  4. ……
  5. <iframe id=”content_rte” src=”about:blank” class=”jqrte_iframebody”></iframe>
  6. ……
  7. </div>

To include Rich Text Editor Popup Template

Don’t change the ID(s) if you are not sure.

All the necessary divs stored in the editor.php

  1. <div id=”character_div” style=”display:none”>
  2. </div>
  3. ……

To Upgrade from v0.1 to v0.2

Upgrade to v0.2, it is more flexible for you to change the object id easily!

  1. //Here is the code changes between v0.1 and v0.2
  2. jQuery(document).jQRTE(“content_rte”); change to $(“#content_rte”).jqrte();
  3. jQuery(document).jQRTE_event(“content_rte”); change to $(“#content_rte”).jqrte_setIcon();
  4. jQuery(document).jQRTE_content(“content_rte”); change to $(“#content_rte”).jqrte_setContent();

To Upgrade from v0.4 to v0.4.2

Upgrade to v0.4.2, use the new jquery.jqrte.min.js file and modify the php code, you can fix the upload issue of IE9.

  1. //Here is the code changes between v0.4 and v0.4.2
  2. index-jQuery1.X.php – add jqupload plugin
  3. <script type=”text/javascript” src=”js/jquery.jqcp.min.js”></script>
  4. <script type=”text/javascript” src=”js/jquery.jqupload.min.js”></script>
  5. <script type=”text/javascript” src=”js/jquery.jqrte.min.js”></script>
  6.  
  7. editor.php
  8. <form id=”uploadimageform” name=”uploadimageform” action=”genericupload.php” method=”post” enctype=”multipart/form-data”>
  9. <input type=”submit” id=”uploadimage_btn” value=”Upload”>
  10. <form id=”uploadfileform” name=”uploadfileform” action=”genericupload.php” method=”post” enctype=”multipart/form-data”>
  11. <input type=”submit” id=”uploadfile_btn” value=”Upload”>

34 Responses to “jQrte”

  1. Trent says:

    Hi,

    thanks for this jQRTE plugin. Everything is working just fine. I’m using 0.4.1 version with small changes, but nothing significant, but I’ve found two particular bothering issues – both in IE8 and higher and occured in my website as well as in demonstration.

    1. Bug – Strange scrollbars around iframe. Workaround: using marginwidth and marginheight arguments in iframe tag.

    2.Bug – I’m unable to use tab, to navigate between other inputs in form and jQRTE textarea.

    Would you be so kind and fix these problems?

    Thanks.

    • jqteam says:

      yes, IE contains lot of issues after IE7, one of the workaround solution is to change the compatibility mode to IE7, it could be set in program, we are going to retest IE once again.

      2. when you add tab in the RTE, HTML could not support, it would just represent a space character only, what is your purpose of using tab?

  2. TT says:

    Hey there,

    Can I set an initial value inside the textarea ? Could not find a solution for that

  3. Tommaso says:

    Hi, I don’t know to initialize the box. I can edit a message, I can apply bold o italic format.

    Only way to initialize the box is to set some characters between textarea tag. Is there a way to set textarea by jquery?

    I’m Tommaso

    window.onload = function(){ try{ $(“#content_rte”).jqrte(); } catch(e){} } $(document).ready(function() { $(“#content_rte”).jqrte_setIcon(); $(“#content_rte”).jqrte_setContent(); });

    • jqteam says:

      same as previous question, you can just set the initial value for the textarea. you can download our example and check for the textarea id=”content”. please note the textarea id and the jqurey id. if you want to set the initial value using jquery, what you need to do is to set the textarea by calling $(“#content”).text(“some value through jquery”); before calling $(“#content_rte”).jqrte_setContent();

      <form method=”post” action=”test.php”> <textarea id=”content” name=”content” class=”jqrte_popup” rows=”5″ cols=”5″>rich text editor with <b>Content</b></textarea> <input type=”submit”> </form>

      </div>

      <script type=”text/javascript”> window.onload = function(){ try{ $(“#content_rte”).jqrte(); } catch(e){} }

      $(document).ready(function() { $(“#content_rte”).jqrte_setIcon(); $(“#content”).text(“some value through jquery”); $(“#content_rte”).jqrte_setContent(); }); </script>

  4. Freddie Mac says:

    I really like what you’ve done here! I want a blog of my own… who you hosted with mate?

  5. I’m not sure where you’re getting your info, but good topic. I needs to spend some time learning more or understanding more. Thanks for wonderful info I was looking for this information for my mission.

  6. Woω, that’s what I was seeking for, what a information! existing here at this website, thanks admin of this site.

  7. Games says:

    This will leave an intense hold on your name brand. Basically burning your brand on their memory is ones own advertising objective.

  8. I completely accept your point.I gained knowledge by reading your informative post.Well ellaborated.I have bookmarked your blog.In these days it is difficult to find blogs like this with unique content.

  9. Hi there! I just would like to give an enormous thumbs up for the good data you’ve got right here on this post. I can be coming back to your blog for more soon.

  10. RohitSingh says:

    Hi There! image upload is not working in my file. Please help

  11. I have recently started a website, and the information you offer on this web site has helped me a lot. Thank you for all of your time & work.

  12. Abdul can says:

    Hi. I want to remove format when i copy/paste a text to editor. How can i do? I looked at the codes but i couldnt find removeformat command.

    • jqteam says:

      you should highlight all text and then press the “A/A” with a cross icon, the 2nd column, last icon to remove the format

      • Abdul Can says:

        First of all, thanks for reply. And yes i know that but i want to clear styles auto when someone paste a text. I coded iframe html page as; $(document).ready(function(){ document.addEvent( “paste”, ( function() { var t=setTimeout(function(){ window.parent.tikla(frameElement.id);

        },100) } )); })

        and in the parent page as; function tikla(element){

        $.jQRTE.setCommand(“removeformat”,’body’,element); };

        and change the jquery.jqrte.min.js at line 89 as; if(id==’removeformat’){ var nesne=document.getElementById(element).contentWindow.document.body;

        document.getElementById(element).contentWindow.document.execCommand(“selectAll”,false,null); var $elem=$(‘#’+element).contents().find(‘body *’); $elem.removeAttr(‘class style’);

        }

        but it work only at chrome not at other browsers. I guess other browser don’t let the iframe runs the code to parent page, because of security reasons. So what do you suggest me to do. Thanks

  13. Tizzymack10 says:

    How would I go about adding multiple textareas with different id’s. My script has different text area names in order to submit data to database?

    For example: text text

    I’m not sure which files to modify to make this work.

    • jqteam says:

      each rich text editor is controlled by separated textarea, you can get the data by the textarea name using $_REQUEST["content1"]. $_REQUEST["content2"], $_REQUEST["content3"]…….

      • Tizzymack10 says:

        I think some of my question got cut off. How can i place 2 textarea boxes with textarea names “content1″ & “content2″ on the same page? The database part I think I can do.

  14. I gotta bookmark this site it seems handy very useful

  15. Emrah says:

    Hi, it is very useful. thanks for sharing.

    I wonder how I can change editor’size. I couldn’t find any property like width or height.

    Thank you.

  16. CACA-COBRA says:

    Will you give support to newer version of jquery?

  17. jqteam says:

    we are using WordPress. Depends on what you need, WordPress should be enough if you want to build your own blog.

  18. jqteam says:

    you could just filter by each topic you are interested in through the categories on the top right hand menu.

  19. jqteam says:

    it depends on whether we could find some interesting topics

  20. jqteam says:

    all posts are created by our trouble-shooting experiences and do a lot of research on the web

  21. jqteam says:

    you can use workpress as your blog

  22. jqteam says:

    for inexperienced blog writers, i think just keep it simple, when write the blog message, just use simple HTML code like bold/underline/italic text or adding images, if you want to enhance the layout, you may also study how to create table using HTML code.

Your Reply