WYSIWYG(所见即所得)描述了用于图形设计的编辑器,它们通常不需要了解产品底层代码。编辑器将用户的编辑内容转换回标记语言(如HTML)。示例包括Microsoft Visual Studio,Adobe Dreamweaver的设计视图和许多CMS编辑器。
我想编写一个脚本来删除所选文本的格式,例如 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...
javascript: SummerNote:动态添加按钮时传递参数
我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...
有 Wysimark - 所见即所得 Markdown 编辑器。我需要使用 标签将其添加到带有纯 JS 的页面。 我用 pnpm add @wysimark/standalone 安装了它 由于某种原因,它没有写在</desc>中 <question vote="1"> <p>有 <a href="https://www.wysimark.com/docs/js" rel="nofollow noreferrer">Wysimark</a> - 所见即所得 Markdown 编辑器。我需要使用 <pre><code><script></code></pre> 标签将其添加到带有纯 JS 的页面。</p> <p>我安装了它 <pre><code>pnpm add @wysimark/standalone</code></pre></p> <p>由于某种原因,<a href="https://www.wysimark.com/docs/js" rel="nofollow noreferrer">docs</a>中没有写如何使用<pre><code>script</code></pre>标签添加到页面,尽管写了解决方案是<pre><code>Plain JS</code></pre>(或者是其他东西?)</p> <p>我就是这样做的</p> <p><pre><code>index.html</code></pre></p> <pre><code><html> <body> <div id="editor-container"></div> <script defer type=module src='index.js'></script> </body> </html> </code></pre> <p><pre><code>index.js</code></pre></p> <pre><code>import { createWysimark } from "@wysimark/standalone" const container = document.getElementById("editor-container") const wysimark = createWysimark(container, { initialMarkdown: "# Hello World", }) </code></pre> <p>出现错误</p> <p><pre><code>Uncaught SyntaxError: The requested module '/cmwysiwig/node_modules/@wysimark/standalone/.dist/browser/index.cjs.js' does not provide an export named 'createWysimark' (at index.js:1:10)</code></pre></p> <p>我做错了什么?</p> </question> <answer tick="false" vote="0"> <p>此问题是由于包未在 CommonJS (CJS) 构建中公开 <pre><code>createWysimark</code></pre> 函数以及 ESM 构建未内联/捆绑导入而引起的。您可以通过使用捆绑器重新捆绑/打包代码来解决此问题,如下所示:</p> <pre><code>import { buildForBrowser } from '@jsheaven/easybuild' await buildForBrowser({ entryPoint: './src/index-javascript.ts', outfile: './dist/javascript/index.js', dts: false, debug: process.argv.indexOf('--dev') > -1, esBuildOptions: { logLevel: 'error', }, }) </code></pre> <p>但是,更简单的方法是使用 <pre><code>wysimark-standalone</code></pre> 包来完成此操作,并直接通过 unpkg 加载生成的捆绑代码:</p> <pre><code><html> <head> <script src="https://www.unpkg.com/wysimark-standalone/dist/javascript/index.cjs.js"></script> </head> <body> <div id="editor-container"></div> <script> const container = document.getElementById("editor-container") // createWysimark is available on window now const wysimark = createWysimark(container, { initialMarkdown: "# Hello World", }) </script> </body> </html> </code></pre> <p>这里有一个 Codesandbox 来演示它:<a href="https://codesandbox.io/p/sandbox/wysimark-standalone-ljlkh3?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clu8fzh3r00063b6mbhmbkfzx%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clu8fzh3r00023b6mtkf872vw%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clu8fzh3r00033b6m96o3uic8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clu8fzh3r00053b6mcnsayf00%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clu8fzh3r00023b6mtkf872vw%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu8fzh3q00013b6mz5ku4jvi%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clu8fzh3r00023b6mtkf872vw%2522%252C%2522activeTabId%2522%253A%2522clu8fzh3q00013b6mz5ku4jvi%2522%257D%252C%2522clu8fzh3r00053b6mcnsayf00%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu8fzh3r00043b6mkx18cf17%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clu8fzh3r00053b6mcnsayf00%2522%252C%2522activeTabId%2522%253A%2522clu8fzh3r00043b6mkx18cf17%2522%257D%252C%2522clu8fzh3r00033b6m96o3uic8%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clu8fzh3r00033b6m96o3uic8%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D" rel="nofollow noreferrer">Codesandbox</a></p> </answer> </body></html>
我尝试禁用“enter”插件,但它仍然出现。 按钮通常显示在编辑器底部的鼠标位置,工具提示显示为“break”。当点击...
如何在Reactjs中创建富文本编辑器并保存输入的值并在控制台中显示/以状态保存值并将其发送到php文件? 我已尝试以下代码但无法保存v...
我有一个词法编辑器,需要序列化为 html,以便我可以将其嵌入到电子邮件模板中。 使用 $generateHtmlFromNodes 函数时,我不断遇到以下错误: 呃...
我想将 Jodit 依赖项更新到最新版本,但我想禁用有序列表和无序列表的不同列表样式类型。 有什么办法可以实现这个目标吗? 在旧的v...
无法在react-draft-wysiwyg富文本编辑器中选择文本
我在使用react-draft-wysiwyg富文本编辑器的React版本(react:^18.2.0,)应用程序中遇到问题。问题是我无法在编辑器中选择文本。基本...
根据此页面,我应该将 300px 替换为 0,以禁止在我的 froala 编辑器中向上传的图像添加内联样式宽度。 我应该将此代码添加到某个地方,但是,我不知道......
哪个 JavaScript WYSIWYG 编辑器支持合并/自定义字段?
我正在考虑为 Rails 应用程序创建自定义文档。用户将能够编辑 HTML 文档。我想包含来自数据对象的自定义/合并字段,例如 {{property.
我使用 Jodit 作为所见即所得编辑器,并且有一个初学者问题。 在编辑器初始化时,我想隐藏工具栏。 这很完美: var editor = new Jodit('#freitext_oben', { 全尺寸:...
我正在寻找一种使用/实现/设置所见即所得在线编辑器的方法,该编辑器在保存时生成 sxw 或 odt 代码。 仅需要基本功能,例如字体大小、粗体、斜体、下划线、有序和
在 WYSIWYG 编辑器...CKEditor 或其他方式中向 <a> 标签添加“名称”属性
我有一个构建电子邮件的应用程序,其中一部分包括一些您可能在网络中看不到的非标准内容,例如向链接添加“名称”属性。我需要一个所见即所得,我 99% 都满意...
即使 tailwind.config.js 文件存在,也找不到模块“tailwind-config/tailwind.config.js”(小说编辑器)
我克隆了 Novel 存储库 (https://github.com/steven-tey/novel) 并继续使用 Yarn 构建包含在 novel/apps/web 文件夹中的 NextJS Web 应用程序。我在顶级文件夹中运行纱线到
SCEditor:使用快捷键 Ctrl+Enter 提交表单 - 如何获取实例的父级?
我的网站上有多个带有文本区域的表单。每个文本区域都分配有 sceditor 插件。现在我尝试通过提供快捷方式提交表单。 首先我有一个 keyup 方法分配给...
我从网站复制了一段文本并将其粘贴到 Magento 2 Enterprise 中的所见即所得编辑器中。 编辑器自动检测正确的格式(大小、粗体、斜体...),甚至复制的链接正确...