By mokhet

mokhet · User Discussion & Help

by default, config.flowToolbars is set to true.

And here is quoted from changeset:471 line 323, it explain a special behavior if you put a linebreak and separator next to each others, perhaps it can help you.

// Turning this on will turn all "linebreak" and "separator" items in your toolbar into soft-breaks,
// this means that if the items between that item and the next linebreak/separator can
// fit on the same line as that which came before then they will, otherwise they will
// float down to the next line.

// If you put a linebreak and separator next to each other, only the separator will
// take effect, this allows you to have one toolbar that works for both flowToolbars = true and false
// infact the toolbar below has been designed in this way, if flowToolbars is false then it will
// create explictly two lines (plus any others made by plugins) breaking at justifyleft, however if
// flowToolbars is false and your window is narrow enough then it will create more than one line
// even neater, if you resize the window the toolbars will reflow. Niiiice.

mokhet · User Discussion & Help

Prevent what to happen ?

Prevent the whole image to appear and have only the image of the button ?

I'm afraid i dont think you can prevent it.

Prevent the drag & drop from the toolbar ?

That can be done i think by tweaking a bit the mousedown, mousemove and mouseup events on the icons.

What do you want to prevent ?

mokhet · User Discussion & Help

the answer is in htmlarea.js line 561 (changeset 465)

config.hideSomeButtons(" htmlmode ");

quote from htmlarea.js comment :

/** Call this function to remove some buttons/drop-down boxes from the toolbar.
* Pass as the only parameter a string containing button/drop-down names
* delimited by spaces. Note that the string should also begin with a space
* and end with a space. Example:
*
* config.hideSomeButtons(" fontname fontsize textindicator ");
*
* It's useful because it's easier to remove stuff from the defaul toolbar than
* create a brand new toolbar ;-)
*/
HTMLArea.Config.prototype.hideSomeButtons = function(remove) {

mokhet · User Discussion & Help

hiding the select lists is one solution, but imo it's very ugly. Can be pretty confusing to have select lists appearing and disappearing on the document. The solution i think is better is to mask your element with an iframe with a lower zIndex than your element.

function mask(id_element)
{
 // mask is only needed for IE, do nothing if not IE
 // will we ever get rid of crappy IE behavior ?
 if (!HTMLArea.is_ie) { return ; }
 var element = document.getElementById(id_element);
 var iframe = document.createElement('iframe');
 var zIndex = getStyle(element, 'zIndex') - 1;
 if (isNaN(zIndex)) { zIndex = -1);
 iframe.style.zIndex = zIndex;
 iframe.style.position = 'absolute';
 iframe.style.top = findPosY(element) + 'px';
 iframe.style.left = findPosX(element) + 'px';
 iframe.style.width = element.offsetWidth;
 iframe.style.height = element.offsetHeight;
 iframe.style.overflow = 'hidden';
 iframe.style.borderWidth = '0px';
 document.body.appendChild(iframe);
}

I didnt tested this piece of code but i hope you understand the theory. Dont forget to remove the mask (the iframe) when you hide your element (your menu in your case).

But as stated by gogo, Xinha can do nothing for you here, it's a job for your menu code.

I cant believe anyone doing some javascript not having them but in case you dont have the functions getStyle, findPosX and findPosY (or any equivalent doing the job) in your common javascript toolkit, here is what i am using :

/**
 * alias for document.getElementById
 * @param {String} element ID of the HTMLElement
 * @return {HTMLElement} Return a HTMLElement reference
 */
function $(element) { return document.getElementById(element); };

/**
* Normalizes currentStyle and ComputedStyle.
* @param {String | HTMLElement} Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
* @param {String} property The style property whose value is returned.
* @return {String} The current value of the style property.
*/
function getStyle(el, property) {
  var value = null;
  var dv = document.defaultView;

  if (typeof el == 'string') { el = $(el); }

  if (property == 'opacity' && el.filters)
  { // IE opacity
    value = 1;
    try
    {
      value = el.filters.item('DXImageTransform.Microsoft.Alpha').opacity / 100;
    }
    catch(e)
    {
      try
      {
        value = el.filters.item('alpha').opacity / 100;
      } catch(e) {}
    }
  }
  else if (el.style[property])
  {
     value = el.style[property];
  }
  else if (el.currentStyle && el.currentStyle[property])
  {
     value = el.currentStyle[property];
  }
  else if ( dv && dv.getComputedStyle )
  {  // convert camelCase to hyphen-case

    var converted = '';
    for (var i=0, len=property.length; i<len; ++i)
    {
      if (property.charAt(i) == property.charAt(i).toUpperCase())
      {
        converted = converted + '-' + property.charAt(i).toLowerCase();
      }
      else
      {
        converted = converted + property.charAt(i);
      }
    }

    if (dv.getComputedStyle(el, '').getPropertyValue(converted))
    {
      value = dv.getComputedStyle(el, '').getPropertyValue(converted);
    }
  }

  return value;
};

/**
* find X position of an element
* @param {String | HTMLElement} obj Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
* @return {Number} The current X position of the object.
*/
function findPosX(obj)
{
  if (typeof obj == 'string') { obj = $(obj); }
  var curleft = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curleft += obj.offsetLeft;
      obj = obj.offsetParent;
    }
  }
  else if (obj.x)
  {
    curleft += obj.x;
  }
  return curleft;
};

/**
* find Y position of an element
* @param {String | HTMLElement} obj Accepts either a string to use as an ID for getting a DOM reference, or an actual DOM reference.
* @return {Number} The current Y position of the object.
*/
function findPosY(obj)
{
  if (typeof obj == 'string') { obj = $(obj); }
  var curtop = 0;
  if (obj.offsetParent)
  {
    while (obj.offsetParent)
    {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
  }
  else if (obj.y)
  {
    curtop += obj.y;
  }
  return curtop;
};

mokhet · User Discussion & Help

Ecco wrote:

<form style="display:inline;">. No more empty lines in the form !

display:inline will do the job if you need an inline form, but i can't find any "realistic" reason to use an inline form

form {
padding:0px;
margin:0px;
}

this is imo much better than display:inline for a form element

mokhet · User Discussion & Help

Well without more information (url, code, etc) about your problem, noone can nothing for you.

If you prefer wasting your time with a far more complicated editor, well, good luck to you then.

mokhet · User Discussion & Help

how is submited your form, using a submit button or using javascript and form.submit() ? The content of Xinha is automatically put in the textarea when you submit your form using a submit, which is not true when submiting with javascript.

I think you are doing form.submit() so is ticket #450 or eventually ticket #633 resolve your problem ?

if yes, it is bad to not search and not read through, let's say, the FAQ which would have answer to the question "How do I update the data in the editor?"
if no, can you provide a few more information about your version and if possible the url of one of your page to let us test and see what is wrong ?

mokhet · User Discussion & Help

Vik wrote:

The feature is easy to program

I can already hear gogo inviting you to submit a patch

mokhet · User Discussion & Help

Line 234, htmlarea.css

.htmlarea { border: 1px solid black; }

I can see 3 ways to remove it, probably more i dont see yet

1) dirty #1
remove the line 234 from htlmarea.css

2) dirty#2 load your own style
copy htmlarea.css to my_own.css (or any other name) where you have removed this line
and just after you have defined _editor_url, define the variable _editor_css = 'url of my_own.css';
When the variable _editor_css is set and is a string, Xinha is loading it instead of htmlarea.css (htmlarea.js line 2199 changeset #386)

HTMLArea.loadStyle(typeof _editor_css == "string" ? _editor_css : "htmlarea.css");

3) load your own css updates after htmlarea.css http://mokhet.com/xinha/examples/own_border.html
create a file name my_own.css (or any other name) with only the css update you want

.htmlarea { border:0 !important; }

and before your script initialisation, you ask Xinha to load a style

HTMLArea.loadStyle("url of my_own.css");

in the tiny example provided, i dont have removed the border but instead the border is 10px dotted red; but it is the same to remove

mokhet · User Discussion & Help

http://mokhet.com/xinha/examples/working_FF_beta.html

I am using xinha with FF 1.5b1 and now b2 and I *never* have any problems at all.

Though i'm not using the way proposed by the example. The page is using changeset 385, but i'm using Xinha this way since changeset #58 and never have any problems. So i think the bug is not in Xinha neither in FF (any version) but somewhere in the example.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="fr">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<meta name="title" lang="fr" content="Xinha FF1.5b2">
<title>Xinha FF1.5b2</title>

<script type="text/javascript">
_editor_url = "/xinha/";
_editor_lang = "fr";
_editor_skin = "blue-look";
</script>
<script type="text/javascript" src="/xinha/htmlarea.js"></script>

<script type="text/javascript">
HTMLArea.loadPlugin("FullScreen");
HTMLArea.loadPlugin("CharacterMap");
HTMLArea.loadPlugin("ContextMenu");
HTMLArea.loadPlugin("ListType");
HTMLArea.loadPlugin("TableOperations");
HTMLArea.loadPlugin("InsertAnchor");
HTMLArea.loadPlugin("FindReplace");
HTMLArea.loadPlugin("CharCounter");
HTMLArea.loadPlugin("SuperClean");
HTMLArea.loadPlugin("SpellChecker");
HTMLArea.loadPlugin("ImageManager");
HTMLArea.loadPlugin("Linker");
</script>

</head>

<body>

<form  method="post" action="#" onsubmit="return false">

<textarea id="p_ed0" name="AIERP-page-pag_contenu" style="margin:0;padding:0;border:0;" cols="80" rows="20"></textarea>

<script type="text/javascript">
function inited0() {
  var ed0 = new HTMLArea("p_ed0");
//ed0.config.ImageManager.backend = "/js/ImageManager/manager.php?";
ed0.config.statusBar = true;
//ed0.config.pageStyleSheets = ["/css/all.css"];
ed0.config.toolbar = [['separator','popupeditor','htmlmode','textindicator'],['separator','formatblock','forecolor','bold','italic','underline','strikethrough','killword'],['separator','justifyleft','justifycenter','justifyright','justifyfull'],['separator','subscript','superscript'],['separator','insertorderedlist','insertunorderedlist','outdent','indent'],['separator','createlink','insertimage','inserttable','toggleborders']];
ed0.config.width = '550px';
ed0.config.height = '350px';
ed0.config.SpellChecker.defaultDictionary = 'fr';
//ed0.config.Linker.backend = '/js/Linker/scanpages.php';
ed0.registerPlugin("FullScreen");
ed0.registerPlugin("CharacterMap");
ed0.registerPlugin("ContextMenu");
ed0.registerPlugin("ListType");
ed0.registerPlugin("TableOperations");
ed0.registerPlugin("InsertAnchor");
ed0.registerPlugin("FindReplace");
ed0.registerPlugin("CharCounter");
ed0.registerPlugin("SuperClean");
ed0.registerPlugin("SpellChecker");
//ed0.registerPlugin("ImageManager");
ed0.registerPlugin("Linker");
ed0.generate();
return false;
}
HTMLArea._addEvent(window, 'load', inited0);
</script>

<input type="submit" value="Valider"><input type="reset">
</form>


</body>
</html>

mokhet · User Discussion & Help

Humm, here the full_example is working just fine with FF 1.0.7 win and 1.0.6 linux.

Can you give us the error message you obtain and the user agent you are using ? The full_example is known to be not working with YET with FF 1.5 beta 1. I think it is because of the way plugins are initialized, i suspect the full example trying to go too quick and then failing in FF1.5b1.

Is the full_example is working when you use no plugin at all ?

try to change your _editor_url from "http://localhost/matrizdeconocimientos/js/Xinha/" to

_editor_url = "/matrizdeconocimientos/js/Xinha/";

mokhet · User Discussion & Help

If you have followed the NewbieGuide you may have a javascript variable named xinha_editor, let's assume you have it.

Now, let's say the textarea you have transformed was named myprettyarea

<form>
<textarea name="myprettyarea" id="myprettyarea">
</form>

In this case, you can use the javascript variable xinha_editor.myprettyarea. Which means, you can simply do this kind of thing :

<a href="#" onclick="xinha_editor.myprettyarea.setMode(); return false;">Toggle HTML and WYSIWYG</a><br>
<a href="#" onclick="xinha_editor.myprettyarea.setMode('text'); return false;">Set HTML mode</a><br>
<a href="#" onclick="xinha_editor.myprettyarea.setMode('wysiwyg'); return false;">Set WYSIWYG mode</a>

mokhet · User Discussion & Help

As for CharacterMap, i have integrate this panel version to the actual one, changeset 314, and you can change the way the plugin use it by setting the configuration variable to 'panel'

to use the panel

xinha_config.ListType.mode = 'panel'

to use the old selectbox in the toolbar, that is the default setting

xinha_config.ListType.mode = 'toolbar'

Damn, i should have read the forum before commiting 314.

Can you tell me if there is still the problem you have find with the changeset 315 ? I have made my tests and i cant make it occurs again.

It was caused by this code

  var courant = this.editor.getParentElement();
  var parent = courant;
  if ( ( courant.tagName.toLowerCase() == 'li' ) && ( typeof courant.parentNode != 'undefined' ) )
   parent = courant.parentNode;
  if ( ( parent.tagName.toLowerCase() == 'ul' ) || ( parent.tagName.toLowerCase() == 'ol' ) )

which i have changed to

  var parent = editor.getParentElement();
  while ( parent && !/^[o|u]l$/i.test( parent.tagName ) )
    parent = parent.parentNode;
  if (parent)

sorry for the mess

mokhet · User Discussion & Help

as suggested by gogo, i have integrate this version to the existing plugin in changeset 313

to use the panel representation, you have to set the configuration variable to 'panel'

to use the panel

xinha_config.CharacterMap.mode = 'panel'

to use the old popup, that is the default setting

xinha_config.CharacterMap.mode = 'popup'

mokhet · User Discussion & Help

I'm wondering if anyone got a solution to load custom style in the panel from a plugin ?

Ok, i finally found out how to do it, it was too simple

HTMLArea.loadStyle('filename.css', 'plugin_name');

mokhet · User Discussion & Help

Hi,

The ListType plugin is nice but i hated the selectbox in the toolbar, so i made mine (TypeList) from scratch using the panels.
It is using images you can find at http://mokhet.com/xinha_TypeList_img.zip

Basically, onUpdateToolbar the plugin is looking for the actuel parent selection and determine if we have a OL or UL parent. If so, it is opening the panel and display the listStyleType available for the actual parent (none, disc, circle and square for UL elements and none, decimal, lower-alpha, upper-alpha, lower-roman and upper-roman for OL elements)

function TypeList(editor) {
  this.editor = editor;
    var self = this;

  editor._typeList = editor.addPanel('right');
  HTMLArea.freeLater(editor, '_typeList');
  HTMLArea.addClass(editor._typeList, 'TypeList');
  HTMLArea.addClass(editor._typeList.parentNode, 'dialog');

  editor.notifyOn('modechange',
    function(e,args) {
      if (args.mode == 'text') editor.hidePanel(editor._typeList);
    }
  );

  var elts_ul = ['disc', 'circle', 'square', 'none'];
  var elts_ol = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman', 'none'];
  var div = document.createElement('div');
  div.id = 'TLdivUL';
  div.style.display = 'none';
  for (var i=0; i<elts_ul.length; i++) {
    div.appendChild(this.createImage(elts_ul[i]));
  }
  editor._typeList.appendChild(div);
  var div = document.createElement('div');
  div.id = 'TLdivOL';
  div.style.display = 'none';
  for (var i=0; i<elts_ol.length; i++) {
    div.appendChild(this.createImage(elts_ol[i]));
  }
  editor._typeList.appendChild(div);

  editor.hidePanel(editor._typeList);
};

TypeList._pluginInfo = {
    name          : "TypeList",
    version       : "0.1",
    developer     : "Laurent Vilday",
    developer_url : "http://www.mokhet.com/",
    c_owner       : "Xinha community",
    sponsor       : "",
    sponsor_url   : "",
    license       : "Creative Commons Attribution-ShareAlike License"
};

TypeList.prototype.onUpdateToolbar = function() {
  var courant = this.editor.getParentElement();
  var parent = courant;
    if ((courant.tagName.toLowerCase() == 'li') && (typeof courant.parentNode != 'undefined')) {
     parent = courant.parentNode;
    }
    if ((parent.tagName.toLowerCase() == 'ul') || (parent.tagName.toLowerCase() == 'ol')) {
       this.showPanel(parent);
    } else {
    this.editor.hidePanel(this.editor._typeList);
    }
};

TypeList.prototype.createImage = function(listStyleType) {
  var self = this;
  var editor = this.editor;
  var img = document.createElement('img');
  img.src = _editor_url + 'plugins/TypeList/img/' + listStyleType + '.png';
  img.style.marginTop = '2px';
  img.style.marginLeft = '5px';
  img.style.marginRight = '0';
  img.style.marginBottom = '0';
  img.style.borderWidth = '1px';
  img.style.borderStyle = 'solid';
  img.style.cursor = 'pointer';
  img._listStyleType = listStyleType;
  HTMLArea.freeLater(img, '_listStyleType');
  img.style.borderColor = '#9C96A5';
  HTMLArea._addEvent(img, "click", function () {
    var parent = editor._typeList.currentTypeListParent;
    parent.style.listStyleType = listStyleType;
    self.showActive(parent);
  });

  return img;
};

TypeList.prototype.showActive = function(parent) {
  var activeDiv = document.getElementById((parent.tagName.toLowerCase() == 'ul')? 'TLdivUL':'TLdivOL');
  document.getElementById('TLdivUL').style.display = 'none';
  document.getElementById('TLdivOL').style.display = 'none';
  activeDiv.style.display = 'block';
  var defaultType = parent.style.listStyleType;
  if ('' == defaultType) defaultType = (parent.tagName.toLowerCase() == 'ul')? 'disc':'decimal';
  for (var i=0; i<activeDiv.childNodes.length; i++) {
    var elt = activeDiv.childNodes[i];
    if (elt._listStyleType == defaultType) {
      elt.style.borderColor = '#000084';
    } else {
      elt.style.borderColor = '#9C96A5';
    }
  }
}

TypeList.prototype.showPanel = function(parent) {
  this.editor._typeList.currentTypeListParent = parent;
  this.showActive(parent);
  this.editor.showPanel(this.editor._typeList);
};

mokhet · User Discussion & Help

Making another panel version of a plugin (ListType), i found out that the test to find if the panel is active or not is not enough because if another plugin has open a panel at same position it can then never open the character map panel. So i made some little changes

1) add a boolean flag to know if the CM panel is shown or not

CharacterMap._isActive = false;

2) test this flag to open/close the panel

CharacterMap.prototype.buttonPress = function(editor) {
  if (this._isActive) {
    this._isActive = false;
    editor.hidePanel(editor._characterMap);
  } else {
    this._isActive = true;
    editor.showPanel(editor._characterMap);
  }
};

It is working as intended, but i still wonder if it is a good or bad solution. Panels are still very mysticals for me

Here is the new version i'm using

function CharacterMap(editor) {
  this.editor = editor;
    var cfg = editor.config;
    var self = this;
  cfg.registerButton({
    id       : "insertcharacter",
    tooltip  : HTMLArea._lc("Insert special character", 'CharacterMap'),
    image    : editor.imgURL("ed_charmap.gif", "CharacterMap"),
    textMode : false,
    action   : function(editor) { self.buttonPress(editor); }
  });
    cfg.addToolbarElement("insertcharacter", "createlink", -1);

  editor._characterMap = editor.addPanel('right');
  HTMLArea.addClass(editor._characterMap, 'CharacterMap');

  editor.notifyOn('modechange',
    function(e,args) {
      if (args.mode == 'text') editor.hidePanel(editor._characterMap);
    }
  );

  var entites = [
    '&Yuml;', '&scaron;', '@', '"', '¡', '¢', '£', '¤', '¥', '¦',
    '§', '¨', '©', 'ª', '«', '¬', '¯', '°', '±', '²',
    '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»', '¼',
    '½', '¾', '¿', '×', 'Ø', '÷', 'ø', '&fnof;', '&circ;',
    '&tilde;', '&ndash;', '&mdash;', '&lsquo;', '&rsquo;', '&sbquo;', '&ldquo;', '&rdquo;', '&bdquo;',
    '&dagger;', '&Dagger;', '&bull;', '&hellip;', '&permil;', '&lsaquo;', '&rsaquo;', '&euro;', '&trade;',
    'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È',
    'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ',
    'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '®', '×', 'Ù', 'Ú',
    'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã',
    'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì',
    'í', 'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ',
    'ö', '÷', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ',
    'ÿ', '&OElig;', '&oelig;', '&Scaron;'
  ];

  for (var i=0; i<entites.length; i++)
    this.addEntity(entites[i], i);

  editor.hidePanel(editor._characterMap);
};

CharacterMap._pluginInfo = {
    name          : "CharacterMap",
    version       : "0.2",
    developer     : "Laurent Vilday",
    developer_url : "http://www.mokhet.com/",
    c_owner       : "Xinha community",
    sponsor       : "",
    sponsor_url   : "",
    license       : "Creative Commons Attribution-ShareAlike License"
};

CharacterMap._isActive = false;

CharacterMap.prototype.buttonPress = function(editor) {
  if (this._isActive) {
    this._isActive = false;
    editor.hidePanel(editor._characterMap);
  } else {
    this._isActive = true;
    editor.showPanel(editor._characterMap);
  }
};

CharacterMap.prototype.addEntity = function (entite, pos) {
  editor = this.editor;
  var self = this;
  var anch = document.createElement('a');
  anch.innerHTML = entite;
  anch.style.fontSize = '12px';
  anch.href = 'javascript:void(0)';
  anch.style.width = "18px";
  anch.style.display = 'block';
  if (typeof anch.style.styleFloat != 'undefined') {
    anch.style.styleFloat = 'left'; // IE version :(
  } else {
    anch.style.cssFloat = 'left'; // gecko
  }
  anch.style.padding = '2px';
  anch.style.textDecoration = 'none';
  anch.style.backgroundColor = (pos%2)? '#ffffff':'#f7f8fd';
  anch.style.color = '#000000';
  anch.style.textAlign = 'center';
  anch.onclick = function() {
    if (HTMLArea.is_ie) editor.focusEditor();
    editor.insertHTML( entite );
    self._isActive = false;
    editor.hidePanel(editor._characterMap);
    return false;
  };
  anch.onmouseover = function() {
    anch.style.backgroundColor = '#ffd760';
    return false;
  };
  anch.onmouseout = function() {
    anch.style.backgroundColor = (pos%2)? '#ffffff':'#f7f8fd';
    return false;
  };
  editor._characterMap.appendChild(anch);
};

mokhet · User Discussion & Help

PSPad when i'm using windows. http://www.pspad.com/

But Quanta is definitly my best friend, even if i dont use the half of the features used by Niko Quanta is a great argue to give up windows.

As for the win32 portage of Quanta, a few months ago Andras Mantia and Eric Laffoon was saying they will not take part of any win32 portage. They encourage it, but they had (and still have hehe) enough work with the linux version.

mokhet · User Discussion & Help

CharacterMap.prototype.buttonPress = function(editor) {
  if (editor._panels.right.container.style.display == 'none') {
    editor.showPanel(editor._characterMap);
  } else {
    editor.hidePanel(editor._characterMap);
  }
}

Is this a correct way to know if the panel is visible or hidden ? i use it to switch on/off the visibility of the panel, but i think a better way may exist even if i was not able to find it.

mokhet · User Discussion & Help

Hi, I have created a panel version of the CharacterMap plugin and I'm wondering if anyone got a solution to load custom style in the panel from a plugin ?

I mean, i apply a className to the panel with

  HTMLArea.addClass(editor._characterMap, 'CharacterMap');

how can i then make xinha panels understand i want to use the following style declaration ?

.panels .CharacterMap a.entity {  }
.panels .CharacterMap a.entity:hover {  }

I couldnt find a way, so i end up using some javascript to set the style, but being able to use a className would be less pain

The only topic i could find to answer my question is http://xinha.gogo.co.nz/punbb/viewtopic.php?id=57 but unfortunatly, there's no solution or i wasnt able to understand it.

Here is the version i made

function CharacterMap(editor) {
  this.editor = editor;
  var cfg = editor.config;
  var self = this;
  cfg.registerButton({
    id       : "insertcharacter",
    tooltip  : HTMLArea._lc("Insert special character", 'CharacterMap'),
    image    : editor.imgURL("ed_charmap.gif", "CharacterMap"),
    textMode : false,
    action   : function(editor) { self.buttonPress(editor); }
  });
  cfg.addToolbarElement("insertcharacter", "insertlink", -1);

  editor._characterMap = editor.addPanel('right');
  HTMLArea.addClass(editor._characterMap, 'CharacterMap');

  editor.notifyOn('modechange',
    function(e,args) {
      if (args.mode == 'text') editor.hidePanel(editor._characterMap);
    }
  );

  var entites = [
    '&Yuml;', '&scaron;', '@', '"', '¡', '¢', '£', '¤', '¥', '¦',
    '§', '¨', '©', 'ª', '«', '¬', '¯', '°', '±', '²',
    '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»', '¼',
    '½', '¾', '¿', '×', 'Ø', '÷', 'ø', '&fnof;', '&circ;',
    '&tilde;', '&ndash;', '&mdash;', '&lsquo;', '&rsquo;', '&sbquo;', '&ldquo;', '&rdquo;', '&bdquo;',
    '&dagger;', '&Dagger;', '&bull;', '&hellip;', '&permil;', '&lsaquo;', '&rsaquo;', '&euro;', '&trade;',
    'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È',
    'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ',
    'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '®', '×', 'Ù', 'Ú',
    'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã',
    'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì',
    'í', 'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ',
    'ö', '÷', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ',
    'ÿ', '&OElig;', '&oelig;', '&Scaron;'
  ];

  for (var i=0; i<entites.length; i++)
    this.addEntity(entites[i], i);
};

CharacterMap._pluginInfo = {
  name          : "CharacterMap",
  version       : "0.1",
  developer     : "Laurent Vilday",
  developer_url : "http://www.mokhet.com/",
  c_owner       : "Xinha community",
  sponsor       : "",
  sponsor_url   : "",
  license       : "Creative Commons Attribution-ShareAlike License"
};

CharacterMap.prototype.buttonPress = function(editor) {
  if (editor._panels.right.container.style.display == 'none') {
    editor.showPanel(editor._characterMap);
  } else {
    editor.hidePanel(editor._characterMap);
  }
}

CharacterMap.prototype.addEntity = function (entite, pos) {
  editor = this.editor;
  var anch = document.createElement('a');
  anch.innerHTML = entite;
  anch.style.fontSize = '12px';
  anch.href = 'javascript:void(0)';
  anch.style.width = "18px";
  anch.style.display = 'block';
  anch.style.cssFloat = 'left';
  anch.style.padding = '2px';
  anch.style.textDecoration = 'none';
  anch.style.backgroundColor = (pos%2)? '#ffffff':'#f7f8fd';
  anch.style.color = '#000000';
  anch.style.textAlign = 'center';
  anch.onclick = function() {
    if (HTMLArea.is_ie) editor.focusEditor();
    editor.insertHTML( entite );
    editor.hidePanel(editor._characterMap);
  };
  editor._characterMap.appendChild(anch);
}

I could not find any other name than CharacterMap and since i use this one and not the original popup one, the conflict name was not a pain for me, sorry if it's of any trouble for someone. Of course, everyone is allowed to do anything with this little plugin

grrr, the & #064; (the third character) keep being changed to @ grrr grrr grr

mokhet · User Discussion & Help

http://xinha.python-hosting.com/ticket/364

mokhet · User Discussion & Help

I too have this bug occuring sometimes with no apparent reason. No errors/exceptions in console.
This happens only with my FF (1.04) win2K configuration, never happens with my FF (1.02-1.06) linux configuration. Perhaps it's a FF bug when used with windows (and perhaps only win2K, dont have much xinha experience with FF and win XP configuration). Sorry i cant give more information unfortunatly right now.

mokhet · User Discussion & Help

embed is not a valid tag at all, is there any reason to use it ? What is happening with a valid markup ?

http://www.alistapart.com/articles/flashsatay/
http://www.w3.org/TR/html4/struct/objects.html

mokhet · User Discussion & Help

Can you provide an url please ? I have tried to run the full_example.html in "http://www.webbert.org/admin/xinha/exam … ample.html" because it is the url you set in _editor_url, but nothing seems there.

mokhet · User Discussion & Help

any url ? Xinha is running on client side, means that the HTML content, of the page you are trying to runs with Xinha, needs to be known

Xinha Discussion Forum

Announcement

#26 Re: User Discussion & Help » "linebreak" in toolbar not working? » 2006-03-15 11:07:22

#27 Re: User Discussion & Help » Buttons Drag and Drop » 2006-03-15 10:59:02

#28 Re: User Discussion & Help » disabling a feature (Toggle HTML source button) » 2006-02-15 09:06:21

#29 Re: User Discussion & Help » xinha is hiding the css menu » 2006-02-15 08:57:55

#30 Re: User Discussion & Help » POST textarea vars not populated » 2006-02-08 11:09:43

#31 Re: User Discussion & Help » POST textarea vars not populated » 2006-01-19 15:03:30

#32 Re: User Discussion & Help » POST textarea vars not populated » 2006-01-19 01:02:35

#33 Re: User Discussion & Help » Changing Case (Upper to Lower, etc.)? » 2005-12-08 20:36:54

#34 Re: User Discussion & Help » Changing default CSS? » 2005-10-20 10:27:01

#35 Re: User Discussion & Help » Xinha Broken in Firefox Nightly » 2005-10-14 08:28:13

#36 Re: User Discussion & Help » HTMLArea in not defined ERROR » 2005-09-29 12:27:40

#37 Re: User Discussion & Help » How to make "Toggle HTML source" out side of the pannel? » 2005-09-14 06:59:53

#38 Re: User Discussion & Help » Panel TypeList plugin - a new ListType » 2005-09-11 14:13:34

#39 Re: User Discussion & Help » Panel CharacterMap and styling question for panel components » 2005-09-11 13:56:16

#40 Re: User Discussion & Help » Panel CharacterMap and styling question for panel components » 2005-09-11 09:55:46

#41 User Discussion & Help » Panel TypeList plugin - a new ListType » 2005-09-10 13:20:17

#42 Re: User Discussion & Help » Panel CharacterMap and styling question for panel components » 2005-09-10 12:47:54

#43 Re: User Discussion & Help » Quick question - What text editor do you use? » 2005-09-03 20:49:52

#44 Re: User Discussion & Help » Panel CharacterMap and styling question for panel components » 2005-09-03 05:40:43

#45 User Discussion & Help » Panel CharacterMap and styling question for panel components » 2005-09-03 05:36:58

#46 Re: User Discussion & Help » Colorpicker in FullPage plugin » 2005-08-16 19:07:08

#47 Re: User Discussion & Help » An Old Bug, Returns :( » 2005-08-16 19:02:22

#48 Re: User Discussion & Help » Embedding Flash » 2005-08-10 17:39:21

#49 Re: User Discussion & Help » Spellchecker not defined » 2005-08-04 19:29:22

#50 Re: User Discussion & Help » Trouble getting xinha to work with coldfusion. » 2005-08-04 19:24:35

Board footer