Xinha Custom Button

Question

I am using Xinha editor as part of a custom-written CMS application for my office. I am trying to allow users to highlight a part number and click the "part" button. All I want to happen is for the selected HTML/Text to be encapsulated by <part> and </part> (this will be processed at the time of display to provide a link to a page with information on the selected part).

I am really struggling here. This is the code I have so far. I assume I'll need to find the selected text at the specific location that is selected and do a replace, but I am unable to find any documentation on how to access the HTML at the selected range.

xinha_config.btnList["part"] = [ 
    "Part Number", 
    "/xinha/images/part.png", 
    true, 
    function(e) { 
        var part = e.getSelectedHTML(); // This is the selected part number

    }
];

Answer 1

For that you have to follow the bit longer procedure.

I am giving you steps..

As you want to encapsulate the selected text in <part>

1) you need to capture parent of selected text,

2) Capture innerHTML of parent

3) Find the starting count of selected in the inner HTML let say 43

4) insert first tag <part> here at this count updated by 43 + 6(of TAG) =49 the selected text starts here.

5) Now, 49 + length of selected text lets say 12 = 49+12=61; here you will insert the closing tag </part>

and you are done with your task..

Edit, Documentation: Link

I was able to identify Config Variable List that will help,

Link 3 here you will find this xinha_config >> Format Block http://trac.xinha.org/wiki/Documentation/ConfigVariablesList#xinha_config.formatblock

Some how if you are able to add the <part> below this..

...
"Formatted": "pre",
"Part": "part"
}

that should do... as per my understanding

and other way around is custom style, this will give details of pageStyle. Using that you can customize any inbuilt tab of html.. let's say , or something else.

and customize its style to Yellow.

xinha_config.pageStyle =
  'p { color:red; }\n' +
  'h1 { color:yellow; }\n' +
  'a {text-decoration:none; }' +
  'span{background-color:yellow; }';

I hope this will help...