Forums

Hi there,

i was try to find out how to to integrate a wysiwyg editor like JCE into chronoforms.
I found the following code

<?php
$editor =& JFactory::getEditor();
echo $editor->display( 'text_1', '{text_1}', '100%', '200', '75', '10', false);
?>

But it was not really what i am looking for. One thing is i cant mark it as a required field.

So i was searching for BB Codes in Chronoforms, witch would be a great alternative to an editor.

This is a simple "How To" to integrate "BB Codes" into Chronoforms textareas.

At http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/ i found this code:

function insert(aTag, eTag) {
  var input = document.forms['your-form-name'].elements['your-textarea-name'];
  input.focus();
  /* für Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfügen des Formatierungscodes */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* für neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfügen des Formatierungscodes */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* für die übrigen Browser */
  else
  {
    /* Abfrage der Einfügeposition */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Einfügen des Formatierungscodes */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}

Copy this code: Go to the "Events tab", drag and drop the "Load JS" field into "On Load" and insert the code.
What you need to change is replace "your-form-name" and "your-textarea-name" with your own.

Now switch to the "Preview tab" and add a "custom field" to your form.
Here you can write any BB Code!

For example:

<input class="bbcode bold" type="button" value="bold" onClick="insert('<strong>', '<\/strong>')">
<input class="bbcode italic" type="button" value="italic" onClick="insert('<em>', '<\/em>')">

Thats it!

Sry, i cant tell you anythink about the code, cause i am not conversant in javascript. I just know: It works!🙂

Hi tobisagt,

Neat, thank you.

Bob