UEditor.js|Quill.js|Summernote
关注
分享
扫一扫
文章平均质量分 54
富文本编辑器
.NET跨平台
比较认真。编程就是算法和数据结构，算法和数据结构是编程的灵魂。
展开
-
summernote 探索(官方文档)
初始化选项自定义初始化各种选项和模块。自定义toolbar, popoverSummernote允许您自定义的工具栏。$('#summernote').summernote({ toolbar: [ // [groupName, [list of button]] ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough', 'superscript', 'subscrip转载 2020-11-29 16:18:18 · 5120 阅读 · 0 评论 -
Quill.js文本编辑器
<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="q转载 2020-11-14 13:09:50 · 1075 阅读 · 0 评论 -
Summernote使用入门
Create.cshtml@model SN.Models.ProductModel@{ ViewBag.Title = "产品立项"; Layout = "../Shared/_LayoutAdminLTE.cshtml";}<head> <!--summernote--> <link href="~/Content/summernote/summernote.css" rel="stylesheet" /> <转载 2020-10-02 22:34:01 · 3083 阅读 · 1 评论 -
.NET MVC和Summernote使用示例
Index.cshtml@{ ViewBag.Title = "Home Page";}<div class="jumbotron"> <h1>SUMMERNOTE</h1> <p class="lead">Summernote是Bootstrap上的超级简单WYSIWYG编辑器。</p> <p><a target="_blank" href="http://summernote.org"转载 2020-10-01 12:47:50 · 713 阅读 · 0 评论 -
quill.js官方文档(九)【Clipboard，Syntax】
粘贴板(clipboard)模块粘贴板处理Quill和外部程序直接的复制、剪切和粘贴。默认提供内容粘贴的正常解析，也能通过匹配做进一步的定制。粘贴板模块解析通过后序遍历]对应DOM树粘贴HTML，建立所有子节点的Delta表达。目前为止，每个子节点，匹配器函数用DOM节点和Delta表达调用，允许匹配器返回一个修改的Delta表达。为了有效的使用匹配，需要熟练驾驭Deltas。APIaddMatcher添加定制的匹配器到粘贴板模块，匹配器优先使用nodeType匹配并加入，接下来使用CSS选择转载 2020-09-04 11:27:29 · 2593 阅读 · 1 评论 -
quill.js官方文档(八)【Module之Keyboard，History】
Keyboard模块键盘模块启用在特定上下文中键盘事件的自定义行为。Quill使用这个来绑定格式花快捷键并阻止不受欢迎的浏览器副作用。键绑定键盘绑定程序绑定到一个特定的键和键修饰符。这里的key是指JavaScript事件的键代码，但是允许使用字母数字键和一些常用键的字符缩写。键修饰符包括: metaKey, ctrlKey, shiftKey 和 altKey。 此外， shortKey 是一个平台特定的修饰符，在Mac中等于metaKey，在windows和linux中相当于ctrlKey。处转载 2020-09-04 11:16:28 · 1549 阅读 · 0 评论 -
quill.js官方文档(七)【Module之Toolbar】
工具栏模块允许用户容易的设置Quill的内容格式。可以用自定义的容器和处理程序定义。var quill = new Quill('#editor', { modules: { toolbar: { container: '#toolbar', // Selector for toolbar container handlers: { 'bold': customBoldHandler } } }});因为containe转载 2020-09-04 10:06:35 · 2527 阅读 · 0 评论 -
quill.js官方文档(六)【增量Delta】
Delta被用做描述Quill编辑器的内容和变化，简单但表达力强的数据格式。这种格式本质上是一种JSON格式，人类可读同时及其也能容易识别。Delta能描述任意Quill内容，包括所有的文本、格式信息，并且没有HTML多义性及复杂性的缺点。不要被他的名称delta迷惑，Deltas(Δ增量)代表文档和文档的改变。如果将Deltas看做是一个文档到另一个文档的操作指令，那么Delta表示一个文档就是从空文档开始到现有文档的操作指令的表达。Delta被独立成一个单独的库,以便其能在Quill以外的地方使用。转载 2020-09-04 09:56:29 · 2457 阅读 · 1 评论 -
quill.js官方文档(五)【API之Model，Extension】
Modelfind静态方法，给定一个DOM节点，返回对应的Quill或Blot实例。返回后者时，参数bubble为true时，将向上搜索给定DOM的祖先节点，知道找到对应的Blot。方法Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill示例var container = document.querySelector("#container");var quill = new Quill(container);c转载 2020-09-04 09:41:48 · 1086 阅读 · 0 评论 -
quill.js官方文档(四)【API之Editor，Events】
Editorblur让编辑器失去焦点。方法blur()示例quill.blur();disableenable(false)的快捷方法。enable让通过鼠标或键盘等输入设备设置让用户能够编辑内容。当source为"api“或”silent"时，不影响API的调用。方法enable(enabled: boolean = true)示例quill.enable();quill.enable(false); // Disables user inputfocus焦点转载 2020-09-03 14:24:41 · 2319 阅读 · 0 评论 -
quill.js官方文档(三)【API之Formatting，Selection】
Formattingformat设置用户当前选择文本的格式，返回一个代表变化的Delta数据。如果用户当前选择的长度为0,只是一个游标，这个格式将被激活，所以用户输入的下一个字符将被应用这个格式。 Source可能是 “user”、 “api” 或者 “silent”。当编辑器不可用[disabled]#disable且source参数为“user”时，调用将被忽略。方法format(name: String, value: any, source: String = 'api'): Delta转载 2020-09-03 13:41:57 · 1559 阅读 · 0 评论 -
quill.js官方文档(二)【API之Content】
deleteText从编辑器中删除文本，返回代表对应变化的Delta数据。Source可能是 “user”、 “api” 或者 “silent”。当编辑器不可用[disabled]#disable且source参数为“user”时，调用将被忽略。方法deleteText(index: Number, length: Number, source: String = 'api'): Delta示例quill.deleteText(6, 4);getContents返回编辑器的内容——包含格式转载 2020-09-03 13:20:11 · 1791 阅读 · 0 评论 -
Quill.js使用示例
<html><head> <!-- Theme included stylesheets --> <link href="http://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <link href="http://cdn.quilljs.com/1.3.7/quill.bubble.css" rel="stylesheet"> <!--转载 2020-09-03 12:49:46 · 1725 阅读 · 0 评论 -
quill.js官方文档(一)【Configuration,Formats】
ConfigurationQuill允许通过多种方式对其进行自定义以满足您的需求。 本节致力于调整现有功能。 有关添加新功能的信息，请参见模块部分；有关样式的信息，请参见主题部分。ContainerQuill 需要一个容器，其中将附加编辑器。 您可以传入CSS选择器或DOM对象。var editor = new Quill('.editor'); // First matching element will be usedvar container = document.getElementB转载 2020-09-03 13:04:15 · 1933 阅读 · 0 评论 -
Ueditor设置默认字体、字号、行间距，添加字体种类
Ueditor默认字体、字号、行间距的修改：ueditor默认字号是16号，默认字体为sans-serif，默认行间距为5px，如下图所示：首先，修改ueditor.all.js文件中如上图红框中对应的字体、字号、行间距的值；其次，ueditor.all.min.js文件为ueditor.all.js的压缩版，需要一并修改其中对应的字体、字号、行间距的值，如下图所示：字体种类的添加：u...转载 2019-08-20 18:00:08 · 3707 阅读 · 0 评论 -
ueditor插入自定义内容和样式
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点通过UEditor提供的API接口可以很方便的读写操作内容并设置编辑器里的样式页面中的脚本<script> $(function () { init(); _template(); }); function _temp...转载 2019-08-10 15:17:22 · 5934 阅读 · 0 评论 -
百度编辑器安全漏洞及其防护措施
跟老赵头儿学开发之十四 : 百度编辑器安全漏洞及其防护措施百度编辑器UEditor 是一套开源的在线html编辑器，它是由百度web前端研发部开发的所见即所得的富文本web编辑器，开发人员可以用 UEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本框。UEditor既可以录入文本也可以上传图片，还可以支持自定义的html编写，支持电脑端及移动端，自适应页面，图片也可...转载 2019-08-10 15:10:26 · 2549 阅读 · 0 评论 -
UEditor源代码重点难点分析
网上好像几乎没有研究ueditor源码的文章，原因可能是ueditor源码太复杂了，接近浏览器代码和word/excel源码。本文分析ueditor源码整体流程逻辑以及重点难点细节。首先，编辑器是如何实现输入的？本人开始始终不得其解，在源码找不到输入事件绑定的处理函数，后来在白云峰同学的提醒下才顿悟，整个iframe网页就相当于是一个<textarea>元素：<body cl...转载 2019-06-30 16:20:47 · 1627 阅读 · 2 评论