ipmp-low-code
Advanced tools
vanke editor是一个富文本编辑器，是专门为文本合同模板设计而生。
// 1. 引入VEditor
import VEditor from '/src/components/VEditor'
// 2. 获取要在文档中添加到富文本区域的DOM节点的引用和工具栏的DOM节点引用
var $editor = document.getElementById('editor')
var $toolsBar = document.getElementById('toolsBar')
// 3. 初始化VEditor实例
var editor = new VEditor({
root: $editor,
toolsBarEl: $toolsBar
})
在您的JS中，将事件侦听器附加到iframe的[load事件]。 当触发时，您可以通过以下方式获取对编辑器对象的引用 iframe.contentWindow.editor。
恶意HTML可能是XSS和其他安全问题的根源。我强烈建议您将DOMPurify与VEditor一起使用，以防止出现这些安全问题。 如果页面中包含DOMPurify（带有标准的全局变量），VEditor将自动清理通过setHTML或insertHTML传入的所有HTML（包括用户从剪贴板粘贴的HTML）。
您可以通过在config对象上设置属性来覆盖此属性（第二个参数传递给构造函数，请参见下文）。 这些属性是：
Boolean (defaults to true)
通过调用setHTML传递的HTML是否应该传递给sanitizer？ 如果您的应用在调用前总是以其他方式清除HTML，则可能希望将其设置为false以避免开销。Boolean (defaults to true)
通过调用insertHTML传递的HTML是否应该传递给消毒剂？ 这包括用户从剪贴板粘贴时。 由于您无法控制剪贴板上放置的其他应用程序，因此强烈建议您不要将其设置为false。(html: String, isPaste: Boolean, self: VEDitor) -> DOMFragment
自定义清洁功能。 这将替代对DOMPurify的默认调用，以清理潜在危险的HTML。 它传递了三个参数：第一个是HTML字符串，第二个是指示此内容是否来自剪贴板的布尔值，而不是您自己的代码进行的显式调用，第三个是vditor实例。 它必须返回与编辑器的根节点属于同一文档的DOM Fragment节点，其内容是要设置/插入的纯净DOM节点。VEditor提供了一个引擎，可以为您处理繁重的工作，从而轻松添加其他功能。 使用changeFormat方法，您可以轻松添加或删除所需的任何内联样式。 并且可以使用modifyBlocks方法以相对容易的方式进行复杂的块级更改。
如果您需要的命令比默认API所需的命令多，建议您看一下源代码，并查看根据这两种方法实现的许多其他API方法。
默认情况下，编辑器将对空白行使用<div>，因为大多数用户已受到Microsoft Word的限制，期望 Enter 的行为类似于在键盘上按 return 打字机。 如果您想将<p>标签（或其他）用作默认块类型，则可以将config对象作为第二个参数传递给VEditor构造函数。
你也可以传递一组属性以应用于每个默认块：
var editor = new VEditor({
blockTag: 'P',
blockAttributes: { style: 'font-size: 16px;' }
})
这里我们已经做了具备初始的功能的工具栏，工具栏可能需要根据当前选择中是否启用了特定样式来以不同的状态显示按钮。例如，如果光标下方的文本已经为粗体，则“粗体”按钮将处于按下状态。
判断大多数按钮状态的有效方法是监视编辑器中的pathChange事件，并从新路径确定状态。 如果选择跨越节点，则需要为每个按钮调用hasFormat方法，以确定样式是否处于活动状态。有关更多信息，请参见getPath, hasFormat 和 getFontInfo文档, 用这三个方法进行配合，基本可以完成所有状态的判断。
编辑器配置，会覆盖默认配置参数，支持的配置参数及默认配置请参见index.js的中defaultConfig。
new VEditor(config)
将事件侦听器附加到编辑器。 处理程序可以是函数，也可以是带有handleEvent方法的对象。 每当事件触发时，都将调用此函数或方法，并且将事件对象作为唯一参数。 可能会发生以下事件：
path属性。fragment属性或纯文本插入到<pre>中的text属性使用。 您可以在事件处理程序中修改此文本/片段，以更改要粘贴的内容。 您也可以在事件对象上调用preventDefault以取消粘贴操作。The method takes two arguments: 这些方法有两个参数：
返回编辑器实例。
通过addEventListener方法删除事件侦听器。
这些方法有两个参数：
返回编辑器实例。
添加或删除键盘快捷键。 您可以使用它来覆盖默认的键盘快捷键（例如Ctrl-B为粗体 - 列表请参见KeyHandlers.js的底部）。
This method takes two arguments:
"alt-ctrl-enter"返回编辑器实例。
编辑器focus，该方法没有参数，返回编辑器实例。
编辑器blur，该方法没有参数，返回编辑器实例。
返回可编辑区域的document对象。 在API范围之外进行转换可能会很有用。
返回编辑器当前状态的HTML值。 该值等效于<body>标签的内容，并且不包含任何周围的样板。
设置编辑器的HTML值。 提供的值不应包含<body>标签或该标签之外的任何内容。
该方法有一个参数：
返回编辑器实例。
返回当前在编辑器中选择的文本。
在当前光标位置插入图像。
这些方法有两个参数：
<img>节点上设置的属性的对象。 例如 {{class: 'class-name'}。 任何src属性都将被第一个参数给定的url覆盖。返回对新插入的图像元素的引用。
在当前光标位置插入HTML片段，或者如果选择则替换选择。 提供的值不应包含<body>标签或该标签之外的任何内容。
该方法有一个参数：
返回编辑器实例。
通过DOM树返回从<body>元素到当前当前光标位置的路径。 这是一个字符串，由CSS格式的标记，id，类，字体和颜色名称组成。 例如BODY > DIV＃id> STRONG> SPAN.font [fontFamily = Arial，sans-serif]> EM。 如果做出了选择，那么选择的不同部分可能具有不同的路径，则值将为(selection)。 该路径可用于有效地确定粗体，斜体，下划线等的当前格式，从而确定按钮状态。 如果进行了选择，则可以使用hasFormat方法来获取您所关心的属性的当前状态。
返回一个对象，该对象包含当前光标位置的活动字体系列，大小，颜色和背景颜色（如果已设置）。 属性名称分别是“家庭”，family, size, color和backgroundColor。 它查看样式属性以检测到此情况，因此不会检测到标签或非内联样式。 如果选择了多个元素，它将返回一个空对象。
在属于编辑器的文档中创建一个Range. 有4个参数, 参考 W3C Range properties:
相对于当前的选择/光标，返回一个边界客户端矩形（相对于上/左/右/下属性）
返回表示当前选择/光标位置的W3C Range 对象
改变当前选择/光标的位置。
该方法有一个参数：
返回编辑器实例。
删除当前的所有选择并将光标移动到文档的开始处。
返回编辑器实例。
删除当前的所有选择并将光标移动到文档的结束处。
返回编辑器实例。
使用当前编辑器状态保存撤消检查点。 修改状态（例如，bold / setHighlightColour / modifyBlocks）将自动保存撤消 检查点。 如果您想在这些方法之外修改DOM并且保存，您首先需要保存一个撤消检查点。
返回编辑器实例。
撤销最近一次更改。
返回编辑器实例。
如果用户刚刚撤消更改，则将应用该更改。
返回编辑器实例。
查询编辑器是否在当前选择的任何位置应用了特定格式。
这些方法有两个参数：
如果整个选择包含在具有指定标签和属性的元素中，则返回true，否则返回false。
使当前选中的所有非粗体文本变为粗体（通过将其包装在<b>标签中）。
返回编辑器实例。
从所选文本中删除任何粗体格式。
返回编辑器实例。
使当前选中的所有非斜体文本变为斜体（通过将其包装在<i>标签中）。
返回编辑器实例。
从所选文本中删除任何斜体格式。
返回编辑器实例。
使当前选中的所有非下划线文本变为下划线字体（通过将其包装在<u>标签中）。
返回编辑器实例。
从所选文本中删除任何下划线字体格式。
返回编辑器实例。
使当前选中的所有非删除线文本变为删除线字体（通过将其包装在<s>标签中）。
返回编辑器实例。
从所选文本中删除任何删除线字体格式。
返回编辑器实例。
设置所选文本的字体。（该功能暂时不需要，所以屏蔽掉工具栏里的入口了，详情查看toolsBar.js）
该方法有一个参数：
返回编辑器实例。
在选择中至少部分包含的所有块中设置文本类型。例如：标题一（通过将其包装在h1标签中）。
该方法有一个参数：
返回编辑器实例。
设置所选文本的字体大小。
该方法有一个参数：
返回编辑器实例。
设置所选文本的颜色。
该方法有一个参数：
返回编辑器实例。
设置所选文本的背景颜色。
该方法有一个参数：
返回编辑器实例。
在选择中至少部分包含的所有块中设置文本对齐方式。
该方法有一个参数：
返回编辑器实例。
在选择中至少部分包含的所有块中设置文本行高。
该方法有一个参数：
返回编辑器实例。
在当前选择的每个块上执行一个函数，或者直到该函数返回truthy值。
该方法有两个参数：
返回编辑器实例。
提取DOM树的一部分（直至当前选择的块边界），对其进行修改，然后将其重新插入并合并边缘。
该方法有一个参数：
this绑定到VEditor实例。 应该返回要在DOM中重新插入的节点或片段。返回编辑器实例。
将所有至少部分选定的块更改为无序列表的一部分。
返回编辑器实例。
将所有至少部分选定的块更改为有序列表的一部分。
返回编辑器实例。
将列表中至少部分选定的所有块更改为不再是列表的一部分。
返回编辑器实例。
将作为列表一部分的任何至少部分选择的块的嵌套级别增加1。
返回编辑器实例。
将列表中任何至少部分选择的块的嵌套级别降低1。
返回编辑器实例。
从选择中删除所有格式。 块元素（列表项，表单元格等）被保存为单独的块。
返回编辑器实例。
清空编辑器所有内容。
更改当前选择的“内联”格式。 这是一种高级方法，用于实现粗体，斜体等辅助方法。 此方法仅适用于行内标签，而不是阻止标签。 它包含4个参数：
null。 如果提供了此对象，则它应具有一个带有标签的字符串名称的tag属性（用于包裹所选文本）（例如STRONG），以及一个可选的attributes属性，该属性包括要应用于 标签（例如{"class"：" bold"}）。null。null /忽略可应用于当前选择）。false）。 如果为true，则覆盖至少部分选定范围的所有格式化节点将被完全删除（因此也有可能从选定范围之外的文本中删除）。 如果为false，则格式设置节点将继续应用于所选内容之外的任何文本。 例如，在删除链接时，这很有用。 如果所选内容中的任何文本是链接的一部分，则将删除整个链接，而不是将该链接继续应用于所选内容之外的文本位。具有可以修改文档而不将修改视为输入的功能。
当需要以编程方式更改文档，但是这些更改不应引发输入事件或修改撤消状态时，此功能很有用。
FAQs
Unknown package
The npm package ipmp-low-code receives a total of 85 weekly downloads. As such, ipmp-low-code popularity was classified as not popular.
We found that ipmp-low-code demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Mini Shai-Hulud expands into the Go ecosystem after hitting LeoPlatform npm packages and targeting GitHub Actions workflows.
Security News
The Fable shutdown shows how quickly model access can become a business continuity risk for AI-dependent engineering teams.
Security News
AI agents are pulling packages into environments no scanner is watching, creating exposure before security teams can see it.