Hello TinyEditor!
Edit
src/App.vue to test HMR
Check out Vite + Vue 3 documentation for more information.
``` -------------------------------- ### Vue Component: Modal Dialog Example Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Demonstrates the implementation of a modal dialog component. This example shows how to control the modal's visibility, add content, and handle confirmation/cancellation actions. ```htmlThis is the content of the dialog.
Hello, Tiny-Editor!
'); // Get content const currentContent = editor.getContent(); console.log(currentContent); ``` -------------------------------- ### Vue Component: Basic Button Example Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Demonstrates the basic usage of a button component in Vue.js. This snippet shows how to import, register, and render a button with customizable text and event handling. ```htmlThis is new content!
'); ``` -------------------------------- ### Add Contributor to List Source: https://github.com/opentiny/tiny-editor/blob/main/CONTRIBUTING.md Command to add a user to the contributor list using the all-contributors bot. This should be used in issues or pull requests to recognize contributions. ```shell @all-contributors please add @This is new content!
'); ``` -------------------------------- ### Get Editor Module Instance Source: https://github.com/opentiny/tiny-editor/blob/main/packages/docs/fluent-editor/docs/api/fluent-editor-instance.md Retrieves an instance of a specific module within the TinyEditor (Quill) instance. The 'name' parameter should be the module name, not the full path (e.g., 'toolbar' instead of 'modules/toolbar'). ```typescript class Quill { getModule(name: string): any } const toolbar = quill.getModule('toolbar') const i18n = quill.getModule('i18n') ``` -------------------------------- ### TypeScript: Editor Content Manipulation Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Demonstrates how to get and set the content of the Tiny-Editor using TypeScript. This is useful for loading existing data or saving the editor's current state. It assumes an editor instance has already been created. ```typescript const editorInstance = new Editor({ selector: "#myeditor" }); // Get content const content = editorInstance.getContent(); console.log(content); // Set content editorInstance.setContent('This is new content!
'); ``` -------------------------------- ### Get Editor Contents as Delta Source: https://github.com/opentiny/tiny-editor/blob/main/packages/docs/fluent-editor/docs/api/fluent-editor-instance.md Fetches the Delta data representing the editor's content. Optional 'index' and 'length' parameters can be provided to retrieve a specific portion of the content. If omitted, the entire content is returned. ```typescript class Quill { getContents(index: number = 0, length: number = remaining): Delta } const delta = editor.getContents() ``` -------------------------------- ### Configure Character Counter Module (JavaScript) Source: https://context7.com/opentiny/tiny-editor/llms.txt Shows how to integrate and configure the Character Counter module for TinyEditor, enabling character or word counting with customizable templates and limits. It also demonstrates accessing the counter module programmatically to get the current content length. ```javascript import TinyEditor from '@opentiny/fluent-editor' const editor = new TinyEditor('#editor', { theme: 'snow', modules: { toolbar: true, counter: { unit: 'char', // 'char' or 'word' format: 'text', // 'text' or 'html' count: 500, // Maximum count template: '{{count}} / {{totalCount}} {{countUnit}}', errorTemplate: 'Exceeded limit by {{restCount}} {{countUnit}}' } } }) // Custom template function const editorWithCustomCounter = new TinyEditor('#editor2', { modules: { counter: { unit: 'word', count: 200, template: (count, restCount) => { return `Words: ${count}, Remaining: ${restCount}` }, errorTemplate: (count, restCount) => { return `Over limit! Remove ${Math.abs(restCount)} words` } } } }) // Access counter programmatically const counterModule = editor.getModule('counter') const currentLength = counterModule.getContentLength('text') ``` -------------------------------- ### JavaScript: Getting Plain Text Content from Tiny-Editor Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This JavaScript code demonstrates how to retrieve the plain text representation of the content currently in the Tiny-Editor. The `getText` method is called on the editor instance, returning a string stripped of all HTML formatting. This is useful for tasks like character counting or simple text storage. ```javascript // Assuming 'editor' is an instance of TinyEditor function getPlainText(editorInstance) { const plainText = editorInstance.getText(); console.log('Plain text content:', plainText); return plainText; } // Example usage: // const currentText = getPlainText(editor); ``` -------------------------------- ### Configure Emoji Picker in Tiny-Editor (JavaScript) Source: https://context7.com/opentiny/tiny-editor/llms.txt This snippet shows how to enable and configure the emoji picker module in Tiny-Editor using JavaScript. It covers options for theme, locale, emoji set, positioning of UI elements, and categories. It also includes examples of programmatically opening/closing the picker and inserting emojis. ```javascript import TinyEditor from '@opentiny/fluent-editor' const editor = new TinyEditor('#editor', { theme: 'snow', modules: { toolbar: [ ['emoji'], // Add emoji button to toolbar ['bold', 'italic'] ], emoji: { theme: 'light', // 'light' or 'dark' locale: 'en', // Language for emoji search set: 'native', // 'native', 'apple', 'google', 'twitter', 'facebook' skinTonePosition: 'none', // 'none', 'search', 'preview' previewPosition: 'bottom', // 'top', 'bottom', 'none' searchPosition: 'sticky', // 'sticky', 'static', 'none' categories: [ 'frequent', 'people', 'nature', 'foods', 'activity', 'places', 'objects', 'symbols', 'flags' ], maxFrequentRows: 2, perLine: 8, navPosition: 'top', // 'top', 'bottom', 'none' noCountryFlags: false, dynamicWidth: false } } }) // Programmatically open/close emoji picker const emojiModule = editor.getModule('emoji') emojiModule.openDialog() emojiModule.closeDialog() // Insert emoji programmatically const range = editor.getSelection(true) editor.insertText(range.index, '😀', 'user') editor.setSelection(range.index + 2) ``` -------------------------------- ### JavaScript: Basic Editor Initialization and Configuration Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Demonstrates how to initialize and configure the Tiny-Editor using JavaScript. Covers essential options for setting up the editor instance. ```javascript const editor = new TinyEditor({ selector: '#myeditor', plugins: 'lists link image', // Example plugins toolbar: 'undo redo | bold italic | link image' }); ``` -------------------------------- ### Tiny Editor Configuration and Initialization (JavaScript) Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet shows how to configure and initialize the tiny-editor. It demonstrates setting up basic options and creating an instance of the editor. Dependencies include the core tiny-editor library. ```javascript const editor = new TinyEditor({ selector: '#my-editor', plugins: 'lists link image charmap print preview anchor', toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image', height: 500 }); ``` -------------------------------- ### Configuration Loading and Management in JavaScript Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet deals with loading and managing configuration settings for the tiny-editor. This could involve reading settings from a file, an object, or a remote source. It ensures the editor behaves according to specified parameters. ```javascript function loadConfiguration(configPath) { // Implementation for loading configuration console.log('Loading configuration from:', configPath); return {}; // Placeholder for configuration object } ``` -------------------------------- ### Initialize Basic TinyEditor and Manage Content (JavaScript) Source: https://context7.com/opentiny/tiny-editor/llms.txt Demonstrates how to initialize a basic TinyEditor instance with a toolbar, set and retrieve editor content in various formats (HTML, plain text, Delta), and listen for text change events. Requires the '@opentiny/fluent-editor' package and its CSS. ```javascript import TinyEditor from '@opentiny/fluent-editor' import '@opentiny/fluent-editor/style.css' // Create editor from HTML element const editor = new TinyEditor('#editor', { theme: 'snow', placeholder: 'Start typing...', modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'indent': '-1' }, { 'indent': '+1' }], ['link', 'image', 'video'], ['clean'] ] } }) // Get editor content const content = editor.root.innerHTML const text = editor.getText() const delta = editor.getContents() // Set editor content editor.setText('Hello World') editor.setContents([{ insert: 'Hello ' }, { insert: 'World', attributes: { bold: true } }]) // Listen to text changes editor.on('text-change', (delta, oldDelta, source) => { console.log('Text changed:', delta) console.log('Current length:', editor.getLength()) }) ``` -------------------------------- ### JavaScript: Rich Text Editor Initialization with Options Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This JavaScript code demonstrates the initialization of the Tiny-Editor with various configuration options. It shows how to set the placeholder text, enable or disable specific features like spell checking and auto-saving, and define the initial content of the editor. This is crucial for customizing the editor's behavior and appearance. ```javascript const editorOptions = { placeholder: 'Enter your text here...', spellcheck: true, autoSave: { enable: true, interval: 5000 // Save every 5 seconds }, initialContent: 'This is the initial content.
', // Other configuration options can be added here }; // Assuming TinyEditor is a globally available class or imported module const editor = new TinyEditor(editorOptions); editor.render('#editor-container'); // Render the editor into a specific DOM element ``` -------------------------------- ### JavaScript: Configuration Options for Tiny Editor Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This JavaScript snippet shows how to configure the Tiny Editor instance. It defines a configuration object that can be passed during initialization to customize behavior, appearance, and features. This allows for flexible integration into different applications. Input is a JavaScript object, output is a configured editor instance. ```JavaScript const editorConfig = { theme: 'dark', plugins: [ 'bold', 'italic', 'underline', 'lists', 'link' ], toolbar: 'bold italic | alignleft aligncenter | bullist numlist | link', height: 300, menubar: false }; // Assuming tinymce is loaded and available tinymce.init({ selector: '#my-editor', ...editorConfig }); ``` -------------------------------- ### Configure Tiny-Editor Initialization Options (JavaScript) Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This JavaScript code shows various initialization options for the Tiny-Editor. It covers settings related to plugins, toolbar configuration, theme, height, and other general editor behaviors. ```javascript tinymce.init({ selector: 'textarea', plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pagebreak', toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline | link image media table mergetags | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat', height: 400, width: 800, menubar: 'file edit view insert format tools table', // Other configuration options... }); ``` -------------------------------- ### JavaScript: Getting Editor Content Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Retrieves the current content of the Tiny-Editor instance. This function is typically used when a user submits a form or when saving the editor's state. It returns the HTML content as a string. ```javascript var content = editor.getContent(); console.log(content); ``` -------------------------------- ### Configuration Loading Function Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This function is responsible for loading configuration settings, potentially from a file or environment variables. It returns a configuration object used to initialize the editor. Error handling for missing or invalid configurations is crucial. ```javascript import fs from 'fs'; function loadConfig(configPath = './config.json') { try { const configData = fs.readFileSync(configPath, 'utf-8'); return JSON.parse(configData); } catch (error) { console.error(`Error loading configuration from ${configPath}:`, error); // Return default configuration or throw an error return { theme: 'light', plugins: [] }; } } const editorConfig = loadConfig(); console.log('Loaded Config:', editorConfig); ``` -------------------------------- ### JavaScript: Basic Editor Initialization Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Initializes a basic instance of the Tiny-Editor using JavaScript. This is a fundamental step for integrating the editor into an application. It requires the 'tiny-editor' package. ```javascript const editor = tinymce.init({ selector: "#myeditor", plugins: "lists link image", toolbar: "undo redo | bold italic | alignleft aligncenter alignright | code", height: 400 }); ``` -------------------------------- ### TypeScript: Basic Editor Initialization Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Initializes a basic instance of the Tiny-Editor using TypeScript. This is a fundamental step for integrating the editor into an application. It requires the 'tiny-editor' package. ```typescript import Editor from "@opentiny/tiny-editor"; const editor = new Editor({ selector: "#myeditor", plugins: "lists link image", toolbar: "undo redo | bold italic | alignleft aligncenter alignright | code", height: 400 }); ``` -------------------------------- ### Tiny Editor Plugin Integration (JavaScript) Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Illustrates how to add and configure plugins for the tiny-editor. Plugins extend the editor's functionality, such as adding image upload or link features. Ensure the plugin JavaScript files are correctly included. ```javascript tinymce.init({ selector: '#my-editor', plugins: 'code visualblocks visualaid fullscreen image link media table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help', toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | help', menubar: 'file edit view insert format tools table', // ... other configurations }); ``` -------------------------------- ### Basic Data Structure Operations in Go Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Demonstrates fundamental operations on slices (Go's dynamic arrays) and maps (key-value pairs) in Go. These are building blocks for managing data within the editor's backend logic. ```go package main import "fmt" func main() { // Slice operations smySlice := []int{1, 2, 3, 4, 5} fmt.Println("Slice:", mySlice) fmt.Println("First element:", mySlice[0]) smySlice = append(mySlice, 6) fmt.Println("Appended slice:", mySlice) // Map operations myMap := make(map[string]int) myMap["apple"] = 1 myMap["banana"] = 2 fmt.Println("Map:", myMap) fmt.Println("Value for apple:", myMap["apple"]) delete(myMap, "banana") fmt.Println("Map after delete:", myMap) } ``` -------------------------------- ### Handle Text Input and Formatting in Tiny-Editor (JavaScript) Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet demonstrates how to handle text input and apply basic formatting within the Tiny-Editor using JavaScript. It captures user input, processes it, and updates the editor's content. Dependencies include the editor's core API. ```javascript function handleTextInput(event) { const inputText = event.target.value; // Process inputText and apply formatting applyFormatting(inputText); updateEditorContent(inputText); } ``` -------------------------------- ### Initialize TinyEditor Instance Source: https://github.com/opentiny/tiny-editor/blob/main/packages/docs/fluent-editor/docs/api/fluent-editor-instance.md Initializes a TinyEditor rich text editor instance and provides the editor object. The editor is based on Quill, so its instance object inherits all variables and methods from the Quill instance. ```typescript import FluentEditor from '@opentiny/fluent-editor' // TinyEditor 实例对象 const editor = new FluentEditor(container, options) ``` -------------------------------- ### String Searching and Slicing in Python Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Illustrates how to perform string searching (finding substrings) and slicing (extracting parts of strings) in Python. This is useful for text analysis and manipulation within the editor's context. ```python text = "This is a sample string for demonstration." # Find the starting index of a substring index = text.find("sample") print(f"'sample' found at index: {index}") # Slice the string to get a portion substring = text[10:20] print(f"Substring from index 10 to 20: '{substring}'") # Check if a string starts or ends with a substring starts_with_this = text.startswith("This") ends_with_tion = text.endswith("demonstration.") print(f"Starts with 'This': {starts_with_this}") print(f"Ends with 'demonstration.': {ends_with_tion}") ``` -------------------------------- ### Initialize TinyEditor Source: https://github.com/opentiny/tiny-editor/blob/main/packages/docs/fluent-editor/docs/api/options.md Demonstrates the basic initialization of the TinyEditor rich text editor. It requires a container element (CSS selector or DOM object) and an options object for customization. ```typescript import FluentEditor from '@opentiny/fluent-editor' const editor = new FluentEditor(container, options) ``` -------------------------------- ### Dynamically Generate Tooltip Text for Script Formats Source: https://github.com/opentiny/tiny-editor/blob/main/packages/docs/fluent-editor/docs/modules/toolbar-tip.md This JavaScript code demonstrates how to dynamically generate tooltip text for the 'script' format (subscript/superscript) in FluentEditor using the `onShow` function within `tipTextMap`. This approach allows for context-aware tooltip messages based on the script type. Note that if `onShow` is used, the string or `msg`/`content` values are ignored. ```javascript const QuillToolbarTipOption = { tipTextMap: { script: { onShow(target, value) { const text = { sub: 'Subscript', super: 'Superscript', } return text[value] || null }, }, }, } ``` -------------------------------- ### Event Bus or Pub/Sub Implementation in JavaScript Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet likely implements an event bus or publish/subscribe mechanism. This pattern is useful for decoupling different parts of the application, allowing components to communicate without direct dependencies. It facilitates asynchronous event handling. ```javascript class EventBus { constructor() { this.listeners = {}; } on(event, callback) { if (!this.listeners[event]) { this.listeners[event] = []; } this.listeners[event].push(callback); } emit(event, data) { if (this.listeners[event]) { this.listeners[event].forEach(callback => callback(data)); } } } ``` -------------------------------- ### Handle Image Uploads in Tiny-Editor (JavaScript) Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This JavaScript code snippet demonstrates the process of handling image uploads within the Tiny-Editor. It includes logic for selecting an image file, uploading it to a server, and inserting the image URL into the editor content. ```javascript function handleImageUpload(file) { const formData = new FormData(); formData.append('image', file); fetch('/upload-image', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { insertImageIntoEditor(data.imageUrl); }) .catch(error => { console.error('Image upload failed:', error); }); } ``` -------------------------------- ### Markdown Parsing and Rendering Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet demonstrates how to parse Markdown text and render it into HTML. It typically involves a Markdown parsing library. The output is an HTML string, and it's generally safe for direct DOM insertion if properly sanitized. ```javascript import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const markdownText = '# Hello, Tiny Editor!\n\nThis is a **bold** text. And *italic* text.'; const htmlResult = md.render(markdownText); console.log(htmlResult); // Output:This is a bold text. And italic text.
``` -------------------------------- ### Syntax Highlighting Utility Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground A utility function for applying syntax highlighting to code blocks within the editor. This function takes a language identifier and the code string as input and returns the highlighted HTML. It may rely on external libraries like highlight.js. ```javascript import hljs from 'highlight.js'; function highlightCode(code, language) { if (language && hljs.getLanguage(language)) { return hljs.highlight(code, { language: language }).value; } else { return code; } } const javascriptCode = 'function greet() { console.log("Hello!"); }'; const highlightedJs = highlightCode(javascriptCode, 'javascript'); console.log(highlightedJs); // Output: function greet() { console.log("Hello!"); } ``` -------------------------------- ### String Manipulation and Parsing with JavaScript Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground Demonstrates common string manipulation and parsing techniques in JavaScript, useful for handling text data within the editor. This snippet focuses on basic string operations and regular expression matching. ```javascript function parseString(str) { // Example: Remove leading/trailing whitespace const trimmedStr = str.trim(); // Example: Replace occurrences of a substring const replacedStr = trimmedStr.replace(/old/g, 'new'); // Example: Split string into an array const parts = replacedStr.split('-'); return { trimmedStr, replacedStr, parts }; } const inputText = " some old text example "; const result = parseString(inputText); console.log(result); ``` -------------------------------- ### JavaScript: Toolbar Button Configuration for Tiny-Editor Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet outlines the configuration for toolbar buttons in the Tiny-Editor. It defines an array of button objects, each with a type, name, and optional configuration. This allows for customization of the editor's user interface and available formatting options. Dependencies include the editor's internal component system. ```javascript const toolbarConfig = [ { type: 'button', name: 'bold' }, { type: 'button', name: 'italic' }, { type: 'button', name: 'underline' }, { type: 'separator' }, { type: 'dropdown', name: 'fontSize', options: ['12px', '16px', '20px'] }, { type: 'button', name: 'insertImage' }, { type: 'button', name: 'insertLink' } ]; // Example of how this might be used to initialize the editor: // const editor = new TinyEditor({ // toolbar: toolbarConfig, // // other configurations... // }); ``` -------------------------------- ### CSS: Styling for Tiny Editor Components Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet provides CSS rules for styling components within the Tiny Editor. It covers basic layout, typography, and interactive element styling. These styles are essential for the visual presentation and user experience of the editor. No specific JavaScript dependencies are required, but they complement editor functionality. ```CSS .tiny-editor-toolbar { background-color: #f0f0f0; padding: 10px; border-bottom: 1px solid #ccc; } .tiny-editor-button { background-color: #fff; border: 1px solid #ddd; padding: 5px 10px; margin-right: 5px; cursor: pointer; } .tiny-editor-button:hover { background-color: #e0e0e0; } ``` -------------------------------- ### JavaScript: Basic DOM Manipulation for Tiny-Editor Source: https://github.com/opentiny/tiny-editor/wiki/Fluent-Editor-Playground This snippet demonstrates fundamental JavaScript DOM manipulation techniques likely used within the Tiny-Editor for element creation and modification. It assumes a browser environment and does not include external dependencies. ```javascript function createEditorElement(tagName, attributes = {}) { const element = document.createElement(tagName); for (const key in attributes) { element.setAttribute(key, attributes[key]); } return element; } function appendContent(parentElement, content) { if (typeof content === 'string') { parentElement.textContent = content; } else { parentElement.appendChild(content); } } const editorContainer = createEditorElement('div', { id: 'tiny-editor' }); const toolbar = createEditorElement('div', { class: 'toolbar' }); const contentArea = createEditorElement('div', { contenteditable: true, class: 'content' }); appendContent(toolbar, createEditorElement('button', { class: 'bold-btn' }, 'B')); appendContent(editorContainer, toolbar); appendContent(editorContainer, contentArea); document.body.appendChild(editorContainer); ``` -------------------------------- ### Initialize TinyEditor in JavaScript Source: https://github.com/opentiny/tiny-editor/blob/main/README.md Initializes the TinyEditor instance by targeting an HTML element and configuring its theme. It requires importing the editor and its styles. ```javascript import TinyEditor from '@opentiny/fluent-editor' const editor = new TinyEditor('#editor', { theme: 'snow', }) ``` -------------------------------- ### Import TinyEditor CSS Styles Source: https://github.com/opentiny/tiny-editor/blob/main/README.md Imports the necessary CSS styles for TinyEditor to render correctly. This should be done before initializing the editor. ```css @import '@opentiny/fluent-editor/style.css'; ``` -------------------------------- ### Initialize TinyEditor with HTML and JavaScript Source: https://github.com/opentiny/tiny-editor/blob/main/README.zh-CN.md Demonstrates how to set up a basic HTML structure for the editor and then initialize TinyEditor using JavaScript. It includes importing the editor, defining the HTML container, and creating a new editor instance with theme configuration. ```htmlHello TinyEditor!