wysiwyg 相关问题

WYSIWYG(所见即所得)描述了用于图形设计的编辑器,它们通常不需要了解产品底层代码。编辑器将用户的编辑内容转换回标记语言(如HTML)。示例包括Microsoft Visual Studio,Adobe Dreamweaver的设计视图和许多CMS编辑器。

删除所选文本的 html 标签格式

我想编写一个脚本来删除所选文本的格式,例如 document.execCommand('removeFormat') 但本质上没有这种已弃用的方法。我想知道这背后的算法是什么。 对于

回答 1 投票 0

PIMCORE:如何为数据对象全局配置TinyMCE(所见即所得)? (版本11.1.4)

唯一记录的是如何配置可编辑的所见即所得。但不是如何配置 DATA OBJECT WYSIWYG。

回答 1 投票 0

Mdxeditor 与 tailwindcss 一起使用时不应用样式

mdxeditor 是 Markdown 编辑器,我想与 React 和 tailwindcss 一起使用。 具有以下文件结构: 应用程序_mdxeditor ├── package.json ├── package-lock.json ├── 公共 │   └──index.html ├── 来源 │   ├──...

回答 1 投票 0

Summernote动态添加按钮时传递参数

我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...

回答 1 投票 0

动态添加按钮时传递参数

我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...

回答 1 投票 0

javascript: SummerNote:动态添加按钮时传递参数

我正在为我的 Summernote 所见即所得创建动态自定义按钮,但我遇到了问题。我想将我正在迭代的数据传递给按钮的渲染函数,但因为它是alr...

回答 1 投票 0

纯 JS 上的 Wysimark

有 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>&lt;script&gt;</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>&lt;html&gt; &lt;body&gt; &lt;div id=&#34;editor-container&#34;&gt;&lt;/div&gt; &lt;script defer type=module src=&#39;index.js&#39;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><pre><code>index.js</code></pre></p> <pre><code>import { createWysimark } from &#34;@wysimark/standalone&#34; const container = document.getElementById(&#34;editor-container&#34;) const wysimark = createWysimark(container, { initialMarkdown: &#34;# Hello World&#34;, }) </code></pre> <p>出现错误</p> <p><pre><code>Uncaught SyntaxError: The requested module &#39;/cmwysiwig/node_modules/@wysimark/standalone/.dist/browser/index.cjs.js&#39; does not provide an export named &#39;createWysimark&#39; (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 &#39;@jsheaven/easybuild&#39; await buildForBrowser({ entryPoint: &#39;./src/index-javascript.ts&#39;, outfile: &#39;./dist/javascript/index.js&#39;, dts: false, debug: process.argv.indexOf(&#39;--dev&#39;) &gt; -1, esBuildOptions: { logLevel: &#39;error&#39;, }, }) </code></pre> <p>但是,更简单的方法是使用 <pre><code>wysimark-standalone</code></pre> 包来完成此操作,并直接通过 unpkg 加载生成的捆绑代码:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script src=&#34;https://www.unpkg.com/wysimark-standalone/dist/javascript/index.cjs.js&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;editor-container&#34;&gt;&lt;/div&gt; &lt;script&gt; const container = document.getElementById(&#34;editor-container&#34;) // createWysimark is available on window now const wysimark = createWysimark(container, { initialMarkdown: &#34;# Hello World&#34;, }) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </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>

回答 0 投票 0

如何禁用jodit编辑器底部的中断按钮?

我尝试禁用“enter”插件,但它仍然出现。 按钮通常显示在编辑器底部的鼠标位置,工具提示显示为“break”。当点击...

回答 1 投票 0

reactjs 中的富文本编辑器

如何在Reactjs中创建富文本编辑器并保存输入的值并在控制台中显示/以状态保存值并将其发送到php文件? 我已尝试以下代码但无法保存v...

回答 3 投票 0

无法将 Lexical 解析为 HTML

我有一个词法编辑器,需要序列化为 html,以便我可以将其嵌入到电子邮件模板中。 使用 $generateHtmlFromNodes 函数时,我不断遇到以下错误: 呃...

回答 2 投票 0

如何禁用 Jodit 编辑器的列表类型?

我想将 Jodit 依赖项更新到最新版本,但我想禁用有序列表和无序列表的不同列表样式类型。 有什么办法可以实现这个目标吗? 在旧的v...

回答 3 投票 0

无法在react-draft-wysiwyg富文本编辑器中选择文本

我在使用react-draft-wysiwyg富文本编辑器的React版本(react:^18.2.0,)应用程序中遇到问题。问题是我无法在编辑器中选择文本。基本...

回答 1 投票 0

如何更改 froala 编辑器默认图像宽度?

根据此页面,我应该将 300px 替换为 0,以禁止在我的 froala 编辑器中向上传的图像添加内联样式宽度。 我应该将此代码添加到某个地方,但是,我不知道......

回答 1 投票 0

哪个 JavaScript WYSIWYG 编辑器支持合并/自定义字段?

我正在考虑为 Rails 应用程序创建自定义文档。用户将能够编辑 HTML 文档。我想包含来自数据对象的自定义/合并字段,例如 {{property.

回答 1 投票 0

Jodit -> 初始化后隐藏工具栏

我使用 Jodit 作为所见即所得编辑器,并且有一个初学者问题。 在编辑器初始化时,我想隐藏工具栏。 这很完美: var editor = new Jodit('#freitext_oben', { 全尺寸:...

回答 2 投票 0

如何使用所见即所得在线编辑器生成OpenOffice代码

我正在寻找一种使用/实现/设置所见即所得在线编辑器的方法,该编辑器在保存时生成 sxw 或 odt 代码。 仅需要基本功能,例如字体大小、粗体、斜体、下划线、有序和

回答 2 投票 0

在 WYSIWYG 编辑器...CKEditor 或其他方式中向 <a> 标签添加“名称”属性

我有一个构建电子邮件的应用程序,其中一部分包括一些您可能在网络中看不到的非标准内容,例如向链接添加“名称”属性。我需要一个所见即所得,我 99% 都满意...

回答 2 投票 0

即使 tailwind.config.js 文件存在,也找不到模块“tailwind-config/tailwind.config.js”(小说编辑器)

我克隆了 Novel 存储库 (https://github.com/steven-tey/novel) 并继续使用 Yarn 构建包含在 novel/apps/web 文件夹中的 NextJS Web 应用程序。我在顶级文件夹中运行纱线到

回答 1 投票 0

SCEditor:使用快捷键 Ctrl+Enter 提交表单 - 如何获取实例的父级?

我的网站上有多个带有文本区域的表单。每个文本区域都分配有 sceditor 插件。现在我尝试通过提供快捷方式提交表单。 首先我有一个 keyup 方法分配给...

回答 2 投票 0

如何获取完整的剪贴板内容,包括格式和链接?

我从网站复制了一段文本并将其粘贴到 Magento 2 Enterprise 中的所见即所得编辑器中。 编辑器自动检测正确的格式(大小、粗体、斜体...),甚至复制的链接正确...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.