{"id":13438976,"url":"https://github.com/sofish/pen","last_synced_at":"2025-05-14T13:07:33.775Z","repository":{"id":10333177,"uuid":"12464962","full_name":"sofish/pen","owner":"sofish","description":"enjoy live editing (+markdown)","archived":false,"fork":false,"pushed_at":"2018-09-23T14:27:04.000Z","size":265,"stargazers_count":4809,"open_issues_count":65,"forks_count":409,"subscribers_count":138,"default_branch":"master","last_synced_at":"2025-05-13T07:31:33.690Z","etag":null,"topics":["editor","pen","pen-editor","wysiwyg"],"latest_commit_sha":null,"homepage":"https://sofish.github.io/pen","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sofish.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-29T16:09:40.000Z","updated_at":"2025-05-03T04:16:18.000Z","dependencies_parsed_at":"2022-06-26T08:03:54.195Z","dependency_job_id":null,"html_url":"https://github.com/sofish/pen","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofish%2Fpen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofish%2Fpen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofish%2Fpen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sofish%2Fpen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sofish","download_url":"https://codeload.github.com/sofish/pen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149958,"owners_count":22022851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","pen","pen-editor","wysiwyg"],"created_at":"2024-07-31T03:01:10.128Z","updated_at":"2025-05-14T13:07:28.761Z","avatar_url":"https://github.com/sofish.png","language":"JavaScript","readme":"# Pen Editor\n\n- **LIVE DEMO:** [http://sofish.github.io/pen](http://sofish.github.io/pen)\n- **Markdown is supported**\n- **Build status:** [![Build Status](https://travis-ci.org/sofish/pen.png?branch=master)](https://travis-ci.org/sofish/pen)\n\n******************\n\n![pen editor - screenshot ](https://f.cloud.github.com/assets/153183/1093671/61d4c0d2-16a9-11e3-88ed-01b1758a9a42.png)\n\n******************\n\n## 0. source code\n\nYou can clone the source code from github, or using bower.\n\n```\nbower install pen\n```\n\n\n## 1. installation\n\n#### 1.1 init with id attribute\n\n```js\nvar editor = new Pen('#editor');\n```\n\n#### 1.2 init with an element\n\n```js\nvar editor = new Pen(document.getElementById('editor'));\n```\n\n#### 1.3 init with options\n\n```js\nvar options = {\n  editor: document.body, // {DOM Element} [required]\n  class: 'pen', // {String} class of the editor,\n  debug: false, // {Boolean} false by default\n  textarea: '\u003ctextarea name=\"content\"\u003e\u003c/textarea\u003e', // fallback for old browsers\n  list: ['bold', 'italic', 'underline'], // editor menu list\n  linksInNewWindow: true // open hyperlinks in a new windows/tab\n}\n\nvar editor = new Pen(options);\n```\n\n## 2. configure\n\nThe following object sets up the default settings of Pen:\n\n```js\ndefaults = {\n  class: 'pen',\n  debug: false,\n  textarea: '\u003ctextarea name=\"content\"\u003e\u003c/textarea\u003e',\n  list: [\n    'blockquote', 'h2', 'h3', 'p', 'insertorderedlist', 'insertunorderedlist',\n    'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'\n  ],\n  stay: true,\n  linksInNewWindow: false\n}\n```\n\nIf 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](https://github.com/sofish/pen#13-init-with-options):\n\n#### 2.1 Fallback for old browser\n\nYou can set `defaults.textarea` to a piece of HTML string, by default, it's `\u003ctextarea name=\"content\"\u003e\u003c/textarea\u003e`。This will be set as `innerHTML` of your `#editor`.\n\n#### 2.2 Change the editor class\n\nPen 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`.\n\n#### 2.3 Enable debug mode\n\nIf `options.debug` is set to `true`, Pen will output logs to the Console of your browser.\n\n![debugger](https://f.cloud.github.com/assets/153183/1078426/e1d40758-1527-11e3-9a68-12c58225c93c.png)\n\n#### 2.4 Customize the toolbar\n\nYou can set `options.list` to an `Array`, add the following strings to make your own:\n\n- `blockquote`, `h2`, `h3`, `p`, `pre`: create a tag as its literal meaning\n- `insertorderedlist`: create an `ol\u003eli` list\n- `insertunorderedlist`: create a `ul\u003eli` list\n- `indent`: indent list / blockquote block\n- `outdent`: outdent list / blockquote block\n- `bold`: wrap the text selection in a `b` tag\n- `italic`: wrap the text selection in an `i` tag\n- `underline`: wrap the text selection in a `u` tag\n- `createlink`: insert link to the text selection\n- `inserthorizontalrule`: insert a `hr` tag\n- `insertimage`: insert an image (`img`) tag\n\n#### 2.5 Add tooltips to the toolbar icons\n\nYou can set `options.titles` to an object with properties that match the toolbar actions. The value of each property\nwill be used as the title attribute on the icon. Most browsers will display the title attribute as a tooltip when\nthe mouse hovers over the icon.\n\n```js\noptions.title = {\n    'blockquote': 'Blockquote'\n    'createlink': 'Hyperlink'\n    'insertimage': 'Image'\n}\n```\n\nIf you are using Bootstrap or jQueryUI, you can standardize the tooltip style by adding `$('i.pen-icon').tooltip()`\nto your JavaScript.\n\n#### 2.6 Prevent unsafe page redirect\n\nBy default, Pen will prevent unsafe page redirect when editing, to shut down it, specific `options.stay` to `false`.\n\n__NOTE:__ if `defaults.debug` is set to `true` and `default.stay` is not set: `defaults.stay == !defaults.debug`.\n\n#### 2.7 Disable and Re-enable editor\n\nYou can disable the pen editor by call `destroy()` method of the `var pen = new Pen(options)` object. like:\n\n```js\nvar pen = new Pen('#editor');\n\npen.destroy(); // return itself\n```\n\nAnd, there's a corresponding method called `rebuild()` to re-enable the editor:\n\n```js\npen.rebuild(); // return itself\n```\n\n#### 2.8 Export content as markdown\n\nIt's an experimental feature\n\n```js\nvar pen = new Pen('#editor');\n\npen.toMd(); // return a markdown string\n```\n\n\n## 3. markdown syntax support\n\n#### 3.1 install\nThe syntax convertor will be enabled automatically by linking `markdown.js` after `pen.js:\n\n```html\n\u003cscript src=\"src/pen.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/markdown.js\"\u003e\u003c/script\u003e\n```\n\n#### 3.2 usage\nTo use it, you can type `action cmd` + `space key` at a line start. like:\n\n```\n### This will create a h3 tag\n```\n\nThe following cmds are allowed:\n\n- Headings: type 1~6 `#` at the line start\n- Unordered List: type `- ` or `* `\n- Ordered List: type `1. `\n- Code block: type **\\`\\`\\`**\n- Block Quote: type `\u003e `\n- Horizontal Rule: more than 3 `-`, `*`, `.` will create a `\u003chr /\u003e`, like `......`\n\n## 4. license\n\nLicensed under MIT.\n\n## 5. trusted by *\n\n[![Teambition](https://dn-project-site.qbox.me/images/logo.png)](https://github.com/teambition)\n","funding_links":[],"categories":["JavaScript","Editors","Framework or Library","others","editor","独立的","Editors [🔝](#readme)","Markdown editor","Libaries ##","编辑器","Acknowlegment ##","Standalone"],"sub_categories":["Runner","Inline Editor","运行器","运行器e2e测试"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofish%2Fpen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofish%2Fpen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofish%2Fpen/lists"}