WYSIWYG(所见即所得)描述了用于图形设计的编辑器,它们通常不需要了解产品底层代码。编辑器将用户的编辑内容转换回标记语言(如HTML)。示例包括Microsoft Visual Studio,Adobe Dreamweaver的设计视图和许多CMS编辑器。
我是否可以编辑网页内 iframe 的 html 内容? 我有以下代码: 我想编辑sample.html的内容...
对于我的一位客户,我一直在为他的客户开发邮件系统。他的客户一直在他们的商店中收集电子邮件地址,并希望偶尔开始使用这些地址进行邮寄......
在 Angular 生产环境中,在富文本编辑器 (Quilljs) 中创建的链接不可单击
我一直在 Angular 中使用 QuillJs 编辑器,编辑器中添加的链接在本地环境中工作正常,它会打开新选项卡等,但在生产环境中它不会打开或在新选项卡中打开,我...
如何从acf所见即所得字段字符串中删除包装p标签以供以后自定义摘录处理
我有一个带有高级自定义字段插件的 WYSIWG 字段。当我查询它时: 欧...
我正在尝试围绕 Summernote (BS4) 构建内容创作应用程序,但遇到了一个不太有用的功能。 给出两段: 敏捷的棕色狐狸跳过去...... 我正在尝试围绕 Summernote (BS4) 构建一个内容创作应用程序,但遇到了一个不太有用的功能。 给出两段: <p>The quick brown fox jumps over the lazy dog.</p> <p>One, two, three, four.</p> 如果在编辑器中我使用退格键合并两个段落,我会期待这样的结果...... <p>The quick brown fox jumps over the lazy dog.One, two, three, four.</p> 这正是您在 Summernote 主页上尝试示例实现时得到的结果 但相反,我得到... <p>The quick brown fox jumps over the lazy dog.<span style="background-color: rgb(255, 255, 255); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem;">One, two, three, four.</span></p> (即:具有大量样式的 <span> 元素,围绕第二段) 非常感谢您能解释一下这里发生的事情以及如何防止它发生。 非常感谢! CDN: <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script> HTML: <div id="summernote"></div> jQuery: $('#summernote').summernote(); 更新: 我注意到,如果我使用 Summernote-lite 而不是 Summernote-bs4 并删除 BS4 CDN,问题就不再存在。 如果我坚持使用 Summernote-lite 但重新引入 BS4,那么问题又会出现! CDN 没有问题: <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script> 有问题的 CDN: <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js"></script> 让我相信这是一个与 Bootstrap 相关的问题...... 更新2: 这实际上似乎是一个 Summernote 问题,实际上可以在 here 找到的 BS4 示例上复制,我现在已在 Github here 上报告了该示例。 我遇到了同样的问题,我通过向 note-editable 类添加 css 规则来解决: .note-editable * { line-height: inherit!important; font-size: 14px!important; font-family: 'Open Sans'; } 这为我解决了这个问题。 2024 年,同样的问题,Sachi Cortes 修复对我不起作用。有什么解决办法吗?
在 Django 项目上使用 Summernote 通过管理界面添加/删除帖子,我找不到从媒体根目录中删除图像的解决方案。在 SO 上发现的类似响应均无效。 W...
我正在为我的一个项目使用 ui-tinymce (https://github.com/angular-ui/ui-tinymce)。通过演示工作(该指令没有太多文档)。 总的来说,一切都工作正常
我开始使用prosemirror,但我正在努力寻找它的扩展。即使是标签、提及或表情符号等基本扩展也很难找到。我是不是错过了这个编辑器的某些东西?我在...
当您在 Jodit 编辑器中创建表格时,该表格没有任何样式。我们可以选择单元格的边框颜色。如果我选择所有单元格并分配颜色,我们可以在
仍在收集 Silverstripe 3.4 的路上,我遇到了一个无法解决的挑战。 我网站上的许多页面必须包含一个音频播放器,允许访问者播放自托管的音频
我为 Suneditor 创建了一个集成了表情符号按钮的插件。 想法是在光标所在的位置插入表情符号,然后将光标保持在同一位置(在新插入的后面...
Next.js 中的 imageUploadUrl SunEditor
我想问一下,因为几天后我还没有找到上传文件到API的方法。 我在 Next.js 项目中使用 suneditor 作为编辑器。 我希望当我上传图像时,图像将被发送...
如何处理contentEditable div内内容可编辑错误跨度的删除?
这就是我的 React 组件的样子 - 嗨! 欢迎来到 这就是我的 React 组件的样子 - <div id="test" class="content-editable" contenteditable="true">hi! <div>welcome to </div><div><span contenteditable="false">hey|test('<span class="editable-cas-skip" contenteditable="true">default</span>')</span><br></div></div> 当我按退格键,并且光标位于末尾时,它应该删除整个范围。 您可以通过添加 key.down 事件侦听器来实现此目的,以在 span 末尾识别它,如果是这样,请删除 span。 参考以下代码: import React, { useEffect, useRef } from 'react'; const ContentEditable = () => { const contentRef = useRef(null); useEffect(() => { const handleKeyDown = (e) => { if (e.key === 'Backspace') { const selection = window.getSelection(); if (!selection.rangeCount) return; const range = selection.getRangeAt(0); const { startContainer, startOffset, collapsed } = range; if (collapsed && startContainer.nodeType === Node.ELEMENT_NODE && startContainer.hasAttribute('contenteditable')) { const lastChild = startContainer.lastChild; if (lastChild && lastChild.nodeType === Node.ELEMENT_NODE && lastChild.hasAttribute('contenteditable') && lastChild.getAttribute('contenteditable') === 'false') { if (startOffset === startContainer.childNodes.length) { e.preventDefault(); startContainer.removeChild(lastChild); } } } } }; const contentEditableElement = contentRef.current; if (contentEditableElement) { contentEditableElement.addEventListener('keydown', handleKeyDown); } return () => { if (contentEditableElement) { contentEditableElement.removeEventListener('keydown', handleKeyDown); } }; }, []); return ( <div id="test" className="content-editable" contentEditable="true" ref={contentRef} dangerouslySetInnerHTML={{ __html: 'hi! <div>welcome to </div><div><span contenteditable="false">hey|test(\'<span class="editable-cas-skip" contenteditable="true">default</span>\')</span><br></div>' }} /> ); }; export default ContentEditable;
我一直在收集目前正在出售或已经出售一段时间的欧洲小公司的收购数据。经过多次请求,我想提供这些数据......
将 TinyMCE WYSIWYG HTML 编辑器集成到 React Native 应用程序
我正在尝试将 TinyMCE WYSIWYG HTML 编辑器合并到 React Native WebView 组件中。有办法完成这个任务吗?
我想编写一个脚本来删除所选文本的格式,例如 document.execCommand('removeFormat') 但本质上没有这种已弃用的方法。我想知道这背后的算法是什么。 对于
PIMCORE:如何为数据对象全局配置TinyMCE(所见即所得)? (版本11.1.4)
唯一记录的是如何配置可编辑的所见即所得。但不是如何配置 DATA OBJECT WYSIWYG。
Mdxeditor 与 tailwindcss 一起使用时不应用样式
mdxeditor 是 Markdown 编辑器,我想与 React 和 tailwindcss 一起使用。 具有以下文件结构: 应用程序_mdxeditor ├── package.json ├── package-lock.json ├── 公共 │ └──index.html ├── 来源 │ ├──...
我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...
我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...