Quill.js文本编辑器

最新推荐文章于 2024-06-16 09:44:16 发布
最新推荐文章于 2024-06-16 09:44:16 发布
阅读量991 收藏 1
点赞数
分类专栏： UEditor.js|Quill.js|Summernote
原文链接：https://blog.csdn.net/WuLex
版权 
<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>

如图

在这里插入图片描述

下载

.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
现代富文本编辑器Quill的内容渲染机制
skysys的研究小屋
08-27 1947
转载自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 1765
富文本
推荐开源项目：QuillJS Markdown快捷扩展
gitblog_00039的博客
06-06 313
推荐开源项目：QuillJS Markdown快捷扩展 项目地址:https://gitcode.com/cloverhearts/quilljs-markdown 项目介绍 QuillJS Markdown是一个优秀的开源扩展，专为Quill编辑器设计，旨在让你的Markdown编写体验更加便捷流畅。这个库使用ES6和标准JavaScript编码风格编写，并在NPM和CDN上都能轻松获取。它提供...
Markdown编辑器 富文本编辑器 常见种类及选择 博客 Hexo
wuyujin1997的博客
12-21 959
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...
解决Vue2项目因为安装的依赖和node版本不一致导致的报错问题
qq_28013889的博客
04-02 1366
error in ./node_modules/quill/themes/bubble.js；You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
quill.min.js&quill.snow.css-最佳富文本编辑器
04-04
Quill—心目中的最佳富文本编辑器 界面实在不够清新,不符合我的审美,遂决定给网站后台换一个富文本编辑器,经过几天的寻找以及试用,终于找到了符合我这强迫症的最完美的编辑器,它就是——Quill。 ...
quill.js-强大的现代富文本编辑器插件
12-12
Quill.js是一个强大的开源富文本编辑器，专为现代Web设计。它被广泛应用于网站建设和内容管理系统中，为用户提供了一种简洁、高效的文本编辑体验。Quill的核心特性在于它的模块化设计，允许开发者根据需求定制功能，...
quill.js-强大的现代富文本编辑器插件特效代码
03-20
Quill.js是一款强大的现代富文本编辑器，专为满足开发者对文本编辑的高级需求而设计。这款开源插件不仅在桌面浏览器上表现出色，还全面兼容各种平板电脑和手机，确保了跨平台的一致性体验。Quill.js的核心特点在于其...
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-markdown-shortcuts：Quill.js模块，可在键入时将markdown转换为富文本格式
02-04
鹅毛笔减价捷径 该软件包是一个模块，可将markdown转换为格式的富文本格式。 快速开始 安装 使用NPM 使用NPM软件包管理器将此依赖项添加到您的项目中。 npm i -S quill-markdown-shortcuts 使用CDN 通过jsdelivr添加库。 [removed] 通过下载文件 要将代码合并到您的代码库中，只需下载markdownShortcuts.js文件并将其包含在构建过​​
推荐项目：Quill Markdown Shortcuts —— 富文本编辑器的Markdown快捷输入增强版
最新发布
gitblog_00003的博客
06-16 429
推荐项目：Quill Markdown Shortcuts —— 富文本编辑器的Markdown快捷输入增强版 项目地址:https://gitcode.com/patleeman/quill-markdown-shortcuts 1、项目介绍 Quill Markdown Shortcuts 是一个非常实用的 Quill.js 扩展模块，它允许你在实时编辑中直接输入Markdown语法，并自动转...
推荐一款Markdown富文本编辑器 React-quill,以及修改React-quill默认配置,支持React !
萧萧的博客
03-14 1万+
支持react的富文本编辑器,react-quill 。
vue里使用quill
qq_43688916的博客
09-07 2185
下载插件 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
Windows版本Node.js常见问题及操作解决方式（小白入门必备）
力挽狂澜的POWER
01-27 1157
对于regenerator-runtime/runtime.js，它通常是由于你正在使用一些使用了regenerator的库或代码，例如regenerator-transform。对于svg-baker-runtime/browser-symbol，看起来你正在尝试使用svg-baker来转换SVG文件。你需要安装这个包，但是似乎你提供的位置是不正确的。如果你正在使用vue-loader和vue-style-loader，你需要确保它们都是最新的版本，并且它们的版本是兼容的。
几大开源免费的 JavaScript 富文本编辑器测评
热门推荐
玖涯博客
03-09 2万+
MarkDown 编辑器用的时间长了，发现发现富文本编辑器用起来是真的舒服。
Quill.js 专题
weixin_37946518的博客
10-24 936
参考： https://luncher.github.io/2018/06/02/Quill%E7%BC%96%E8%BE%91%E5%99%A8%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6/ https://www.cnblogs.com/calvinK/p/6322512.html?utm_source=tu...
quill富文本编辑器使用教程
05-24
Quill 是一个基于浏览器的富文本编辑器，它提供了一种简单、灵活、强大的方式来创建和编辑富文本内容。下面是 Quill 富文本编辑器的使用教程： 1. 引入 Quill 库 首先，在你的 HTML 文件中引入 Quill 库: ```html <script src="//cdn.quilljs.com/1.3.6/quill.js"></script> <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> ``` 2. 创建 Quill 实例 在页面中创建一个空的 div 元素，用于 Quill 编辑器的容器： ```html <div id="editor"></div> ``` 然后，在 JavaScript 中创建一个 Quill 实例： ```javascript var quill = new Quill('#editor', { theme: 'snow' // 使用 snow 主题 }); ``` 3. 添加编辑器内容 在 Quill 编辑器中添加内容可以通过 `setContents` 方法或 `setText` 方法实现。 ```javascript // 使用 setContents 方法添加内容 quill.setContents([ { insert: 'Hello World!' } ]); // 使用 setText 方法添加内容 quill.setText('Hello World!'); ``` 4. 监听编辑器内容变化 如果你需要在内容变化时执行一些操作，可以监听 `text-change` 事件： ```javascript quill.on('text-change', function(delta, oldDelta, source) { console.log('内容已经变化'); }); ``` 5. 获取编辑器内容 你可以使用 `getContents` 方法获取 Quill 编辑器中的内容： ```javascript var content = quill.getContents(); console.log(content); ``` 6. 获取编辑器纯文本内容 你可以使用 `getText` 方法获取 Quill 编辑器中的纯文本内容： ```javascript var text = quill.getText(); console.log(text); ``` 7. 自定义编辑器样式 你可以通过修改 CSS 样式来自定义编辑器的样式，Quill 提供了许多 CSS 类名，用于定制不同的编辑器元素。 例如，你可以修改编辑器的背景颜色： ```css .ql-editor { background-color: #f5f5f5; } ``` 以上就是 Quill 富文本编辑器的使用教程，希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值