jhtmlarea Discussions Rss Feed

New Post: Automatic
&

dunxz — Thu, 23 May 2013 01:53:35 GMT

**rpiggott wrote:**

Is there a way that instead of using for a new line & could be implemented instead?

I have no idea but I'd vote for this if i could

New Post: Allow for Mutliple ID's and Classes when using more than one instance.

dblu — Tue, 07 May 2013 21:14:22 GMT

Maybe this will help someone. I needed two instances, and wanted to give 2 ID's and a class. This is not hard and maybe it was posted somewhere but I thought I would post it anyways:

Added this:

if (opts.idName) iframe.attr("id",opts.idName);
if (opts.className) iframe.attr("class",opts.className);

after this about line 45:

var iframe = this.iframe = $("<iframe/>").height(textarea.height());

Then added the options on the page:

$("#answer").htmlarea({
    // Override/Specify the Toolbar buttons to show
    toolbar: [
        ["html"],
        ["bold", "italic", "underline"],
        ["orderedList", "unorderedList"],
        ["justifyleft", "justifycenter", "justifyright"],
        ["forecolor", "image"]                                      
    ],
    idName:"editor1",
    className:"c_editor"                  
});
        
$("#question").htmlarea({
    // Override/Specify the Toolbar buttons to show
    toolbar: [
        ["html"],
        ["bold", "italic", "underline"],
        ["orderedList", "unorderedList"],
        ["justifyleft", "justifycenter", "justifyright"],
        ["forecolor"]                                      
    ],
    idName:"editor2",
    className:"c_editor"               
});

$(".c_editor").contents().find('body').css({"font-family" : "Verdana, Geneva, sans-serif" });   
$(".c_editor").css({"border-color": "#000", 
                        "border-width":"1px", 
                            "border-style":"solid"});

New Post: rending with width and height zero values

Justin16l — Wed, 24 Apr 2013 13:20:47 GMT

I had the same problem. Here's why it's happening. If you have the textarea hidden (because of css/js, like with tabs), then jHtmlArea calculates its' width and height as 0. So the fix is to either make sure that the textarea is not hidden, or add another function that initiates when the hidden text area is shown.

Normal usage, but making sure the textarea is actually visible:

$("textarea:visible").htmlarea();

For cases where you need it to initiate later on, after showing the div, you can do this:

if ($('.myDiv').is(":visible")) {
        $("textarea:visible").htmlarea();
}

That's the basic idea anyway. I've just implemented a fix like this, and haven't has a problem so far.

New Post: auto focus in iphone 6.0

biechereran — Sun, 21 Apr 2013 11:47:19 GMT

Hello there,

I have tried to detect auto focus after loading and chage the param (keyboardDisplayRequiresUserAction to NO) in the webview of my applicaion.

The keyboard jumped looks fine and even the cursor is in the right position, the only problem is that the character that taps is not display in the edited area.

Any suggestion?

New Post: Hide horizontal scroll bar

Solg — Fri, 19 Apr 2013 14:06:43 GMT

Hi,

Try this

    $("#myTextArea").htmlarea({
        css: '@Url.Content("~/Content/jHtmlArea.Editor.css")'
    });

jHtmlArea.Editor.css:
body
{

background-color: transparent;
margin: 0;
padding: 0;

}

New Post: Hide horizontal scroll bar

jamin824 — Fri, 05 Apr 2013 04:09:08 GMT

Anyone solved this?

New Post: Automatic
&

rpiggott — Tue, 26 Mar 2013 22:10:56 GMT

Is there a way that instead of using for a new line & could be implemented instead?

New Post: problem display 'accent' on editor

forst — Wed, 13 Mar 2013 14:48:26 GMT

Hello all

I have a file with extension txt who contain a simple text with accent such as é ,è,...
When i insert this file into editor , there are incorrect caracter

function()  {   
      $.ajax({
        url : name_file,
    dataType: "text",
    success : function (data) 
               {      $("#editor").htmlarea('html', data ); }
              });       
}

New Post: How to focus a editor textarea

WebDevCA — Thu, 21 Feb 2013 03:43:42 GMT

I don't want to start a new thread since my question is similar but I'm wondering if the jHtmlArea plugin natively detects if a TEXTAREA it is being applied to has focus and then gives that focus to the associated IFRAME that it creates for that TEXTAREA.

New Post: default jhtml font-family

siho — Tue, 19 Feb 2013 15:56:07 GMT

Hi
Any news on this? I'm also not able to use default css for the jhtmlarea.
Thanks

Cornelia Sihota

New Post: drag and drop picture upload for jHtmlArea

joncas — Fri, 08 Feb 2013 14:46:53 GMT

Hello,

I am trying to integrate an ajax "drag and drop" image upload function for jHtmlArea and got as far as having a separate "drop box" above the toolbar.

When an image file is dropped there it is uploaded and the resulting image link is pasted as html into jHtmlArea.

What would be much nicer is if one could drop the image directly into the text area.

Would anyone be able to give a hint as to how to achieve this?

I put up a test demo here : http://issole.net/jh/

The upload box is adapted from code by Eric Potvin:

http://www.bookofzeus.com/articles/drag-and-drop-upload-files-using-ajax

All the source files are here in a zip archive: http://issole.net/jh/jh.zip

Here is the html page source:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Picture Drop and Upload for jHTMLarea</title>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="style/jqueryui/ui-lightness/jquery-ui-1.7.2.custom.css" />
 <script src="scripts/bozupload.js"></script>
 <link rel="stylesheet" href="style/bozupload.css" />
    <script type="text/javascript" src="scripts/jHtmlArea-0.7.5.js"></script>
    <link rel="Stylesheet" type="text/css" href="style/jHtmlArea.css" />
</head>
<body>
    <script type="text/javascript">
        $(function() {
            $("#jhtmlarea").htmlarea({
                toolbar: [
                    ["html","bold", "italic", "underline"],
                    ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
                    ["link", "unlink"],                    
                 ],
        });
   });     
    </script>
<div align=right  style="width:360px;"><section id="uploadBox">drop image<br />here</section></div>
    
<textarea id="jhtmlarea" cols="120" rows="60"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>
        
<div id="modal">
     <div id="modalMask"></div>
     <div id="modalContent">
       <section id="uploadStatus">
         <div id="progressWrapper">
             <div id="progressBar"></div>
             <div id="progressValue">0%</div>
             <p>Processing, please wait ... <input type="button" id="closeModal" value="Close">
         </div>
        </section>
     </div>
</div>
 </body>
</html>

here is the code of the uploader.php that receives the image file on the server and returns its url:

<?php
// Script from http://coursesweb.net/ajax

$savefolder = 'context_img';        // folder for upload
$max_size = 350;            // maxim size for image file, in KiloBytes

// Allowed image types
$allowtype = array('bmp', 'gif', 'jpg', 'jpeg', 'gif', 'png');

/** Uploading the image **/
function array_implode( $glue, $separator, $array ) {
    if ( ! is_array( $array ) ) return $array;
    $string = array();
    foreach ( $array as $key => $val ) {
        if ( is_array( $val ) )
            $val = implode( ',', $val );
        $string[] = "{$key}{$glue}{$val}";
    }
    return implode( $separator, $string );
    }
    
    
$rezultat = array_implode(":","-",$_FILES);

// if is received a valid file
if (isset ($_FILES['uploadedFile'])) {
  // checks to have the allowed extension
  $type = end(explode(".", strtolower($_FILES['uploadedFile']['name'])));
  if (in_array($type, $allowtype)) {
    // check its size
    if ($_FILES['uploadedFile']['size']<=$max_size*1000) {
      // if no errors
      if ($_FILES['uploadedFile']['error'] == 0) {
        $thefile = $savefolder . "/" . $_FILES['uploadedFile']['name'];
        // if the file can`t be uploaded, return a message
        if (file_exists($thefile))
                  {//duplicate file, just return the link to the existing file
          list($iwidth, $iheight, $itype, $iattr) = getimagesize($thefile);
          $rezultat = '<br/><img src="http://www.lissfineart.com/' . $thefile . '" width=' . $iwidth . ' height=' .  $iheight . ' border="0" hspace="0" vspace="5" /><br/>' ;
                  }
        elseif (!move_uploaded_file ($_FILES['uploadedFile']['tmp_name'], $thefile)) {
          $rezultat = 'The file can`t be uploaded, try again';
        }
        else {
          // Return the img tag with uploaded image.
          list($iwidth, $iheight, $itype, $iattr) = getimagesize($thefile);
          $rezultat = '<br/><img src="http://www.lissfineart.com/' . $thefile . '" width=' . $iwidth . ' height=' .  $iheight . ' border="0" hspace="0" vspace="5" /><br/>' ;
        //  echo 'The image was successfully loaded';
        }
      }
    }
    else { $rezultat = 'The file <b>'. $_FILES['uploadedFile']['name']. '</b> exceeds the maximum permitted size <i>'. $max_size. 'KB</i>'; }
  }
  else { $rezultat = '<b>'. $_FILES['uploadedFile']['name']. '</b> is of the wrong file type (use jpg)'; }
}

// encode with 'urlencode()' the $rezultat and return it in 'onload', inside a BODY tag
echo urlencode($rezultat);
?>

New Post: Hide horizontal scroll bar

marcom — Wed, 06 Feb 2013 09:59:46 GMT

Hi all!

Is it possible to hide the horizontal scroll bar that appears in the editor area?

New Post: Selection of Font-family

shahidiqbal_se — Mon, 04 Feb 2013 13:24:11 GMT

hi, i have 2 questions

do we use Menu for display font names, instead of single list of font names.
did any one uses this.fontfamily("arial") method to change the font, i am
trying to use it in customise toolbar button

thanks

New Post: HTML Area gets disabled and empty when dropped (jQuery Sortable)

pathachiever11 — Thu, 31 Jan 2013 19:43:12 GMT

I'm using jQuery Sortable with jHTMLArea. I basically have DIVs that are sortable and the DIVs are sortable. However, when you drop the DIV on any location, the contents of the jHTMLArea become empty and jHTMLArea becomes disabled. The iFrame and textarea both get disabled. You cannot write anything inside of it.

I'm not sure what the issue, so I'm wondering if this is has to do with the libaries themselves.

The code I'm using is this:

// Enable Sortables
$("div.nnUtil").sortable({
    cancel: ".nnSettings",
    connectWith: 'div.nnUtil',
    distance: 5,
    forcePlaceholderSize: true,
    items: '> div.nnItems',
    placeholder: 'ui-state-highlight',
    revert: 250
});

New Post: Tool Bar wrapping strangely

pghodgson — Tue, 29 Jan 2013 14:51:38 GMT

Found myself faced with this problem, definitely not a css guru but I fixed it with the following to jHtmlArea.css which basically drops the margin.

div.jHtmlArea .ToolBar ul li {list-style-type: none; float: left; border: none;  padding: 1px; }

Defo seems like a limitation of IE7.

New Post: insert html at select position

chrismogz — Fri, 25 Jan 2013 14:09:05 GMT

Hello, is it possible to insert HTML at select position or wrapped around selected text?

So if I wanted to insert table or

selected text

New Post: Resize Textarea Window

angelxmoreno — Sat, 22 Dec 2012 18:13:27 GMT

I too would like to know how to do this

New Post: Selection of Font-family

westerdale — Sat, 15 Dec 2012 22:02:39 GMT

Hi DrNotSure

Thanks for posting the font patch change. I didn't notice that. I'll check/update the patch and post it when I get a moment.

Regards,

Simon

New Post: Selection of Font-family

DrNotSure — Sat, 15 Dec 2012 07:26:36 GMT

first off thanks for jhtmlarea!

I used the patch and found a little issue. Was able to fix it for myself. I figured since I was using jhtmlarea for free I should post it here. I don't claim to know what I am doing, just a hack.

When i used the patch the and clicked on font family button it worked but the font names went to the right and out of the drop down. Guessing that my own css was interfering with the patch's I opened jHtmlArea.FontPickerMenu.css and found this line

div.jHtmlAreaFontPickerMenu div {float: left; margin: 2px; width: 112px; height: 14px;}

Changed it to this

div.jHtmlAreaFontPickerMenu div {float: left; margin: 2px; width: 112px; height: 14px; text-align: left;}

iow, added text-align: left;

No biggie but figured someone who knows even less than me might try the patch and get a headache trying to change it.

thanks again!

New Post: updateHtmlArea does not seem to be working for me... hel;!

dpluken — Fri, 23 Nov 2012 16:16:53 GMT

I get this error

TypeError: $("textarea.item-content").updateHtmlArea is not a function

[Break On This Error]

when I add the following line.

$('textarea.item-content').updateHtmlArea(content);

what am I missing... I am trying to load content into the htmlArea to let the user edit it. I see it in the textarea (hidden) but not in the rich text area... thanks in advance for any guidance!!!

jhtmlarea Discussions Rss Feed

New Post: Automatic &

New Post: Allow for Mutliple ID's and Classes when using more than one instance.

New Post: rending with width and height zero values

New Post: auto focus in iphone 6.0

New Post: Hide horizontal scroll bar

New Post: Hide horizontal scroll bar

New Post: Automatic &

New Post: problem display 'accent' on editor

New Post: How to focus a editor textarea

New Post: default jhtml font-family

New Post: drag and drop picture upload for jHtmlArea

New Post: Hide horizontal scroll bar

New Post: Selection of Font-family

New Post: HTML Area gets disabled and empty when dropped (jQuery Sortable)

New Post: Tool Bar wrapping strangely

New Post: insert html at select position

New Post: Resize Textarea Window

New Post: Selection of Font-family

New Post: Selection of Font-family

New Post: updateHtmlArea does not seem to be working for me... hel;!

New Post: Automatic
&

New Post: Automatic
&