michaelfox + admin   62

garann/wcteditor - GitHub
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.
contenteditable  editor  github  javascript  src  firefox  mozilla  wysiwyg  html5  richtextediting  element  cms  admin  rte  designMode  forms 
february 2011 by michaelfox
totes profesh» Blog Archive » making a really simple text editor
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);
}
}
editor  firefox  javascript  mozilla  wysiwyg  contenteditable  html5  richtextediting  element  cms  admin  rte  designMode  forms 
february 2011 by michaelfox
How to Create an HTML Editor Application
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
editor  firefox  javascript  mozilla  wysiwyg  contenteditable  html5  richtextediting  element  cms  admin  rte  designMode  forms 
february 2011 by michaelfox
designMode Property (document, HTMLDocument Constructor)
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.
editor  firefox  javascript  mozilla  wysiwyg  contenteditable  html5  richtextediting  element  cms  admin  rte  designMode  forms 
february 2011 by michaelfox
Multi-node: Concurrent NodeJS HTTP Server | SitePen Blog
This entry is part 7 of 7 in the series Server-Side JavaScript, Pintura, and Persevere 2.0

NodeJS has demonstrated impressive performance potential as an HTTP server. By combining highly optimized HTTP parsing algorithms with the speedy V8 JavaScript engine and using an event-based architecture, Node has posted eye-opening request handling numbers. However, Node historically has been limited by its inability to provide true concurrent request handling, greatly limiting its ability to leverage increasingly multiple core servers. The latest release of Node introduced new functionality for socket sharing that can be coupled with child process spawning to achieve concurrent multi-process request handling for a single TCP socket. Multi-node exists to leverage this capability to make it simple to start up a multi-process Node server.

Multi-node is very easy to use. You simply create an HTTP server object as you would normally do, and rather than immediately calling listen(), you pass it to the multi-node listen function:
node  nodejs  server  admin  environment 
july 2010 by michaelfox
Must have features in your CMS at Udi Mosayev
1. BackOffice for the BackOffice
2. Protected Items
3. Modules On/Off
4. System Logs
5. Duplicate Items
6. System Restore
cms  modules  bestpractices  planning  checklist  admin  content  management  features  list 
may 2010 by michaelfox
Function Web Design & Development Blog - » Tutorial: Creating Custom Write Panels in WordPress
Everyone knows that WordPress is one of the most, if not the most, popular blogging systems on the internet today. With its out of the box features, plugins, and great theming community, its no wonder WordPress has been accepted as today’s standard. However, sometimes you just want to add a little more.

It seems the latest fad to hit the WordPress scene is adding thumbnails into a blog post. This is fairly easy to do with some knowledge of custom fields, but can be a little complicated if your client is new to WordPress, or blogging.

Luckily, WordPress has a solution for us. We are going to use a little something called add_meta_box.
admin  template  theme  wordpress 
may 2010 by michaelfox
PHP Security Consortium: PHPSecInfo
PhpSecInfo provides an equivalent to the phpinfo() function that reports security information about the PHP environment, and offers suggestions for improvement. It is not a replacement for secure development techniques, and does not do any kind of code or app auditing, but can be a useful tool in a multilayered security approach.
php  security  tools  sysadmin  admin 
april 2010 by michaelfox
Showcase of Great Web App Interfaces | Webdesigner Depot
We have put together a great compilation of beautiful web application interfaces.

The web applications that were selected to be part of this showcase are based on usability, simplicity, colors and overall layout.
admin  interface  webdesign  hci  ui  ux  usability  dashboard  webapp  web2.0  showcase  inspiration  forms  data 
april 2010 by michaelfox
Hivelogic - Installing MySQL on Mac OS X
CC=gcc CFLAGS="-O3 -fno-omit-frame-pointer" CXX=gcc \ CXXFLAGS="-O3 -fno-omit-frame-pointer -felide-constructors \ -fno-exceptions -fno-rtti" \ ./configure --prefix=/usr/local/mysql \ --with-extra-charsets=complex --enable-thread-safe-client \ --enable-lo
mysql  server  admin  apache  osx  howto  config  setup  database  webdev 
july 2008 by michaelfox

related tags

admin  ajax  apache  apc  app  author  authors  bar  bestpractices  bevel  bio  book  bookmarklet  bookmarklets  build  cache  cgi  charset  cheatsheet  checklist  cli  cloud  cms  config  configuration  connection  content  contenteditable  control  controlpanel  css  css3  customization  dashboard  data  database  db  debug  debugging  demo  design  designMode  dev  development  devops  diagnostics  dialog  disc  document  ebooks  editor  ee  element  embed  env  environment  error  etc  expressionengine  features  files  firefox  forms  forums  github  GWT  hci  headers  howto  htaccess  html  html5  ide  infrastructure  ini  inspiration  install  interface  javascript  jquery  keychain  layout  learning  linux  list  mamp  management  markdown  media  memory  menu  messages  metadata  modules  mod_rewrite  mongodb  monitoring  mozilla  mysql  network  node  nodejs  nosql  notification  opensource  optimization  options  osx  patterns  performance  php  php.ini  planning  plugin  profiling  programming  proxy  puppet  q&a  queue  reference  repo  resources  richtextediting  rte  security  server  setup  shortcut  showcase  spotlight  src  ssh  sshagent  stackoverflow  styles  sysadmin  system  template  templates  terminal  theme  themes  tips  toolbar  tools  trick  troubleshooting  ui  unix  upload  uploads  usability  utf8  ux  virtualhost  web  web2.0  webapp  webdesign  webdev  webmaster  window  wordpress  wysiwyg  xattr  xdebug 

Copy this bookmark:



description:


tags: