1599231900
Pure JavaScript rich text editor web editor
KothingEditor
Pure javscript rich text editorweb editor, with no dependencies
Demo : kothing.github.io/editor
The KothingEditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.
- Pasting from Microsoft Word and Excel.
- Custom table selection, merge and split.
- Media embeds, image uploads.
- Can use CodeMirror.
- And… many other features :)
Browser Support
| Chrome | Firefox | Opera | Safari | Edge | Internet Explorer |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | 11+ |
Install
npm
$ npm install --save kothing-editor
CDN
<link href="./kothing-editor.min.css" rel="stylesheet" />
<script src="./kothing-editor.min.js"></script>
<!-- languages (Basic Language: English/en) -->
<script src="./lang/en.js"></script>
Getting Started
1. Include
<!-- <link href="../src/assets/css/kothing-editor.css" rel="stylesheet"> -->
<!-- <link href="../src/assets/css/kothing-editor-contents.css" rel="stylesheet"> -->
<link href="../build/css/kothing-editor.min.css" rel="stylesheet" />
<script src="../build/kothing-editor.min.js"></script>
<script src="../src/lang/en.js"></script>
2. Target Element
<textarea id="document">Hi</textarea>
3. Create
/**
* ID : 'kothing-editor_document'
* ClassName : 'keidtor'
*/
// ID or DOM object
const KothingEditor = KothingEditor.create(
document.getElementById("document") || "document",
{
// All of the plugins are loaded in the "window.KothingEditor" object in build/kothing-editor.min.js file
// Insert options
// Language global object (default: en)
lang: KothingEditor_LANG["zh_cn"],
}
);
4. Contents display
When you display a document created by KothingEditor
You need to include "src/assets/css/kothing-editor-contents.css" or "build/css/kothing-editor.min.css" file.
Then add "kothing-editor-editable" to the class name of the Tag element that displays the content.
In "kothing-editor-contents.css", you can define the style of all the tags created in KothingEditor.
Use import statement
1. Load only what you want
import "kothing-editor/build/css/kothing-editor.min.css";
import KothingEditor from "kothing-editor";
import {
font,
fontSize,
fontColor,
horizontalRule,
list,
image,
} from "kothing-editor/src/plugins";
// How to import language files (default: en)
import lang from "kothing-editor/src/lang";
import { en, zh_cn } from "kothing-editor/src/lang";
KothingEditor.create("document", {
plugins: [font, fontSize, fontColor, horizontalRule, link, image],
toolBarItem: [
["font", "fontSize"],
["fontColor"],
["horizontalRule"],
["link", "image"],
],
lang: lang.zh_cn,
});
2. Load all plugins
import 'kothing-editor/build/css/kothing-editor.min.css'
import KothingEditor from 'kothing-editor'
import plugins from 'kothing-editor/src/plugins'
KothingEditor.create('document', {
plugins: plugins,
toolBarItem: [
['undo', 'redo'],
['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
'/', // Line break
['fontColor', 'hiliteColor'],
['outdent', 'indent'],
['align', 'horizontalRule', 'list', 'table'],
['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print'],
['save', 'template']
]
})
// You can also load what you want
KothingEditor.create('document', {
plugins: [
plugins.font
plugins.fontSize
],
toolBarItem: [
['font', 'fontSize'],
// Plugins can be used directly in the button list
[plugins.formatBlock]
]
})
3. Plugins can be used directly in the button list
import "kothing-editor/build/css/kothing-editor.min.css";
import KothingEditor from "kothing-editor";
import {
align,
font,
fontSize,
fontColor,
hiliteColor,
horizontalRule,
list,
table,
template,
formatBlock,
link,
image,
video,
} from "kothing-editor/src/plugins";
KothingEditor.create("document", {
toolBarItem: [
["undo", "redo"],
[font, fontSize, formatBlock],
["bold", "underline", "italic", "strike", "subscript", "superscript"],
["removeFormat"],
[fontColor, hiliteColor],
["outdent", "indent"],
[align, horizontalRule, list, table],
[link, image, video],
["fullScreen", "showBlocks", "codeView"],
["preview", "print"],
["save", template],
],
});
Init function
The init function can be used by predefining options and calling the create function on the returned object.
The value of the option argument put in the "create" function call takes precedence
import "kothing-editor/build/css/kothing-editor.min.css";
import KothingEditor from "kothing-editor";
import plugins from "kothing-editor/src/plugins";
// all plugins
const initEditor = KothingEditor.init({
plugins: plugins,
height: 200,
toolBarItem: [
[
"undo",
"redo",
"font",
"fontSize",
"formatBlock",
"bold",
"underline",
"italic",
"strike",
"subscript",
"superscript",
"removeFormat",
"fontColor",
"hiliteColor",
"outdent",
"indent",
"align",
"horizontalRule",
"list",
"table",
"link",
"image",
"video",
"fullScreen",
"showBlocks",
"codeView",
"preview",
"print",
"save",
"template",
],
],
});
initEditor.create("document_1", {
// The value of the option argument put in the "create" function call takes precedence
});
initEditor.create("document_2", {
// The value of the option argument put in the "create" function call takes precedence
height: "auto",
toolBarItem: [
["bold", "underline", "italic"],
["removeFormat"],
["preview", "print"],
],
});
Use CodeMirror
<!-- codeMirror -->
<!-- Use version 5.0.0 or later. -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.49.0/mode/css/css.js"></script>
import "kothing-editor/build/css/kothing-editor.min.css";
import KothingEditor from "kothing-editor";
// Import codeMirror
import CodeMirror from "codemirror";
import "codemirror/mode/htmlmixed/htmlmixed";
import "codemirror/lib/codemirror.css";
KothingEditor.create("document", {
codeMirror: CodeMirror,
// Set options
// codeMirror: {
// src: CodeMirror,
// options: {...}
// }
toolBarItem: [["codeView"]],
height: 400,
});
Options
plugins: [
font,
fontSize,
formatBlock,
fontColor,
hiliteColor,
align,
horizontalRule,
list,
table,
template,
link,
image,
video
] : Plugins array. default: null {Array}
// Layout-------------------------------------------------------------------------------------------------------
lang : language object. default : en {Object}
mode : The mode of the editor ('classic', 'inline', 'balloon'). default: 'classic' {String}
toolbarWidth : The width of the toolbar. Applies only when the editor mode is
'inline' or 'balloon' mode. default: 'auto' {Number|String}
stickyToolbar : Reference height value that should be changed to sticky toolbar mode.
It can also be used when there is another fixed toolbar at the top.
Set to 0, '0px', '50px', etc.
If set to -1 or false or null to turn off. default: 0 {Number|String|Boolean}
iframe : Content will be placed in an iframe and isolated from the rest of the page. default: false {Boolean}
fullPage : Allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration. default: false {Boolean}
iframeCSSFileName : Name of the CSS file to apply inside the iframe.
Applied by searching by filename in the link tag of document. default: 'KothingEditor' {String}
codeMirror : If you put the CodeMirror object as an option, you can do Codeview using CodeMirror. default: null {Object}
Use version 5.0.0 or later.
ex) codeMirror: CodeMirror // Default option
codeMirror: { // Custom option
src: CodeMirror,
options: {
/** default options **
* mode: 'htmlmixed',
* htmlMode: true,
* lineNumbers: true
*/
}
}
// Display-------------------------------------------------------------------------------------------------------
position : The position property of KothingEditor. default: null {String}
display : The display property of KothingEditor. default: 'block' {String}
popupDisplay : Size of background area when activating dialog window ('full'||'local') default: 'full' {String}
// Bottom resizing bar-------------------------------------------------------------------------------------------
resizingBar : Show the bottom resizing bar.
If 'height' value is 'auto', it will not be resized. default: true {Boolean}
showPathLabel : Displays the current node structure to resizingBar. default: true {Boolean}
charCounter : Shows the number of characters in the editor.
If the maxCharCount option has a value, it becomes true. default: false {Boolean}
maxCharCount : The maximum number of characters allowed to be inserted into the editor. default: null {Number}
// Width size----------------------------------------------------------------------------------------------------
width : The width size of the editor. default: clientWidth||'100%' {Number|String}
minWidth : The min-width size of the editor.
Used when 'width' value is 'auto' or '~%'. default: null {Number|String}
maxWidth : The max-width size of the editor.
Used when 'width' value is 'auto' or '~%'. default: null {Number|String}
// Height size---------------------------------------------------------------------------------------------------
height : The height size of the editor. default: clientHeight||'auto' {Number|String}
minHeight : The min-height size of the editor.
Used when 'height' value is 'auto'. default: null {Number|String}
maxHeight : The max-height size of the editor.
Used when 'height' value is 'auto'. default: null {Number|String}
// Defining menu items-------------------------------------------------------------------------------------------
font : Change default font-family array. default: [...] {Array}
Default value: [
'Arial', 'Comic Sans MS', 'Courier New', 'Impact',
'Georgia','tahoma', 'Trebuchet MS', 'Verdana'
]
fontSize : Change default font-size array. default: [...] {Array}
Default value: [
8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72
]
formats : Change default formatBlock array. default: [...] {Array}
Default value: [
'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
],
Custom: [{
tag: 'div', // Tag name
class: '__se__xxx' || null, // Class names must always begin with "__se__"
title: 'Custom div' || null, // default: tag name
command: 'replace' || 'range' // default: "replace"
}]
colorList : Change default color array of color picker. default: [..[..]..] {Array}
Default value: [
'#ff0000', '#ff5e00', '#ffe400', '#abf200', '#00d8ff', '#0055ff', '#6600ff', '#ff00dd', '#000000',
'#ffd8d8', '#fae0d4', '#faf4c0', '#e4f7ba', '#d4f4fa', '#d9e5ff', '#e8d9ff', '#ffd9fa', '#f1f1f1',
'#ffa7a7', '#ffc19e', '#faed7d', '#cef279', '#b2ebf4', '#b2ccff', '#d1b2ff', '#ffb2f5', '#bdbdbd',
'#f15f5f', '#f29661', '#e5d85c', '#bce55c', '#5cd1e5', '#6699ff', '#a366ff', '#f261df', '#8c8c8c',
'#980000', '#993800', '#998a00', '#6b9900', '#008299', '#003399', '#3d0099', '#990085', '#353535',
'#670000', '#662500', '#665c00', '#476600', '#005766', '#002266', '#290066', '#660058', '#222222'
]
ex) [
['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'], // Line break
['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']
]
// Image---------------------------------------------------------------------------------------------------------
imageResizing : Can resize the image. default: true {Boolean}
imageWidth : The default width size of the image frame. default: 'auto' {Number}
imageFileInput : Choose whether to create a file input tag in the image upload window. default: true {Boolean}
imageUrlInput : Choose whether to create a image url input tag in the image upload window.
If the value of imageFileInput is false, it will be unconditionally. default: true {Boolean}
imageUploadHeader : Http Header when uploading images. default: null {Object}
imageUploadUrl : The image upload to server mapping address. default: null {String}
ex) "/editor/uploadImage.ajax"
When not used, it enters base64 data
return {
"errorMessage": "insert error message",
"result": [
{
"url": "/download/editorImg/test_image.jpg",
"name": "test_image.jpg",
"size": "561276"
}
]
}
imageUploadSizeLimit: The size of the total uploadable images (in bytes).
Invokes the "onImageUploadError" method. default: null {Number}
// Video----------------------------------------------------------------------------------------------------------
videoResizing : Can resize the video iframe. default: true {Boolean}
videoWidth : The default width size of the video frame. default: 560 {Number}
videoHeight : The default heigth size of the video frame. default: 315 {Number}
youtubeQuery : The query string of a YouTube embedded URL. default: '' {String}
It takes precedence over the value user entered.
ex) 'autoplay=1&mute=1&enablejsapi=1&controls=0&rel=0&modestbranding=1'
// https://developers.google.com/youtube/player_parameters
// Defining save button-------------------------------------------------------------------------------------------
callBackSave : Callback functions that is called when the Save button is clicked.
Arguments - (contents). default: userFunction.save {Function}
// Templates Array------------------------------------------------------------------------------------------------
templates : If you use a template plugin, add it.
Defines a list of templates. default: null {Array}
ex) [
{
name: 'Template-1',
html: '<p>HTML source1</p>'
},
{
name: 'Template-2',
html: '<p>HTML source2</p>'
}
]
// Buttons--------------------------------------------------------------------------------------------------------
toolBarItem : Defines button list to array {Array}
default: [
['undo', 'redo'],
// ['font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
// '/', Line break
// ['fontColor', 'hiliteColor'],
['outdent', 'indent'],
// ['align', 'horizontalRule', 'list', 'table'],
// ['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
['preview', 'print'],
// ['save', 'template'],
]
Functions
import KothingEditor from "kothing-editor";
const editor = KothingEditor.create("example");
// Add or reset option property
editor.setOptions({
minHeight: "300px",
toolBarItem: [["fontColor", "hiliteColor"]],
colorList: [
["#ccc", "#dedede", "OrangeRed", "Orange", "RoyalBlue", "SaddleBrown"],
],
});
// Open a notice area
editor.noticeOpen("test notice");
// Close a notice area
editor.noticeClose();
// Copies the contents of the KothingEditor into a [textarea]
editor.save();
// Gets the KothingEditor's context object. Contains settings, plugins, and cached element objects
editor.getContext();
// Gets the contents of the KothingEditor
editor.getContents();
// Gets a list of images uploaded to the editor
/**
* {
* src: imgage src
* index: data index
* name: file name
* size: file size
* select: select function
* delete: delete function
* }
**/
editor.getImagesInfo();
// Upload images using image plugin
editor.insertImage(FileList);
// Inserts an HTML element or HTML string or plain string at the current cursor position
editor.insertHTML('<img src="http://kothing.github.io/editor/img/beauty.jpg">');
// Change the contents of the KothingEditor
editor.setContents("set contents");
// Add content to the KothingEditor
editor.appendContents("append contents");
// Disable the KothingEditor
editor.disabled();
// Enabled the KothingEditor
editor.enabled();
// Hide the KothingEditor
editor.hide();
// Show the KothingEditor
editor.show();
// Destroy the KothingEditor
editor.destroy();
editor = null;
// Event functions
// It can be redefined by receiving event object as parameter.
// It is not called in exceptional cases and is called after the default event function has finished.
editor.onScroll = function(e) {
console.log("onScroll", e);
};
editor.onClick = function(e) {
console.log("onClick", e);
};
editor.onKeyDown = function(e) {
console.log("onKeyDown", e);
};
editor.onKeyUp = function(e) {
console.log("onKeyUp", e);
};
editor.onDrop = function(e) {
console.log("onDrop", e);
};
editor.onChange = function(contents) {
console.log("onChange", contents);
};
// Paste event.
// Called before the editor's default event action.
// If it returns false, it stops without executing the rest of the action.
/**
* cleanData : HTML string modified for editor format
* maxCharCount : maxChartCount option (true if max character is exceeded)
*/
editor.onPaste = function(e, cleanData, maxCharCount) {
console.log("onPaste", e, cleanData, maxCharCount);
};
// Called when the image is uploaded or the uploaded image is deleted.
/**
* targetImgElement: Current img element
* index: Uploaded index (key value)
* state: Upload status ('create', 'update', 'delete')
* imageInfo: {
* * index: data index
* * name: file name
* * size: file size
* * select: select function
* * delete: delete function
* }
* remainingFilesCount: Count of remaining image files
*/
editor.onImageUpload = function(
targetImgElement,
index,
state,
imageInfo,
remainingFilesCount
) {
console.log(
`targetImgElement:${targetImgElement}, index:${index}, state('create', 'update', 'delete'):${state}`
);
console.log(
`imageInfo:${imageInfo}, remainingFilesCount:${remainingFilesCount}`
);
};
// Called when the image is upload failed.
// If you return false, the default notices are not called.
/**
* errorMessage: Error message to show
* result: Result object
*/
editor.onImageUploadError = function(errorMessage, result) {
alert(errorMessage);
};
// Paste event.
// Called before the editor's default event action.
// If it returns false, it stops without executing the rest of the action.
/**
* toolbar: Toolbar Element
* context: The editor's context object (editor.getContext())
*/
editor.showInline = function(toolbar, context) {
console.log("toolbar", toolbar);
console.log("context", context);
};
Examples
Iframe, fullPage and use CodeMirror
Options template
Custom plugins
Document
Download Details:
Author: kothing
Demo: https://kothing.github.io/editor/
Source Code: https://github.com/kothing/Kothing-Editor
#javascript
What is GEEK
Buddha Community
1598408100
How to Use Syncfusion’s React Rich Text Editor with React Redux Form
The Syncfusion React Rich Text Editor component is a WYSIWYG editor component that can be used to frame a UI form control. It works seamlessly with React Redux Form and can validate inputs in form fields.
This blog explains the procedure to merge our Rich Text Editor component with Redux Form fields to validate inputs. The following topics are covered in this blog:
- What is Redux Form?
- Getting started with create-react-app
- Configuring the Syncfusion React Rich Text Editor component
- Create a redux store
- Create an RteForm.js file
- Integrate the Rich Text Editor form into a React component
- Resources
What is Redux Form?
Redux is an open-source JavaScript library. It is used to develop UI components in React and Angular platforms. redux -form is a validation library that can be integrated into any React web application easily. It uses the Redux library to store field input values and higher-order components.
Refer to the redux-form documentation page to get more information.
Now, let’s see how to create a React app with Redux and integrate our React Rich Text Editor within it.
Getting started with create-react-app
To create a React application, follow these steps:
Step 1: Use the create-react-app command to install the NuGet package globally that we will use to create a basic React application.
npm i create-react-app -g
You can create the app in any directory by using the create-react-app command.
Step 2: Move to the directory where you want to create the application and run the following command. Here, I am naming this app RichTextEditor-Redux-Form.
create-react-app RichTextEditor-Redux-Form
Thus, we have created the application.
#essential js 2 #react #rich text editor #web #javascript #react rich text editor
1626321063
JS Development Company India | JavaScript Development Services
PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.
With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.
Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.
Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.
#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company
1605177504
Text to Speech in Node.js
In this video, I will be showing you how to turn text into speech in Node.js
#javascript #text to speech #javascript api #text to speech app #node.js text to speech #javascript text to speech
1623668860
Blazor Rich Text Editor - Markdown Editor Component
Overview
The Blazor Rich Text Editor is a feature-rich WYSIWYG HTML editor and WYSIWYG Markdown editor. The Rich Text Editor is used to create blogs, forum posts, notes sections, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient user interface for a better editing experience with mobile support. It has a variety of tools to edit and format rich content and returns valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, and lists with modular architectures.
- Edit WYSIWYG HTML and markdown content with a rich set of tools for modern web and mobile applications.
- Easily incorporate into blogs editor, messages, HTML email composer, and discussion forum-like applications.
- Make a floating toolbar or inline editor that allows you to select any editable element on the page and edit-in-place.
https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor
#wysiwyg #editor #blazor rich text editor #web-development
1594963828
Top 15 Free JavaScript Frameworks for Web Applications
List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.
This article will help you understand the various types of JavaScript Framework available in the market. When it comes to choosing the best platform for you, it’s not only the number of features you need to consider but also its functionality. The ease with which it fits within your project is also an essential factor. The next step is to choose the framework that best fits your company requirements or you can select the best from the list of top web development companies to develop your product based on your requirements.
#javascript frameworks for web applications #web applications development companies #progressive javascript framework #javascript frameworks #javascript #frameworks