A Letter from TheMarkup.org Editor Julia Angwin

Dear Readers,

We are living in a golden age of information — as data of all types floods through our news feeds around the clock. But amid this tidal wave of information, it is increasingly difficult to sort truth from opinion, anecdote, spin or outright propaganda.

All of us have probably wondered: Is the viral post in our news feed today representative of a real trend? Is it an outlier? Is it hype?

The Markup is here to help you sort that out. We are a nonprofit newsroom with an unparalleled roster of quantitative journalists who are committed to finding the true meaning in large amounts of data. Our programmers use the latest computational methods — from large-scale data collection to artificial intelligence — to pierce the veil of secrecy around tech used by big businesses and the government.

We want to rebuild trust in journalism, one dataset at a time.

The Markup uses these and other cutting edge methods to collect and analyze evidence showing how technology is being used and how it affects you, your family, and your community. Our goal is simple: We want to rebuild trust in journalism, one dataset at a time.

We pursue stories through what we’re calling The Markup Method, an approach rooted in the scientific method. It’s a three-step process:

#big-tech #editor #big data

What is GEEK

Buddha Community

A Letter from TheMarkup.org Editor Julia Angwin

A Letter from TheMarkup.org Editor Julia Angwin

Dear Readers,

We are living in a golden age of information — as data of all types floods through our news feeds around the clock. But amid this tidal wave of information, it is increasingly difficult to sort truth from opinion, anecdote, spin or outright propaganda.

All of us have probably wondered: Is the viral post in our news feed today representative of a real trend? Is it an outlier? Is it hype?

The Markup is here to help you sort that out. We are a nonprofit newsroom with an unparalleled roster of quantitative journalists who are committed to finding the true meaning in large amounts of data. Our programmers use the latest computational methods — from large-scale data collection to artificial intelligence — to pierce the veil of secrecy around tech used by big businesses and the government.

We want to rebuild trust in journalism, one dataset at a time.

The Markup uses these and other cutting edge methods to collect and analyze evidence showing how technology is being used and how it affects you, your family, and your community. Our goal is simple: We want to rebuild trust in journalism, one dataset at a time.

We pursue stories through what we’re calling The Markup Method, an approach rooted in the scientific method. It’s a three-step process:

#big-tech #editor #big data

Reid  Rohan

Reid Rohan

1663025940

10 Best Libraries for JavaScript Editors

In today's post we will learn about 10 Best Libraries for JavaScript Editors. 

What’s an Editor?
Let’s start with editors. Text editors are exactly what their name suggest: programs that allow you to create and edit plain-text files. That’s it. An editor, in the classical sense, isn’t necessarily a programming tool; you could it to edit text files for any purpose. One of such purposes is, of course, writing code.

Table of contents:

  • ACE - Ace (Ajax.org Cloud9 Editor).
  • CodeMirror - In-browser code editor.
  • Esprima - ECMAScript parsing infrastructure for multipurpose analysis.
  • Quill - A cross browser rich text editor with an API.
  • Medium-editor - Medium.com WYSIWYG editor clone.
  • Pen - enjoy live editing (+markdown).
  • JQuery-notebook - A simple, clean and elegant text editor. Inspired by the awesomeness of Medium.
  • Bootstrap-wysiwyg - Tiny bootstrap-compatible WYSIWYG rich text editor.
  • Ckeditor-releases - The best web text editor for everyone.
  • Editor - A markdown editor. still on development.
  • EpicEditor - An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
  • JSoneditor - A web-based tool to view, edit and format JSON.
  • Vim.js - JavaScript port of Vim with a persistent ~/.vimrc.

1 - ACE: Ace (Ajax.org Cloud9 Editor).

Ace is a standalone code editor written in JavaScript. Our goal is to create a browser based editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page or JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.

Take Ace for a spin!

Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.

If you want, you can use Ace as a textarea replacement thanks to the Ace Bookmarklet.

Embedding Ace

Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as ace

The easiest version is simply:

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

With "editor" being the id of the DOM element, which should be converted to an editor. Note that this element must be explicitly sized and positioned absolute or relative for Ace to work. e.g.

#editor {
    position: absolute;
    width: 500px;
    height: 400px;
}

To change the theme simply include the Theme's JavaScript file

<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>

and configure the editor to use the theme:

editor.setTheme("ace/theme/twilight");

By default the editor only supports plain text mode; many other languages are available as separate modules. After including the mode's JavaScript file:

<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>

The mode can then be used like this:

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());

to destroy editor use

editor.destroy();
editor.container.remove();

View on Github

2 - CodeMirror: In-browser code editor.

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code.

Installation

Either get the zip file with the latest version, or make sure you have Node installed and run:

npm install codemirror

NOTE: This is the source repository for the library, and not the distribution channel. Cloning it is not the recommended way to install the library, and will in fact not work unless you also run the build step.

Quickstart

To build the project, make sure you have Node.js installed (at least version 6) and then npm install. To run, just open index.html in your browser (you don't need to run a webserver). Run the tests with npm test.

View on Github

3 - Esprima: ECMAScript parsing infrastructure for multipurpose analysis.

Esprima (esprima.org, BSD license) is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript). Esprima is created and maintained by Ariya Hidayat, with the help of many contributors.

API

Esprima can be used to perform lexical analysis (tokenization) or syntactic analysis (parsing) of a JavaScript program.

A simple example on Node.js REPL:

> var esprima = require('esprima');
> var program = 'const answer = 42';

> esprima.tokenize(program);
[ { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'answer' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '42' } ]
  
> esprima.parseScript(program);
{ type: 'Program',
  body:
   [ { type: 'VariableDeclaration',
       declarations: [Object],
       kind: 'const' } ],
  sourceType: 'script' }

For more information, please read the complete documentation.

View on Github

4 - Quill: A cross browser rich text editor with an API.

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow',
  });
</script>

Take a look at the Quill website for more documentation, guides and live playground!

Download

CDN

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.0.0/quill.core.js"></script>

View on Github

5 - Medium-editor: Medium.com WYSIWYG editor clone.

MediumEditor has been written using vanilla JavaScript, no additional frameworks required.

Basic usage

Demo

demo: http://yabwe.github.io/medium-editor/

Installation

Via npm:

Run in your console: npm install medium-editor

Via bower:

bower install medium-editor

Via an external CDN

For the latest version:

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

For a custom one:

<script src="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

Manual installation:

Download the latest release and attach medium editor's stylesheets to your page:

Find the files to below mentioned linking in the dist folder. (./medium-editor/dist/...)

<link rel="stylesheet" href="css/medium-editor.css"> <!-- Core -->
<link rel="stylesheet" href="css/themes/default.css"> <!-- or any other theme -->

Usage

The next step is to reference the editor's script

<script src="js/medium-editor.js"></script>

You can now instantiate a new MediumEditor object:

<script>var editor = new MediumEditor('.editable');</script>

The above code will transform all the elements with the .editable class into HTML5 editable contents and add the medium editor toolbar to them.

You can also pass a list of HTML elements:

var elements = document.querySelectorAll('.editable'),
    editor = new MediumEditor(elements);

MediumEditor also supports textarea. If you provide a textarea element, the script will create a new div with contentEditable=true, hide the textarea and link the textarea value to the div HTML content.

Integrating with various frameworks

People have contributed wrappers around MediumEditor for integrating with different frameworks and tech stacks. Take a look at the list of existing Wrappers and Integrations that have already been written for MediumEditor!

View on Github

6 - Pen: Enjoy live editing (+markdown).

Source code

You can clone the source code from github, or using bower.

bower install pen

Installation

init with id attribute

var editor = new Pen('#editor');

init with an element

var editor = new Pen(document.getElementById('editor'));

init with options

var options = {
  editor: document.body, // {DOM Element} [required]
  class: 'pen', // {String} class of the editor,
  debug: false, // {Boolean} false by default
  textarea: '<textarea name="content"></textarea>', // fallback for old browsers
  list: ['bold', 'italic', 'underline'], // editor menu list
  linksInNewWindow: true // open hyperlinks in a new windows/tab
}

var editor = new Pen(options);

Configure

The following object sets up the default settings of Pen:

defaults = {
  class: 'pen',
  debug: false,
  textarea: '<textarea name="content"></textarea>',
  list: [
    'blockquote', 'h2', 'h3', 'p', 'insertorderedlist', 'insertunorderedlist',
    'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
  ],
  stay: true,
  linksInNewWindow: false
}

If you want to customize the toolbar to fit your own project, you can instanciate Pen constructor with an options object like #1.3: init with options:

Fallback for old browser

You can set defaults.textarea to a piece of HTML string, by default, it's <textarea name="content"></textarea>。This will be set as innerHTML of your #editor.

Change the editor class

Pen will add .pen to your editor by default, if you want to change the class, make sure to replace the class name pen to your own in src/pen.css.

View on Github

7 - JQuery-notebook: A simple, clean and elegant text editor. Inspired by the awesomeness of Medium.

A simple, clean and elegant WYSIWYG rich text editor for web aplications

Usage

Prerequisites: jQuery-Notebook's default styling FontAwesome draw the icons on the context bubble. You can install both FontAwesome and jQuery-Notebook through bower with the following command:

bower install jquery-notebook font-awesome

Alternatively, you can download FontAwesome here or link to the CDN.

Add the FontAwesome css and jQuery-Notebook css to you page head:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="src/js/jquery.notebook.css">

Add jquery and jquery-notebook.js to your page:

<script type="text/javascript" src="src/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="src/js/jquery.notebook.js"></script>

Create the editor:

<div class="my-editor"></div>
$(document).ready(function(){
    $('.my-editor').notebook();
});

That's it!

Available Commands

  • Ctrl/Command B - Bold
  • Ctrl/Command I - Italic
  • Ctrl/Command U - Underline
  • Ctrl/Command F1 - Header 1
  • Ctrl/Command F2 - Header 2
  • Ctrl/Command Z - Undo

View on Github

8 - Bootstrap-wysiwyg: Tiny bootstrap-compatible WYSIWYG rich text editor.

About the editor

Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for MindMup. Here are the key features:

  • Automatically binds standard hotkeys for common operations on Mac and Windows
  • Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
  • Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on...
  • Does not force any styling - it's all up to you
  • Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
  • Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV
  • (Optionally) cleans up trailing whitespace and empty divs and spans
  • Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)
  • Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)

Basic Usage

See http://mindmup.github.com/bootstrap-wysiwyg/

Customising

You can assign commands to hotkeys and toolbar links. For a toolbar link, just put the execCommand command name into a data-edit attribute. For more info on execCommand, see http://www.quirksmode.org/dom/execCommand.html and https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
</div>

To pass arguments to a command, separate a command with a space.

 <a data-edit="fontName Arial">...</a>

You can also use input type='text' with a data-edit attribute. When the value is changed, the command from the data-edit attribute will be applied using the input value as the command argument

<input type="text" data-edit="createLink">

If the input type is file, when a file is selected the contents will be read in using the FileReader API and the data URL will be used as the argument

<input type="file" data-edit="insertImage">

To change hotkeys, specify the map of hotkeys to commands in the hotKeys option. For example:

$('#editor').wysiwyg({
  hotKeys: {
    'ctrl+b meta+b': 'bold',
    'ctrl+i meta+i': 'italic',
    'ctrl+u meta+u': 'underline',
    'ctrl+z meta+z': 'undo',
    'ctrl+y meta+y meta+shift+z': 'redo'
  }
});

View on Github

9 - Ckeditor-releases: The best web text editor for everyone.

Releases Code

This repository contains the official release versions of CKEditor 4.

There are four versions for each release — standard-all, basic, standard, and full. They differ in the number of plugins that are compiled into the main ckeditor.js file as well as the toolbar configuration.

See the comparison of the basic, standard, and full installation presets for more details.

The standard-all build includes all official CKSource plugins with only those from the standard installation preset compiled into the ckeditor.js file and enabled in the configuration.

All versions available in this repository were built using CKBuilder, so they are optimized and ready to be used in a production environment.

Installation

Git clone

To install one of the available releases, just clone this repository and switch to the respective branch (see next section):

git clone -b <release branch> git://github.com/ckeditor/ckeditor4-releases.git

Git submodule

If you are using git for your project and you want to integrate CKEditor, we recommend to add this repository as a submodule.

git submodule add -b <release branch> git://github.com/ckeditor/ckeditor-releases.git <clone dir>
git commit -m "Added CKEditor submodule in <clone dir> directory."

Using Package Managers

See the Installing CKEditor with Package Managers article for more details about installing CKEditor with Bower, Composer and npm.

View on Github

10 - Editor: A markdown editor. still on development.

Overview

Editor is not a WYSIWYG editor, it is a plain text markdown editor. Thanks for the great project codemirror, without which editor can never be created.

Basic Usage

The easiest way to use Editor is to simply load the script and stylesheet:

<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>

You can also use jsdelivr CDN:

<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css">
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script>
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>

Having done this, an editor instance can be created:

var editor = new Editor();
editor.render();

The editor will take the position of the first <textarea> element.

Get the content

To get back the edited content you use:

editor.codemirror.getValue();

Component

If you are using component, you can install it with:

$ component install lepture/editor

View on Github

Thank you for following this article.

Related videos:

Top 10 Best Rich Text HTML JavaScript Editor 

#javascript #editor 

Acorn.jl: A Pure Julia Text Editor

Acorn.jl 

Acorn.jl is a small text editor written purely in julia.

Note: This project was written to learn more about and demonstrate julia as a general purpose language, it was not originally intended to be a practical solution to editing text within the REPL (considering one can just type ;vim for a feature complete text editor in the REPL).

Basic Demo

Creating a new text file and writing contents from the julia REPL.

Features include:

  • Use in REPL or from command line
  • Commands like find, help, save + easy to create your own.
  • Customizable key bindings and settings

Commands

Acorn's command mode allows users to change settings and execute commands on the fly. It also provides a way to easily add, remove, or change keybindings from within the application

Installing

Pkg.clone("https://github.com/nick-paul/Acorn.jl.git")

Usage

From within the REPL:

julia> using Acorn
julia> acorn("filename")

From the command line

$ julia -E "using Acorn;acorn()" filename

Use an alias to make command line easier:

$ alias acornjl='julia -E "using Acorn;acorn()"'
$ acornjl filename

Commands

Press Ctrl-P to enter command mode. Type 'help COMMAND' for more information on that command.

arguments in [brackets] are optional

  • help [CMD]: display help information for CMD
  • quit: quit the editor
  • open FILE: open a file, create a new one if needed
  • save [FILE]: save the file, if a new filename is provided, save as that name
  • find [STR]: start interactive find. if STR is provided, start interactive search with STR. Use the up and down arrows to go to the prev/next occurance in the test.
  • echo STR: display STR as a message
  • set param_name param: set parameter param_name to param. ex: set tab_stop 4
  • bind char command: bind Ctrl-(char) to the command command. ex: bind s save, bind h echo Hello world!. Type bind char ~ to unbind.

Settings

Change settings by pressing ctrl-p to enter command mode and then typing set <cmd name> <value>. All settings remain for the duration of the editor session. When opening a new editor, the default configuration is used.

To change the default values, use the following in your .juliarc.jl:

using Acorn
Acorn.configSet(:param_name, value)

where :param_name is a symbol with the parameter's name and value is the new default value.

Acorn currently supports the following settings:

  • tab_stop: Tab width in number of spaces. (default: 4,)
  • expandtab: If true, insert spaces when pressing the tab key.
  • status_fullpath: If true, display the full path to the file in the status bar. If false, just display the name.

Customization / Contributing

Commands

Commands are easy to create and allow for greater editor usability. To create your own command, create a julia file in the cmds folder, name it after your command, and include it in the Acorn module. Below is an example definition of the command sample. For more examples, see the cmds/ folder. If you have written a command that you would like to see implemented in Acorn, feel free to send a pull request.

cmds/sample.jl


# The command must have the signature
#   function(::Editor, ::String)
function sampleCommand(ed::Editor, args::String)
    # Perform operation here

    # If you need to store state variables use ed.params
    # ed.params[:YOUR CMD NAME][VAR NAME]
    ed.params[:sample][:var_name] = some_val

    # If you need to request input from the user:
    editorPrompt(ed, "Enter your name: ",
            callback=sampleCallback     # Callback function: function(ed::Editor, buf::String, key::Char
            buf="",             # Starting point for the input buffer. This text is
                                #   'automatically' typed into the input when the
                                #   prompt loads
            showcursor=true)    # Move the cursor to the prompt

end

# Optional: If you request input from the user and need a
#   callback function, use the following format:
function sampleCallback(ed::Editor, buf::String, key::Char)
    # Perform callback action here...
end


# Call `addCommand` to add
addCommand(:sample,                         # The command name
            sampleCommand,                  # The command function
            help="description of sample")   # Displayed when user runs 'help sample'

Including your command

Include your command in Acorn.jl

# Load commands
#...
include("cmds/save.jl")
include("cmds/find.jl")
include("cmds/sample.jl") # Add this line
#...

Please also create a test file test/cmds/test_sample.jl and include it in test/runtests.jl.

include("cmds/test_sample.jl")

Features

Many features have not yet been implemented. I will slowly be adding features and I will try to keep up with issues and pull requests so feel free to add whatever you like to the editor. Some things I may eventually add to the editor are:

  • Text selection
    • Copy/paste
  • Tab completion
  • Syntax highlighting
  • Line numbers
  • Auto indent
  • ...

Bug Fixes / Compatibility

Acorn has not been tested on OSX and currently has compatibility issues with Windows. If you run into any problems on your platform feel free to patch it and send a pull request.

If you experience any bugs, please submit an issue or patch it and send a pull request.

Credits

  • Much of the core code and design in src/editor.jl is based off of antirez's kilo.
  • The kilo tutorial by snaptoken was a huge help when writing the core editor features.

Download Details:

Author: Nick-paul
Source Code: https://github.com/nick-paul/Acorn.jl 
License: View license

#julia #terminal #text #editor 

How To Add Summernote Editor In Laravel

In this tutorial I will let you know how to use summernote editor in laravel, In laravel or php many editors are available but today I will give you example of summernote.

Summernote editor is rich textbox editor, using summernote editor you can take many actions like, insert image, add tables, changes font style, add links, add snippet code and many more feature provides.

For summernote editor you need to add summernote js and css cdn, So, let’s start.

Read More : https://websolutionstuff.com/post/how-to-add-summernote-editor-in-laravel


Read More : How To Generate QR Code In Laravel

#laravel #summernote editor #editor #jquery #text editor

How To Hide Toolbar In Summernote Editor

Summernote editor is rich textbox editor, using summernote editor you can take many actions like, insert image, add tables, changes font style, add links, add snippet code and many more feature provides.

In this small tutorial I will show you how to hide toolbar in summernote editor, many times customer’s have requirement to enable only specific tool or option in summernote editor, for this we need to customize toolbar in summernote.

How To Hide Toolbar In Summernote Editor

https://websolutionstuff.com/post/how-to-hide-toolbar-in-summernote-editor

#how to hide toolbar in summernote editor #summernote #editor #textbox editor #hide toolbar #toolbar