CKEditor 5 保存选定的文本并在恢复内容后将其再次设置为选定

2024-04-25

我一直在使用 CKEditor 5:

var mySelection = editor.getSelection();

例如,获取选定的文本并能够将其保存到数据库中。 我想知道是否有一种更简单的方法将所选文本保存到数据库,然后在恢复文本后将其设置为在编辑器窗口中自动选择。

保存选择并在同一文本中再次设置选择的简单方法。 有插件或者类似的东西吗?

Regards


  1. 这是获取所选内容的方法。你应该像你一样得到一个选择,从中得到一个范围(.getFirstRange()), use for ( const item of range.getItems() )要迭代范围内的所有项目,请检查项目是否是文本节点(item.is( 'textProxy' )) 如果是,则将其数据添加到结果中 (result = result + item.data)。这样您就可以获取所选内容内的文本。

  2. 要恢复内容的一部分,您必须将模型范围保存在数据库中,然后恢复它并对其执行某些操作。没关系,但您需要保证内容在保存范围和内容之间不会改变(因此范围不会过时)。

我不确定您要实现什么功能,但看起来您可以使用Markers https://docs.ckeditor.com/ckeditor5/latest/framework/guides/architecture/editing-engine.html#markers

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CKEditor 5 保存选定的文本并在恢复内容后将其再次设置为选定 的相关文章

  • 如何防止 ckeditor 不在空白 html 标签中添加

    我在 Windows 8 1 操作系统中安装了 Visual Studio 2012 Express 并根据要求在我的项目中使用 CKEditor 我是 CKEditor 的新手 也以正确的方式使用它 但问题是通过在 CKEditor 中的
  • â�� 在我的 purify 后的 html 中

    我有一个数据库 我正在重建表结构 这很糟糕 所以我将一些数据从一个表移植到另一个表 这些数据似乎是从 MSO 产品复制粘贴的 因此当我获取数据时 我使用 htmlpurifier 和 php 中的一些 str replace 对其进行清理
  • CKEDITOR,在 CKEDITOR 之外调用全屏操作

    有 CKEDitor 经验的人都知道是否可以使用 JavaScript 在 CKEDITOR 之外调用全屏功能 操作 thanks 我认为这是可能的 您是否尝试过这里的解决方案 它可能会是这样的 var editor CKEDITOR in
  • 如何改变CKEditor的编辑器大小?

    由于它是一个 textarea 我在 html 属性中尝试了 cols 50 但它不起作用 另外 我从上一个问题中找到了答案 他说我可以通过添加来做到这一点 CKEDITOR instances myinstance resize 1000
  • Colorbox 中的 CKEditor 加载不起作用 [ Google Chrome ]

    我在我的项目中使用 Colorbox 我已将 CKEditor 集成到 colorbox 中 它在所有浏览器中工作正常 但在 Google Chrome 中存在一个小问题 编辑器将在第一次单击时正确打开 关闭弹出窗口并在不加载页面的情况下第
  • 如何使用ssr在nuxt中添加ckeditor插件

    我正在尝试在我的通用 nuxt 应用程序中添加 ckeditor 5 的对齐插件 SSR 我在插件中尝试过这样 import Vue from vue import ClassicEditor from ckeditor ckeditor5
  • 如何将 CKFinder 与 Laravel 集成?

    我正在尝试将 CKFinder 与 Laravel 集成 我已经完成了 95 左右 我可以让一切正常工作 除了CheckAuthentication功能 我必须做到return true无论上传是否有效 我尝试做的是在 config php
  • 一页中有多个 CKEditor5 - 性能问题

    我从后端收到一组对象 其中包含文本作为字段之一 我希望能够编辑该文本 到目前为止我有这样的事情 div div class card div class card header div class row some other input
  • CKEDITOR:如何转换所有 html 实体

    这是清单 http www elizabethcastro com html extras entities html http www elizabethcastro com html extras entities html我要么想启用
  • 如何在 React js 中管理 CKEditor 自定义插件的 onclick 事件?

    我想在react js 中为 CKEditor 5 创建一个自定义插件 如下所示 StackOverFlow 问题 CKEditor 5 通过外部 url 插入图像 https stackoverflow com questions 516
  • ckeditor“key”的使用 CKEDITOR.instances.editor.on('key', function (e){

    我意识到存在有关如何为 CKEDITOR 4 实现事件处理程序的问题 我可以使用此代码来获取按键按下数据 但我似乎无法在按键后获取数据 CKEDITOR instances editor on key function e document
  • CKEditor 安全最佳实践

    我在用http ckeditor com http ckeditor com 在我建立的一个小型 PHP MySQL 论坛中 我的问题 将用户创建的 HTML 像这样保存在数据库中然后在我的应用程序中重新显示它是否安全 我应该采取哪些预防措
  • 如何删除ckeditor中的表单工具并调整大小

    我在我的项目中使用 CKEditor 我的要求是删除 FORM TOOLS 并设置 CKEditor 的大小ADJUSTABLE 到目前为止 我已成功在网页中显示编辑器 我已经搜索过谷歌 但不幸的是我什么也没得到 请帮助我解决这个问题 试试
  • 在 CKEditor 4.x 中,有没有办法在初始化后获取允许的标签列表?

    有没有办法获取 CKEditor 4 x 准确地说是 4 4 7 中所有允许标签的列表after编辑器已使用所有插件进行初始化 并且所有allowedContentRules and disallowedContentRules或已应用任何
  • CKeditor 富文本编辑器在浏览器中显示 html 标签

    我刚刚在我正在构建的网站上安装了 CKeditor 富文本 WYSIWYG 编辑器 它似乎工作正常 除了它以编码 html 而不是常规 html 的形式将文本插入到我的 mysql 数据库中 然后当浏览器输出此内容时它将编码数据转换为常规
  • CKEditor 3.x - 动态添加 UI 元素到插件对话框

    我正在构建一个 CKEditor 3 x 插件 它允许通过与我们的后端系统绑定的单独查看器应用程序有条件地显示 HTML 的某些部分 我的 CKEditor 插件将用于定义这些条件 但我对如何动态地将 UI 元素添加到插件对话框感到困惑 在
  • 在CKEditor中,如何向按钮添加“文本”标签?

    editor ui addButton ImageUpload label Upload Image command popup image uploader icon this path images icon png 这就是我现在的代码
  • 防止 CKEditor 添加“data-cke-saved”并转换 <

    我有 CKEditor 的 jQuery 实现 我们经常使用对话框将 HTML 标记添加到 A 标记的 标题 属性 然而 当我们这样做时 它会转换 HTML 代码 以便将其解析为文本 我们需要代码保持其输入时的确切形式 而不是在任何地方放置
  • Struts 2 - 使用 CKEditor 拦截上传的图像文件

    我有一个CKEditor在网站的不同页面上 所以我将上传内容设置为true以及让它工作的所有配置内容 并且图像上传工作得很好 Send it to the Server 标签 但从这里我想拦截或互动upload函数能够将图像上传到文件夹中
  • CKEditor TypeError:c[a] 在 CodeIgniter 中未定义

    我正在尝试在基于 codeigniter 的网站中安装 CKEditor 并且我已按照本教程进行操作 Codeigniter 教程中的 CKEditor http nukium com developpement php framework

随机推荐