txmt://open/?url=file:///etc/passwd&line=10&column=2

Sublime Text Github organisation

Tabs in Textarea Plugin for Javascript jQuery
concept

This is a demo of the "Tabby" Javascript jQuery plugin to use tabs in regular textareas to make them suitable for in-browser coding of languages like HTML, CSS, Javascript, or your favorite server-side language. The idea is to be able to use a press of the TAB button or SHIFT+TAB to indent or outdent your code.

try it out!

Simply use TAB to indent code in the textarea, SHIFT+TAB to outdent. It works on a single line or over a range of lines.

WCTeditor
A super-simple text editor for modern browsers. Supports:

bold
italic
underline
numbered lists
bulleted lists
links
stripping html (except line breaks/paragraphs)
spell-check via callback
Tested so far and works ok in:

FF 3.6
Chrome 8
Safari 5
Opera 11
IE 7+
NOT mobile WebKit
Usage

Requires jQuery and the jQuery templates plugin (there's also a version with no template dependency). Get those and then apply the WCTeditor plugin to a textarea with some options:

$("#myTextArea").WCTeditor({
showNumList: true,
showBullList: true,
pathToPlugin:"../"
});
Yay! Done.

Options

showBold

boolean: Whether or not you'd like the bold button to be shown. On by default.

showItalic

boolean: Whether or not you'd like the italicize button to be shown. On by default.

showUnderline

boolean: Whether or not you'd like the underline button to be shown.

showNumList

boolean: Whether or not you'd like the ordered list button to be shown.

showBullList

boolean: Whether or not you'd like the unordered list button to be shown.

showLink

boolean: Whether or not you'd like the link button to be shown. On by default.

showStripHtml

boolean: Whether or not you'd like the strip/clean up HTML button to be shown.

showSpellCheck

boolean: Whether or not you'd like the spellcheck button to be shown.

userClasses

array of strings: CSS class(es) you'd like to have applied to the div that wraps the editor.

defaultText

string: Text you want the editor to display with, if different than what's in your textarea.

showCharCount

boolean: Whether or not you'd like to show a character counter. See below for where to change the way the character counter works.

charCountTmpl

string: The template for your character counter. This can be just text or some HTML, but you need to insert "{{html chars}}" where you want the count to actually appear.

maxLength

integer: The maximum length of the user's input, including HTML, if different than the maxlength of your textarea.

spellcheckUrl

string: Path to the spellchecking service you'd like to call.

pathToPlugin

string: Location of this plugin (i.e., location of WCTeditor.js) relative to the file it's being implemented in.

theme

string: A directory name. The plugin will look for a stylesheet at [pathToPlugin]/themes/[theme]/WCTeditor.css

placeholderText

string: Helpful text that will display within the editor while it is empty, if defaultText is not set and the textarea is empty.

Functions

You may want to override some of these to change the default functionality.

applyFormatting

Applies the basic designMode commands.

updateTextarea

Pushes changes to the editor to your textarea, then calls updateCharCount if it's enabled.

updateCharCount

Updates the character count. Counts down from your specified maximum, then goes to negative. Assigns the CSS class "tooLong" to the count only once it goes negative.

updateButtons

Updates the state of the formatting buttons depending on the cursor location.

setLink

args: leftPosition (left position of formatting button)

Displays the interface to set a URL and wires up the button in that interface to update the editor markup.

stripHTML

Removes all markup except paragraphs and line breaks.

stripHTMLComments

Removes HTML comments from content pasted into the editor.

spellcheck

IE-only implementation, because other browsers include spellcheck. Sends the text within the editor to the service specified by the spellcheckUrl property, and expects an array of results in the format:

{originalWord: string, suggestions: []}
Wraps each misspelling in a font tag, and wires up an event handler to display a small window with the suggestions and an option to ignore the misspelling. Clicking a suggestion replaces the misspelling and removes the font tag, clicking ignore simply removes the font tag.

function getRange() {
return window.getSelection ?
window.getSelection().getRangeAt(0) :
document.selection.createRange();
}
function setSelection(range) {
if (range.select) {
range.select();
} else {
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}

This tutorial describes how to use features found in Microsoft Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands. For example, users can make the text bold or italic, change the font size, and make bulleted or numbered lists. A toolbar provides the formatting buttons, buttons for opening and saving files, and drop-down list boxes for font and block formatting selections. A menu allows alternate access to the functionality provided by the toolbar. As of Internet Explorer 6, you can also use the HtmlDlgSafeHelper object to change the face or color of the font.

With this HTML Editor Application, users can create HTML documents and save them to disk in either HTML or text format. If saved as an .htm file, the documents are viewable in Windows Internet Explorer or in the HTML Editor Application. Files saved as .txt can be viewed in any text editor.

This tutorial demonstrates how to do the following:

Create and use editable regions with the CONTENTEDITABLE attribute.
Use formatting Command Identifiers and the execCommand method.
Use the Internet Explorer WebControls toolbar element behavior, as well as a menu element behavior and an HTML+TIME (Timed Interactive Multimedia Extensions) time2 behavior that displays a splash screen.
Use the HtmlDlgSafeHelper object to access the fonts and block formats on a user's machine, and to display the color dialog box. Internet Explorer 6 introduces the HtmlDlgSafeHelper object.
Create an HTML Application (HTA).
You can use this kind of application to allow "what you see is what you get" (WYSIWYG) content editing of Web sites by users. You can also use this type of application as an editor for an Internet e-mail program.

Requirements and Dependencies 
Implementation Steps 
Step 1: Create the HTML file 
Step 2: Create the Toolbars 
Step 3: Create the Text Formatting Functions 
Step 4: Create the File New, File Open, and File Save Functions 
Step 5: Create the Menu 
Step 6: Create the Splash Screen 
Final Wrap-up 
Related Topics

Sets or gets a value that indicates whether the document can be edited.

Syntax

Copy
[ sMode = ] object.designMode
Possible Values

sMode String that specifies or receives one of the following values.
On
Document can be edited.
Off | Inherit
Default. Document cannot be edited.
The property is read/write. The property has a default value of Off | Inherit.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

You can use the designMode property to put Windows Internet Explorer into a mode so that you can edit the current document.

While the browser is in design mode, objects enter a UI-activated state when the user presses ENTER, clicks an object that has focus, or double-clicks the object. Objects that are UI-activated have their own window in the document. You can modify the UI only when the object is in a UI-activated state.

You cannot execute script when the value of the designMode property is set to On.

move

I spend much of my day working on other people's code. People who have uncivilized ideas about how to indent their code. (Given some of the code I've seen, I sometimes think I should be simply pleased that they bothered to indent their code at all.) Until civilization aligns and we finally have elastic tabs, I'll have to deal with different tab styles. The popular ones tend to be:

Tabs are eight columns wide. Each indentation level is one tab. (Popular with the Linux kernel.)
Tabs are four columns wide. Each indentation level is one tab. (Popular with Windows developers using Visual Studio.)
Each indentation level is four spaces. Tabs are not used. (Popular with Java programmers.)
I've seen some especially ... creative tab styles not listed above, including code indented with various innovative mixture of tabs and spaces. Out of the box, my favorite text editor (vim and its gui cousin, gvim) will default to indent using eight-column tabs, but vim can handle any (consistent) indentation style I've seen using four easy commands: tabstop, shiftwidth, expandtab, and softtabstop. (Each command listed below has links to the vim documentation for more details.)

/**
* @filename : editor_plugin.js
* @description : jQuery UI Inline Popups plugin to replace the default inlinepopups
* @developer : badsyntax (Richard Willis)
* @contact : http://badsyntax.co
* @moreinfo : http://is.gd/j1FuI
*/

(function() {

var DOM = tinymce.DOM,
Element = tinymce.dom.Element,
Event = tinymce.dom.Event,
each = tinymce.each,
is = tinymce.is;

// Create the editor plugin
tinymce.create('tinymce.plugins.jQueryInlinePopups', {

init : function(ed, url) {

// Replace window manager
ed.onBeforeRenderUI.add(function() {

ed.windowManager = new tinymce.InlineWindowManager(ed);
});
},

getInfo : function() {
return {
longname : 'jQueryInlinePopups',
author : 'Richard Willis',
authorurl : 'http://badsyntax.count',
infourl : '',
version : '0.1a'
};
}
});

// Create the window manager
tinymce.create('tinymce.InlineWindowManager:tinymce.WindowManager', {

InlineWindowManager : function(ed) {

var t = this;

t.parent(ed);
t.zIndex = 300000;
t.count = 0;
t.windows = {};
},

open : function(f, p) {

f = f || {};
p = p || {};

// Run native windows
if (!f.inline)
return t.parent(f, p);

var
config = {
title: f.title || '',
width: f.width + 1,
height: f.height + 25,
modal: true,
resizable: false,
draggable: true,
dialogClass: 'ui-dialog-tinymce'
},
t = this,
id = DOM.uniqueId(),
dialog = $('<div />')
.attr('id', 'dialog-' + id)
.hide()
.appendTo('body'),
w = {
id : id,
features : f,
element: dialog
};

if (f.title)
dialog.attr('title', f.title);

if (f.content){

if (f.type == 'confirm'){

function buttonAction(e){

if (/mceClose/.test(e.target.className)) {

t.close(null, id);

} else if (/mceOk/.test(e.target.className) || /mceCancel/.test(e.target.className)) {

f.button_func(/mceOk/.test(e.target.className));
}

Event.cancel(e);

return false;
}

config.buttons = [
{
text: "Ok",
click: buttonAction,
class: 'mceOk'
},
{
text: "Cancel",
click: buttonAction,
class: 'mceCancel'
}
];
}

var content = $('<div />')
.addClass('ui-dialog-tinymce-content')
.html(f.content);

dialog.html(content);
}
else
{

var iframe = $('<iframe />', {
id: id + '_ifr',
frameborder: 0
})
.css({
width: f.width,
height: f.height
})
.appendTo(dialog)
.attr( 'src', f.url || f.file );

w.iframeElement = iframe[0];
}

p.mce_inline = true;
p.mce_window_id = id;
p.mce_auto_focus = f.auto_focus;

this.features = f;
this.params = p;
this.onOpen.dispatch(this, f, p);

dialog.dialog(config);

// Add window
t.windows[id] = w;

t.count++;

return w;
},

_findId : function(w) {

var t = this;

if (typeof(w) == 'string')
return w;

each(t.windows, function(wo) {
var ifr = DOM.get(wo.id + '_ifr');

if (ifr && w == ifr.contentWindow) {
w = wo.id;
return false;
}
});

return w;
},

resizeBy : function(dw, dh, id) {

return;
},

focus : function(id) {

return;
},

close : function(win, id) {

var t = this, w, d = DOM.doc, ix = 0, fw, id;

id = t._findId(id || win);

// Probably not inline
if (!t.windows[id]) {
t.parent(win);
return;
}

t.count--;

if (w = t.windows[id]) {

t.onClose.dispatch(t);

Event.clear(id);
Event.clear(id + '_ifr');

DOM.setAttrib(id + '_ifr', 'src', 'javascript:""'); // Prevent leak

w.element.dialog('destroy').remove();

delete t.windows[id];
}
},

setTitle : function(w, ti) {

var e;

w = this._findId(w);

if (e = DOM.get('ui-dialog-title-dialog-' + w))
e.innerHTML = DOM.encode(ti);
},

alert : function(txt, cb, s) {
var t = this, w;

w = t.open({
title : 'Error',
type : 'alert',
button_func : function(s) {
if (cb)
cb.call(s || t, s);

t.close(null, w.id);
},
content : DOM.encode(t.editor.getLang(txt, txt)),
inline : 1,
width : 400,
height : 130
});
},

confirm : function(txt, cb, s) {
var t = this, w;

w = t.open({
title: 'Please confirm',
type : 'confirm',
button_func : function(s) {
if (cb)
cb.call(s || t, s);

t.close(null, w.id);
},
content : DOM.encode(t.editor.getLang(txt, txt)),
inline : 1,
width : 400,
height : 130
});
}
});

// Register plugin
tinymce.PluginManager.add('jqueryinlinepopups', tinymce.plugins.jQueryInlinePopups);
})();

cmap w!! %!sudo tee > /dev/null %

A better sidebar for Textmate.

" Unbind the cursor keys in insert, normal and visual modes. for prefix in ['i', 'n', 'v'] for key in ['<Up>', '<Down>', '<Left>', '<Right>'] exe prefix . "noremap " . key . " <Nop>" endfor endfor

Introduction to using vim for Rails development

Someone recently asked us to do “vim on Rails” screencasts.

So, we’re responding with this experiment. Let us know if this is valuable and we’ll try to improve things like audio quality.

More tips from thoughtbot about using vim, but this time with an emphasis on fitting it into your life.