API Preview tool | The Dojo Toolkit

dojox/editor/plugins/InsertAnchor.js

Provides:
- dojox.editor.plugins.InsertAnchor

dojox.editor.plugins.InsertAnchor

type
```
Function
```
chains:
- dijit._editor._Plugin: (prototype)
- dijit._editor._Plugin: (call)

summary

This plugin provides the basis for an insert anchor dialog for the
dijit.Editor

description

The command provided by this plugin is:
* insertAnchor

dojox.editor.plugins.InsertAnchor.htmlTemplate

tags: protected
type
```
String
```

summary

String used for templating the HTML to insert at the desired point.

dojox.editor.plugins.InsertAnchor.iconClassPrefix
- tags: const
- type
```
String
```
- summary
```
The CSS class name for the button node icon.
```
dojox.editor.plugins.InsertAnchor._template
- summary

dojox.editor.plugins.InsertAnchor._initButton

type
```
Function
```

source: [view]

define("dojox/editor/plugins/InsertAnchor", ["dojo", "dijit", "dojox", "dojo/string", "dijit/_Widget", "dijit/_editor/range", "dijit/_Templated", "dijit/TooltipDialog", "dijit/form/ValidationTextBox", "dijit/form/Select", "dijit/_editor/_Plugin", "dijit/form/Button", "dojox/editor/plugins/ToolbarLineBreak", "dojo/i18n", "i18n!dojox/editor/plugins/nls/InsertAnchor", "i18n!dijit/nls/common"], function(dojo, dijit, dojox) {

dojo.declare("dojox.editor.plugins.InsertAnchor", dijit._editor._Plugin, {
// summary:
//  This plugin provides the basis for an insert anchor dialog for the
//  dijit.Editor
//
// description:
//  The command provided by this plugin is:
//  * insertAnchor

// htmlTemplate: [protected] String
//  String used for templating the HTML to insert at the desired point.
htmlTemplate: "${textInput}",

// iconClassPrefix: [const] String
//  The CSS class name for the button node icon.
iconClassPrefix: "dijitAdditionalEditorIcon",

// linkDialogTemplate: [private] String
//  Template for contents of TooltipDialog to pick URL
_template: [
  "",
  "

", "${anchor}", "	", " "id='${id}_anchorInput' name='anchorInput' intermediateChanges='true'>", "
", "${text}", "	", " "name='textInput' intermediateChanges='true'>", "
", "", "", "

"
].join(""),

_initButton: function(){
  // Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog.
  var _this = this;
  var messages = dojo.i18n.getLocalization("dojox.editor.plugins", "InsertAnchor", this.lang);

  // Build the dropdown dialog we'll use for the button
  var dropDown = (this.dropDown = new dijit.TooltipDialog({
   title: messages["title"],
   execute: dojo.hitch(this, "setValue"),
   onOpen: function(){
    _this._onOpenDialog();
    dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
   },
   onCancel: function(){
    setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
   }
  }));

  this.button = new dijit.form.DropDownButton({
   label: messages["insertAnchor"],
   showLabel: false,
   iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "InsertAnchor",
   tabIndex: "-1",
   dropDown: this.dropDown
  });

  messages.id = dijit.getUniqueId(this.editor.id);
  this._uniqueId = messages.id;

  this.dropDown.set('content', dropDown.title +
   "

" +
   dojo.string.substitute(this._template, messages));

  dropDown.startup();
  this._anchorInput = dijit.byId(this._uniqueId + "_anchorInput");
  this._textInput = dijit.byId(this._uniqueId + "_textInput");
  this._setButton = dijit.byId(this._uniqueId + "_setButton");
  this.connect(dijit.byId(this._uniqueId + "_cancelButton"), "onClick", function(){
   this.dropDown.onCancel();
  });

  if(this._anchorInput){
   this.connect(this._anchorInput, "onChange", "_checkInput");
  }
  if(this._textInput){
   this.connect(this._anchorInput, "onChange", "_checkInput");
  }

  //Register some filters to handle setting/removing the class tags on anchors.
  this.editor.contentDomPreFilters.push(dojo.hitch(this, this._preDomFilter));
  this.editor.contentDomPostFilters.push(dojo.hitch(this, this._postDomFilter));
  this._setup();

chains:
- dijit.TooltipDialog.prototype.onOpen: (call)
summary

dojox.editor.plugins.InsertAnchor.updateState
- type
```
Function
```
- source: [view]
  this.button.set("disabled", this.get("disabled"));
- summary
```
Over-ride for button state control for disabled to work.
```
dojox.editor.plugins.InsertAnchor.setEditor
- type
```
Function
```
- parameters:
  - editor: (typeof Object)
```
The editor to configure for this plugin to use.
```
- source: [view]
  this.editor = editor;
  this._initButton();
- summary
```
Over-ride for the setting of the editor.
```
dojox.editor.plugins.InsertAnchor._checkInput
- type
```
Function
```
- source: [view]
    var disable = true;
    if(this._anchorInput.isValid()){
     disable = false;
    }
    this._setButton.set("disabled", disable);
- summary
```
Function to check the input to the dialog is valid
and enable/disable set button
```
- tags:
dojox.editor.plugins.InsertAnchor._setup
- type
```
Function
```
- source: [view]
    this.editor.onLoadDeferred.addCallback(dojo.hitch(this, function(){
     this.connect(this.editor.editNode, "ondblclick", this._onDblClick);
     setTimeout(dojo.hitch(this, function() {
      this._applyStyles();
     }), 100);
    }));
- summary
```
Over-ridable function that connects tag specific events.
```
dojox.editor.plugins.InsertAnchor.getAnchorStyle
- type
```
Function
```
- source: [view]
    var style = "@media screen {\n" +
      "\t.dijitEditorPluginInsertAnchorStyle {\n" +
      "\t\tbackground-image: url({MODURL}/images/anchor.gif);\n" +
      "\t\tbackground-repeat: no-repeat;\n" +
      "\t\tbackground-position: top left;\n" +
      "\t\tborder-width: 1px;\n" +
      "\t\tborder-style: dashed;\n" +
      "\t\tborder-color: #D0D0D0;\n" +
       "\t\tpadding-left: 20px;\n" +
     "\t}\n" +
    "}\n";
  
    //Finally associate in the image locations based off the module url.
    var modurl = dojo.moduleUrl(dojox._scopeName, "editor/plugins/resources").toString();
    if(!(modurl.match(/^https?:\/\//i)) &&
     !(modurl.match(/^file:\/\//i))){
     // We have to root it to the page location on webkit for some nutball reason.
     // Probably has to do with how iframe was loaded.
     var bUrl;
     if(modurl.charAt(0) === "/"){
      //Absolute path on the server, so lets handle...
      var proto = dojo.doc.location.protocol;
      var hostn = dojo.doc.location.host;
      bUrl = proto + "//" + hostn;
     }else{
      bUrl = this._calcBaseUrl(dojo.global.location.href);
     }
     if(bUrl[bUrl.length - 1] !== "/" && modurl.charAt(0) !== "/"){
      bUrl += "/";
     }
     modurl = bUrl + modurl;
    }
    return style.replace(/\{MODURL\}/gi, modurl);
- summary
```
Over-ridable function for getting the style to apply to the anchor.
The default is a dashed border with an anchor symbol.
```
- tags:
dojox.editor.plugins.InsertAnchor._applyStyles
- type
```
Function
```
- source: [view]
    if(!this._styled){
     try{
      //Attempt to inject our specialized style rules for doing this.
      this._styled = true;
      var doc = this.editor.document;
      var style = this.getAnchorStyle();
      if(!dojo.isIE){
       var sNode = doc.createElement("style");
       sNode.appendChild(doc.createTextNode(style));
       doc.getElementsByTagName("head")[0].appendChild(sNode);
      }else{
       var ss = doc.createStyleSheet("");
       ss.cssText = style;
      }
      }catch(e){ /* Squelch */ }
     }
- summary
```
Function to apply a style to inserted anchor tags so that
they are obviously anchors.
```
dojox.editor.plugins.InsertAnchor._calcBaseUrl
- type
```
Function
```
- parameters:
  - fullUrl: (typeof String)
```
The full url to tear down to the base.
```
- source: [view]
    var baseUrl = null;
    if (fullUrl !== null) {
     // Check to see if we need to strip off any query parameters from the Url.
     var index = fullUrl.indexOf("?");
     if (index != -1) {
      fullUrl = fullUrl.substring(0,index);
     }
  
     // Now we need to trim if necessary. If it ends in /, then we don't
     // have a filename to trim off so we can return.
     index = fullUrl.lastIndexOf("/");
     if (index > 0 && index < fullUrl.length) {
      baseUrl = fullUrl.substring(0,index);
     }else{
      baseUrl = fullUrl;
     }
    }
    return baseUrl; //String
- summary
```
Internal function used to figure out the full root url (no relatives)
for loading images in the styles in the iframe.
```
- tags:
- returns
```
String
```
dojox.editor.plugins.InsertAnchor._checkValues
- type
```
Function
```
- parameters:
  - args: (typeof Object)
```
Content being set.
```
- source: [view]
    if(args){
     if(args.anchorInput){
      args.anchorInput = args.anchorInput.replace(/"/g, """);
     }
     if(!args.textInput){
      // WebKit doesn't work with double-click select unless there's
      // a space in the anchor text, so put a in the case of
      // empty desc.
      args.textInput = " ";
     }
    }
    return args;
- summary
```
Function to check the values in args and 'fix' them up as needed.
```
- tags:
dojox.editor.plugins.InsertAnchor.setValue
- type
```
Function
```
- parameters:
  - args: (typeof )
- source: [view]
    this._onCloseDialog();
    if(!this.editor.window.getSelection){
     // IE check without using user agent string.
     var sel = dijit.range.getSelection(this.editor.window);
     var range = sel.getRangeAt(0);
     var a = range.endContainer;
     if(a.nodeType === 3){
      // Text node, may be the link contents, so check parent.
      // This plugin doesn't really support nested HTML elements
      // in the link, it assumes all link content is text.
      a = a.parentNode;
     }
     if(a && (a.nodeName && a.nodeName.toLowerCase() !== "a")){
      // Stll nothing, one last thing to try on IE, as it might be 'img'
      // and thus considered a control.
      a = dojo.withGlobal(this.editor.window,
       "getSelectedElement", dijit._editor.selection, ["a"]);
     }
     if(a && (a.nodeName && a.nodeName.toLowerCase() === "a")){
      // Okay, we do have a match. IE, for some reason, sometimes pastes before
      // instead of removing the targetted paste-over element, so we unlink the
      // old one first. If we do not the tag remains, but it has no content,
      // so isn't readily visible (but is wrong for the action).
      if(this.editor.queryCommandEnabled("unlink")){
       // Select all the link childent, then unlink. The following insert will
       // then replace the selected text.
       dojo.withGlobal(this.editor.window,
        "selectElementChildren", dijit._editor.selection, [a]);
       this.editor.execCommand("unlink");
      }
     }
    }
    // make sure values are properly escaped, etc.
    args = this._checkValues(args);
    this.editor.execCommand('inserthtml',
     dojo.string.substitute(this.htmlTemplate, args));
- summary
```
Callback from the dialog when user presses &quot;set&quot; button.
```
- tags:
dojox.editor.plugins.InsertAnchor._onCloseDialog
- source: [view]
  this.editor.focus();
- summary
```
Handler for close event on the dialog
```
dojox.editor.plugins.InsertAnchor._getCurrentValues
- type
```
Function
```
- parameters:
  - a: (typeof The)
```
anchor/link to process for data for the dropdown.
```
- source: [view]
    var anchor, text;
    if(a && a.tagName.toLowerCase() === "a" && dojo.attr(a, "name")){
     anchor = dojo.attr(a, "name");
     text = a.textContent || a.innerText;
     dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a, true]);
    }else{
     text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText);
    }
    return {anchorInput: anchor || '', textInput: text || ''}; //Object;
- summary
```
Over-ride for getting the values to set in the dropdown.
```
- tags:
- returns
```
Object;
```
dojox.editor.plugins.InsertAnchor._onOpenDialog
- type
```
Function
```
- source: [view]
    var a;
    if(!this.editor.window.getSelection){
     // IE is difficult to select the element in, using the range unified
     // API seems to work reasonably well.
     var sel = dijit.range.getSelection(this.editor.window);
     var range = sel.getRangeAt(0);
     a = range.endContainer;
     if(a.nodeType === 3){
      // Text node, may be the link contents, so check parent.
      // This plugin doesn't really support nested HTML elements
      // in the link, it assumes all link content is text.
      a = a.parentNode;
     }
     if(a && (a.nodeName && a.nodeName.toLowerCase() !== "a")){
      // Stll nothing, one last thing to try on IE, as it might be 'img'
      // and thus considered a control.
      a = dojo.withGlobal(this.editor.window,
       "getSelectedElement", dijit._editor.selection, ["a"]);
     }
    }else{
     a = dojo.withGlobal(this.editor.window,
      "getAncestorElement", dijit._editor.selection, ["a"]);
    }
    this.dropDown.reset();
    this._setButton.set("disabled", true);
    this.dropDown.set("value", this._getCurrentValues(a));
- summary
```
Handler for when the dialog is opened.
If the caret is currently in a URL then populate the URL's info into the dialog.
```
dojox.editor.plugins.InsertAnchor._onDblClick
- type
```
Function
```
- parameters:
  - e: (typeof Object)
```
The double-click event.
```
- source: [view]
    if(e && e.target){
     var t = e.target;
     var tg = t.tagName? t.tagName.toLowerCase() : "";
     if(tg === "a" && dojo.attr(t, "name")){
      this.editor.onDisplayChanged();
      dojo.withGlobal(this.editor.window,
        "selectElement",
        dijit._editor.selection, [t]);
      setTimeout(dojo.hitch(this, function(){
       // Focus shift outside the event handler.
       // IE doesn't like focus changes in event handles.
       this.button.set("disabled", false);
       this.button.openDropDown();
      }), 10);
     }
    }
- summary
```
Function to define a behavior on double clicks on the element
type this dialog edits to select it and pop up the editor
dialog.
```
- tags:
dojox.editor.plugins.InsertAnchor._preDomFilter
- type
```
Function
```
- parameters:
  - node: (typeof The)
```
node to search from.
```
- source: [view]
    var ed = this.editor;
    dojo.withGlobal(ed.window, function(){
     dojo.query("a", ed.editNode).forEach(function(a){
      if(dojo.attr(a, "name") && !dojo.attr(a, "href")){
       if(!dojo.hasClass(a,"dijitEditorPluginInsertAnchorStyle")){
        dojo.addClass(a, "dijitEditorPluginInsertAnchorStyle");
       }
      }
     });
    });
- summary
```
A filter to identify the 'a' tags and if they're anchors,
apply the right style to them.
```
- tags:
dojox.editor.plugins.InsertAnchor._postDomFilter
- type
```
Function
```
- parameters:
  - node: (typeof The)
```
node to search from.
```
- source: [view]
    var ed = this.editor;
    dojo.withGlobal(ed.window, function(){
     dojo.query("a", node).forEach(function(a){
      if(dojo.attr(a, "name") && !dojo.attr(a, "href")){
       if(dojo.hasClass(a,"dijitEditorPluginInsertAnchorStyle")){
        dojo.removeClass(a, "dijitEditorPluginInsertAnchorStyle");
       }
      }
     });
    });
    return node;
- summary
```
A filter to identify the 'a' tags and if they're anchors,
remove the class style that shows up in the editor from
them.
```
- tags:
dojox.editor.plugins.InsertAnchor.dropDown
- summary
dojox.editor.plugins.InsertAnchor.button
- summary
dojox.editor.plugins.InsertAnchor._uniqueId
- summary
dojox.editor.plugins.InsertAnchor._anchorInput
- summary
dojox.editor.plugins.InsertAnchor._textInput
- summary
dojox.editor.plugins.InsertAnchor._setButton
- summary
dojox.editor.plugins.InsertAnchor.editor
- summary
dojox.editor.plugins.InsertAnchor.setEditor.editor
- type
```
Object
```
- summary
```
The editor to configure for this plugin to use.
```
dojox.editor.plugins.InsertAnchor._styled
- summary
name
- summary
o.plugin
- summary
dojox.editor.plugins
- type
```
Object
```
- summary
dojox.editor
- type
```
Object
```
- summary
dojox
- type
```
Object
```
- summary

dojox/editor/plugins/InsertAnchor.js

Provides:

dojox.editor.plugins.InsertAnchor

dojox.editor.plugins.InsertAnchor.htmlTemplate

dojox.editor.plugins.InsertAnchor.iconClassPrefix

dojox.editor.plugins.InsertAnchor._template

dojox.editor.plugins.InsertAnchor._initButton

dojox.editor.plugins.InsertAnchor.updateState

dojox.editor.plugins.InsertAnchor.setEditor

dojox.editor.plugins.InsertAnchor._checkInput

dojox.editor.plugins.InsertAnchor._setup

dojox.editor.plugins.InsertAnchor.getAnchorStyle

dojox.editor.plugins.InsertAnchor._applyStyles

dojox.editor.plugins.InsertAnchor._calcBaseUrl

dojox.editor.plugins.InsertAnchor._checkValues

dojox.editor.plugins.InsertAnchor.setValue

dojox.editor.plugins.InsertAnchor._onCloseDialog

dojox.editor.plugins.InsertAnchor._getCurrentValues

dojox.editor.plugins.InsertAnchor._onOpenDialog

dojox.editor.plugins.InsertAnchor._onDblClick

dojox.editor.plugins.InsertAnchor._preDomFilter

dojox.editor.plugins.InsertAnchor._postDomFilter

dojox.editor.plugins.InsertAnchor.dropDown

dojox.editor.plugins.InsertAnchor.button

dojox.editor.plugins.InsertAnchor._uniqueId

dojox.editor.plugins.InsertAnchor._anchorInput

dojox.editor.plugins.InsertAnchor._textInput

dojox.editor.plugins.InsertAnchor._setButton

dojox.editor.plugins.InsertAnchor.editor

dojox.editor.plugins.InsertAnchor.setEditor.editor

dojox.editor.plugins.InsertAnchor._styled

name

o.plugin

dojox.editor.plugins

dojox.editor

dojox