Quill.js文本编辑器

最新推荐文章于 2025-02-21 14:04:53 发布
最新推荐文章于 2025-02-21 14:04:53 发布
阅读量1k 收藏 1
点赞数
分类专栏： UEditor.js|Quill.js|Summernote
原文链接：https://blog.csdn.net/WuLex
版权
Dillinger是一款强大的在线Markdown编辑器，它提供了实时预览功能，允许用户在左侧编辑Markdown，右侧即时显示HTML渲染结果。编辑器支持多种样式主题，包括Snow和Bubble，还集成了Quill富文本编辑器。此外，Dillinger能够将HTML转换为Markdown，并且可以导出为HTML、Markdown和PDF格式。编辑器还具备导入GitHub、Dropbox、Google Drive和OneDrive文件的能力，以及拖放图片上传（需要关联Dropbox账号）。Dillinger的源代码是开源的，可在GitHub上找到，它使用AngularJS、jQuery、Ace Editor、markdown-it等技术构建，并支持自定义扩展。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
    <title>Text Editor</title>
    <link rel="stylesheet" href="quill.snow.css">
    <link rel="stylesheet" href="quill.bubble.css">
    <link rel="stylesheet" href="sakura.css">
    <script src="quill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/to-markdown/3.1.1/to-markdown.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/12.0.2/markdown-it.js"></script>
    <style>

        #editor-container {
            height: 200px;
        }

        #markdown {
            background-color: #eeffee;
            min-height: 200px;
        }

        #html {
            background-color: #ffeeee;
            min-height: 200px;
        }

        #output-quill {
            background-color: #ffeeff;
            min-height: 200px;
        }

        ol.ql-indent-1
        {
            margin-left: 200px;
        }

        #output-markdown {
            background-color: #ffeeff;
            min-height: 200px;
        }
    </style>
</head>
<body>


    <h1>Quill JS Editor</h1>
    <hr>
    <div id="editor-container">
    </div>

    <h1>Rendered Markdown</h1>
    <hr>
    <div id="output-markdown"></div>

    <h1>Rendered HTML</h1>
    <hr>
    <div id="output-quill"></div>

    <h1>RAW HTML</h1>
    <hr>
    <div id="html"></div>

    <h1>Markdown Code</h1>
    <hr>
    <div>
        <pre id="markdown"></pre>
    </div>

    <script>

        (function () {
            function init(raw_markdown) {
                var quill = new Quill("#editor-container", {
                    modules: {
                        toolbar: [
                            [{ header: [1, 2, false] }],
                            ["bold", "italic", "underline"],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            ["image", "code-block"]
                        ]
                    },
                    placeholder: "Compose an epic...",
                    theme: "snow" // or 'bubble'
                });

                var md = window.markdownit();
                md.set({
                    html: true
                });

                var result = md.render(raw_markdown);

                quill.clipboard.dangerouslyPasteHTML(result + "\n");

				//我们在传递初始数据时需要进行第一次执行。
                var html = quill.container.firstChild.innerHTML;
                $("#markdown").text(toMarkdown(html));
                $("#html").text(html);
                $("#output-quill").html(html);
                $("#output-markdown").html(result);

				// text-change 可能不是正确的事件挂钩。 现在可以使用。
                quill.on("text-change", function (delta, source) {
                    var html = quill.container.firstChild.innerHTML;
                    var markdown = toMarkdown(html);
                    var rendered_markdown = md.render(markdown);
                    $("#markdown").text(markdown);
                    $("#html").text(html);
                    $("#output-quill").html(html);
                    $("#output-markdown").html(rendered_markdown);
                });
            }

            //只有一些构造的markdown来自服务器。
            var text = "";
            text += "# Dillinger" + "\n";
            text += " " + "\n";
            text += "[![N|Solid](https://cldup.com/dTxpPi9lDf.thumb.png)](https://nodesource.com/products/nsolid)" + "\n";
            text += " " + "\n";
            text += "Dillinger is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor." + "\n";
            text += " " + "\n";
            text += "  - Type some Markdown on the left" + "\n";
            text += "  - See HTML in the right" + "\n";
            text += "  - Magic" + "\n";
            text += " " + "\n";
            text += "# New Features!" + "\n";
            text += " " + "\n";
            text += "  - Import a HTML file and watch it magically convert to Markdown" + "\n";
            text += "  - Drag and drop images (requires your Dropbox account be linked)" + "\n";
            text += " " + "\n";
            text += " " + "\n";
            text += "You can also:" + "\n";
            text += "  - Import and save files from GitHub, Dropbox, Google Drive and One Drive" + "\n";
            text += "  - Drag and drop markdown and HTML files into Dillinger" + "\n";
            text += "  - Export documents as Markdown, HTML and PDF" + "\n";
            text += " " + "\n";
            text += "Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email.  As [John Gruber] writes on the [Markdown site][df1]" + "\n";
            text += " " + "\n";
            text += "> The overriding design goal for Markdown's" + "\n";
            text += "> formatting syntax is to make it as readable" + "\n";
            text += "> as possible. The idea is that a" + "\n";
            text += "> Markdown-formatted document should be" + "\n";
            text += "> publishable as-is, as plain text, without" + "\n";
            text += "> looking like it's been marked up with tags" + "\n";
            text += "> or formatting instructions." + "\n";
            text += " " + "\n";
            text += "This text you see here is *actually* written in Markdown! To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right." + "\n";
            text += " " + "\n";
            text += "### Tech" + "\n";
            text += " " + "\n";
            text += "Dillinger uses a number of open source projects to work properly:" + "\n";
            text += " " + "\n";
            text += "* [AngularJS] - HTML enhanced for web apps!" + "\n";
            text += "* [Ace Editor] - awesome web-based text editor" + "\n";
            text += "* [markdown-it] - Markdown parser done right. Fast and easy to extend." + "\n";
            text += "* [Twitter Bootstrap] - great UI boilerplate for modern web apps" + "\n";
            text += "* [node.js] - evented I/O for the backend" + "\n";
            text += "* [Express] - fast node.js network app framework [@tjholowaychuk]" + "\n";
            text += "* [Gulp] - the streaming build system" + "\n";
            text += "* [Breakdance](http://breakdance.io) - HTML to Markdown converter" + "\n";
            text += "* [jQuery] - duh" + "\n";
            text += " " + "\n";
            text += "And of course Dillinger itself is open source with a [public repository][dill]" + "\n";
            text += " on GitHub." + "\n";
            text += " " + "\n";
            text += "### Installation" + "\n";
            text += " " + "\n";
            text += "Dillinger requires [Node.js](https://nodejs.org/) v4+ to run." + "\n";
            text += " " + "\n";
            text += "Install the dependencies and devDependencies and start the server." + "\n";
            text += " " + "\n";
            text += "```sh" + "\n";
            text += "$ cd dillinger" + "\n";
            text += "$ npm install -d" + "\n";
            text += "$ node app" + "\n";
            text += "```" + "\n";
            text += " " + "\n";
            text += "For production environments..." + "\n";
            text += " " + "\n";
            text += "```sh" + "\n";
            text += "$ npm install --production" + "\n";
            text += "$ npm run predeploy" + "\n";
            text += "$ NODE_ENV=production node app" + "\n";
            text += "```" + "\n";
            text += " " + "\n";
            text += "### Plugins" + "\n";
            text += " " + "\n";
            text += "Dillinger is currently extended with the following plugins. Instructions on how to use them in your own application are linked below." + "\n";
            text += " " + "\n";
            text += "| Plugin | README |" + "\n";
            text += "| ------ | ------ |" + "\n";
            text += "| Dropbox | [plugins/dropbox/README.md] [PlDb] |" + "\n";
            text += "| Github | [plugins/github/README.md] [PlGh] |" + "\n";
            text += "| Google Drive | [plugins/googledrive/README.md] [PlGd] |" + "\n";
            text += "| OneDrive | [plugins/onedrive/README.md] [PlOd] |" + "\n";
            text += "| Medium | [plugins/medium/README.md] [PlMe] |" + "\n";
            text += "| Google Analytics | [plugins/googleanalytics/README.md] [PlGa] |" + "\n";
            text += " " + "\n";
            text += " " + "\n";
            text += "### Development" + "\n";
            text += " " + "\n";
            text += "Want to contribute? Great!" + "\n";
            text += " " + "\n";
            text += "Dillinger uses Gulp + Webpack for fast developing." + "\n";
            text += "Make a change in your file and instantanously see your updates!" + "\n";
            text += " " + "\n";
            text += "Open your favorite Terminal and run these commands." + "\n";
            text += " " + "\n";
            text += "First Tab:" + "\n";
            text += "```sh" + "\n";
            text += "$ node app" + "\n";
            text += "```" + "\n";
            text += " " + "\n";
            text += "Second Tab:" + "\n";
            text += "```sh" + "\n";
            text += "$ gulp watch" + "\n";
            text += "```" + "\n";
            text += " " + "\n";
            text += "(optional) Third:" + "\n";
            text += "```sh" + "\n";
            text += "$ karma test" + "\n";
            text += "```" + "\n";
            text += "#### Building for source" + "\n";
            text += "For production release:" + "\n";
            text += "```sh" + "\n";
            text += "$ gulp build --prod" + "\n";
            text += "```" + "\n";
            text += "Generating pre-built zip archives for distribution:" + "\n";
            text += "```sh" + "\n";
            text += "$ gulp build dist --prod" + "\n";
            text += "```" + "\n";
            text += "### Docker" + "\n";
            text += "Dillinger is very easy to install and deploy in a Docker container." + "\n";
            text += " " + "\n";
            text += "By default, the Docker will expose port 80, so change this within the Dockerfile if necessary. When ready, simply use the Dockerfile to build the image." + "\n";
            text += " " + "\n";
            text += "```sh" + "\n";
            text += "cd dillinger" + "\n";
            text += "docker build -t joemccann/dillinger:${package.json.version}" + "\n";
            text += "```" + "\n";
            text += "This will create the dillinger image and pull in the necessary dependencies. Be sure to swap out `${package.json.version}` with the actual version of Dillinger." + "\n";
            text += " " + "\n";
            text += "Once done, run the Docker image and map the port to whatever you wish on your host. In this example, we simply map port 8000 of the host to port 80 of the Docker (or whatever port was exposed in the Dockerfile):" + "\n";
            text += " " + "\n";
            text += "```sh" + "\n";
            text += "docker run -d -p 8000:8080 --restart=\"always\" <youruser>/dillinger:${package.json.version}" + "\n";
            text += "```" + "\n";
            text += " " + "\n";
            text += "Verify the deployment by navigating to your server address in your preferred browser." + "\n";
            text += " " + "\n";
            text += "```sh" + "\n";
            text += "127.0.0.1:8000" + "\n";
            text += "```" + "\n";
            text += " " + "\n";
            text += "#### Kubernetes + Google Cloud" + "\n";
            text += " " + "\n";
            text += "See [KUBERNETES.md](https://github.com/joemccann/dillinger/blob/master/KUBERNETES.md)" + "\n";
            text += " " + "\n";
            text += " " + "\n";
            text += "### Todos" + "\n";
            text += " " + "\n";
            text += " - Write MOAR Tests" + "\n";
            text += " - Add Night Mode" + "\n";
            text += " " + "\n";
            text += "License" + "\n";
            text += "----" + "\n";
            text += " " + "\n";
            text += "MIT" + "\n";
            text += " " + "\n";
            text += " " + "\n";
            text += "**Free Software, Hell Yeah!**" + "\n";
            text += " " + "\n";
            text += "[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)" + "\n";
            text += " " + "\n";
            text += " " + "\n";
            text += "   [dill]: <https://github.com/joemccann/dillinger>" + "\n";
            text += "   [git-repo-url]: <https://github.com/joemccann/dillinger.git>" + "\n";
            text += "   [john gruber]: <http://daringfireball.net>" + "\n";
            text += "   [df1]: <http://daringfireball.net/projects/markdown/>" + "\n";
            text += "   [markdown-it]: <https://github.com/markdown-it/markdown-it>" + "\n";
            text += "   [Ace Editor]: <http://ace.ajax.org>" + "\n";
            text += "   [node.js]: <http://nodejs.org>" + "\n";
            text += "   [Twitter Bootstrap]: <https://twitter.github.com/bootstrap/>" + "\n";
            text += "   [jQuery]: <https://jquery.com>" + "\n";
            text += "   [@tjholowaychuk]: <https://twitter.com/tjholowaychuk>" + "\n";
            text += "   [express]: <http://expressjs.com>" + "\n";
            text += "   [AngularJS]: <https://angularjs.org>" + "\n";
            text += "   [Gulp]: <http://gulpjs.com>" + "\n";
            text += " " + "\n";
            text += "   [PlDb]: <https://github.com/joemccann/dillinger/tree/master/plugins/dropbox/README.md>" + "\n";
            text += "   [PlGh]: <https://github.com/joemccann/dillinger/tree/master/plugins/github/README.md>" + "\n";
            text += "   [PlGd]: <https://github.com/joemccann/dillinger/tree/master/plugins/googledrive/README.md>" + "\n";
            text += "   [PlOd]: <https://github.com/joemccann/dillinger/tree/master/plugins/onedrive/README.md>" + "\n";
            text += "   [PlMe]: <https://github.com/joemccann/dillinger/tree/master/plugins/medium/README.md>" + "\n";
            text += "   [PlGa]: <https://github.com/RahulHP/dillinger/blob/master/plugins/googleanalytics/README.md>" + "\n";

            text = "<ol><li>List Item 1<li><li><ol><li>Point a</li></ol></li></ol>";

            init(text);
        })();

    </script>
</body>
</html>

如图

在这里插入图片描述

下载

现代富文本编辑器Quill的内容渲染机制
skysys的研究小屋
08-27 2136
转载自DevUI团队文章。 在 Web 开发领域，富文本编辑器（ Rich Text Editor ）是一个使用场景非常广，又非常复杂的组件。 要从0开始做一款好用、功能强大的富文本编辑器并不容易，基于现有的开源库进行开发能节省不少成本。 Quill 是一个很不错的选择。 本文主要介绍Quill内容渲染相关的基本原理，主要包括： Quill描述编辑器内容的方式 Quill将Delta渲染到DOM的基本原理 Scroll类管理所有子Blot的基本原理 Quill如何描述编辑器内容？ Quill简介 Qu
quilljs-markdown:QuillJS编辑器插件，用于高级Markdown
05-13
Markdown for Quill Editor QuillJS Markdown快捷方式扩展。 用ES6和标准Javascript代码样式编写库。 如何安装 NPM npm i quilljs-markdown 或者 CDN [removed][removed] 如何使用 import Quill from 'quill' import QuillMarkdown from 'quilljs-markdown' import 'quilljs-markdown/dist/quilljs-markdown-common-style.css' // recommend import css, @option improv
quill.js 用法
foradmin的博客
06-16 1903
富文本
开源编辑器Quill.js 如何增强Word粘贴兼容性？插件开发指南
最新发布
weixin_52041354的博客
02-21 1114
要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5需求：复制粘贴word内容图片，word图片转存交互,导入pdf,导入PowerPoint(PPT),web截屏用户体验：Ctrl+V快捷键操作平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,信创国产化系统。
Markdown编辑器 富文本编辑器 常见种类及选择 博客 Hexo
wuyujin1997的博客
12-21 1027
Github List 9.8K tui.editor breadmemo Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. http://ui.toast.com/tui-editor 8.7K editor.md The open source embeddable online markdown edit...
推荐项目：Quill Markdown Shortcuts —— 富文本编辑器的Markdown快捷输入增强版
gitblog_00003的博客
06-16 663
推荐项目：Quill Markdown Shortcuts —— 富文本编辑器的Markdown快捷输入增强版 去发现同类优质开源项目:https://gitcode.com/ 1、项目介绍 Quill Markdown Shortcuts 是一个非常实用的 Quill.js 扩展模块，它允许你在实时编辑中直接输入Markdown语法，并自动转化为格式化的富文本。通过这个工具，你可以享受到Mark...
quill.min.js&quill.snow.css-最佳富文本编辑器
04-04
Quill—心目中的最佳富文本编辑器 界面实在不够清新,不符合我的审美,遂决定给网站后台换一个富文本编辑器,经过几天的寻找以及试用,终于找到了符合我这强迫症的最完美的编辑器,它就是——Quill。 ...
quill.js-强大的现代富文本编辑器插件
12-12
Quill.js是一个强大的开源富文本编辑器，专为现代Web设计。它被广泛应用于网站建设和内容管理系统中，为用户提供了一种简洁、高效的文本编辑体验。Quill的核心特性在于它的模块化设计，允许开发者根据需求定制功能，...
uniapp editor富文本 quill.min.js image-resize.min.js
08-18
总的来说，"uniapp editor富文本 quill.min.js image-resize.min.js"涉及到的知识点主要包括uniapp框架的使用、Quill富文本编辑器的集成与定制、JavaScript图像处理以及富文本数据的管理和交互。这些技术的结合，...
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor
04-03
quill.js-心目中的最佳富文本编辑器-html引入、改后可用于Vue-quill-editor 基于html 可以将文本框内图片优先上传后服务器 因为编辑器默认是将图片转成base64存储的，而我们实际开发需要将图片存在自己的服务器中...
quill.js-强大的现代富文本编辑器插件特效代码
03-20
Quill.js是一款强大的现代富文本编辑器，专为满足开发者对文本编辑的高级需求而设计。这款开源插件不仅在桌面浏览器上表现出色，还全面兼容各种平板电脑和手机，确保了跨平台的一致性体验。Quill.js的核心特点在于其...
quill-markdown-shortcuts：Quill.js模块，可在键入时将markdown转换为富文本格式
02-04
鹅毛笔减价捷径 该软件包是一个模块，可将markdown转换为格式的富文本格式。 快速开始 安装 使用NPM 使用NPM软件包管理器将此依赖项添加到您的项目中。 npm i -S quill-markdown-shortcuts 使用CDN 通过jsdelivr添加库。 [removed] 通过下载文件 要将代码合并到您的代码库中，只需下载markdownShortcuts.js文件并将其包含在构建过​​
quill编辑器改进
03-05
可以支持手机端编辑，PC端编辑，上传本地图片和视频，
编辑器插件汇总
青蛙king的博客
10-12 1588
TinyMCE 中文文档 重点在其“配置参考”
推荐开源项目：QuillJS Markdown快捷扩展
gitblog_00039的博客
06-06 479
推荐开源项目：QuillJS Markdown快捷扩展 项目地址:https://gitcode.com/gh_mirrors/qu/quilljs-markdown 项目介绍 QuillJS Markdown是一个优秀的开源扩展，专为Quill编辑器设计，旨在让你的Markdown编写体验更加便捷流畅。这个库使用ES6和标准JavaScript编码风格编写，并在NPM和CDN上都能轻松获取。它提...
QuillJS Markdown 项目常见问题解决方案
gitblog_00238的博客
01-17 674
QuillJS Markdown 项目常见问题解决方案 quilljs-markdown QuillJS Editor Plugin for advanced Markdown 项目地址: https://gitcode.com/...
关于quill.js富文本编辑器使用及控制代码高亮显示
freydog的博客
07-04 2294
关于vue-quill-editor的使用
vue-quill-editor富文本编辑器基本的使用与步骤
笔记
11-17 2738
基于QUILL、适用于，支持服务端渲染和单页应用，非常高效简洁。
vue里使用quill
qq_43688916的博客
09-07 2378
下载插件 npm install vue-quill-editor --save 在main.js里引入 //富文本 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEdit
掌握quill.js：现代富文本编辑器插件的特效与代码
资源摘要信息:"quill.js-强大的现代富文本编辑器插件特效代码" 知识点: 1. 什么是quill.js？ Quill.js是一种现代的开源富文本编辑器插件。它是一个轻量级的库，专门为现代Web应用设计，可以支持所有主流浏览器以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值