tinymce 相关问题

TinyMCE是一个基于Web的JavaScript HTML WYSIWYG编辑器控件,可用作开源和基于云的API。使用此标记可以了解有关TinyMCE的使用及其与CMS和其他基于Web的应用程序的集成的问题。

第一个空格不会触发react JS TinyMCE版本6.8.2中的onEditorChange函数

我也在tinymce github上问了同样的问题,似乎没有人关心。 有谁知道为什么tinymce编辑器无法识别我们在编辑器中输入的第一个空格? 我……

回答 1 投票 0

Tinymce - 自动完成器与 Angular 集成

我试图在我的角度应用程序中使用tinymce7集成自动完成器功能。我正在使用自托管的tinymce npm 包。 我已经集成了这里提到的steos的tinymce编辑器 - http...

回答 1 投票 0

Tinymce 编辑器代码插件在 React 模型中无法工作

我正在使用 Windmill React UI 作为弹出窗口。 在弹出窗口内,我使用 Tinymce 编辑器来存储电子邮件模板。 编辑器正在显示,但在源代码弹出窗口中我无法编辑。 请帮我解决这个问题

回答 2 投票 0

tinymce 未加载到 iframe chrome 扩展中 - “tinymce 应该已加载到全局范围内”

我正在尝试将tinymce编辑器放置在chrome扩展应用程序的iframe中。但是当我加载应用程序时,tinymce textArea 标记已设置为隐藏,并在控制台中“ti...

回答 2 投票 0

行高tinyMCE

我在设计编辑器文本区域TinyMCE时遇到问题,按回车键时行之间的间隙太大 我尝试了 content_height 和 line-height 但没有任何反应 tinymce.init({

回答 1 投票 0

TinyMCE 中 MCE 的完整形式是什么?

谁能解释一下TinyMCE中MCE的完整形式是什么? tinymce.init({ 选择器:'#procedDtlsOfSelTestInTestDlgSelGridIms', browser_spellcheck:正确, ...

回答 1 投票 0

React,手动移动 html/dom 的元素到不同的容器中

我在我的react代码中实现了tinymce,但它生成了一个与此类似的html ... 我在我的react代码中实现了tinymce,但它生成了一个与此类似的html <html> <body> <div id="root"> <div class="StyledGrommet-sc-xxx" > </div> </div> <div class="tox tox-silver-sink tox-tinymce-aux" style="position:relative;"></div> </body> </html> 但是这段代码给我带来了一些溢出问题,因为这个类,StyledGrommet-sc-xxx,由于w/e原因我无法更改。 理想的解决方案是 React 会像这样渲染 html,但由于某种原因,tinymce 决定将其渲染在 root 之外(它是一个浮动工具栏,是 tinymce 组件的一部分) <html> <body> <div id="root"> <div class="StyledGrommet-sc-xxx" > </div> <div class="tox tox-silver-sink tox-tinymce-aux" style="position:relative;"></div> </div> </body> </html> 我正在考虑有人在 useEffect 中操纵 dom 将其附加到那里,但到目前为止我还没有能够这样做。 这是组件(简化) export const Editor = ({ value, onChange }: Props) => { const editorRef = useRef<EditorType>(null); const [showSymbolModal, setShowSymbolModal] = useState(false); const [showImageModal, setShowImageModal] = useState(false); const [showIframeModal, setShowIframeModal] = useState(false); const [showHTMLModal, setShowHTMLModal] = useState(false); const onAddSymbol = (code: string) => { }; const onAddImage = (file: File) => { }; const onAddIframe = (iframe: string) => { editorRef.current.execCommand(IFRAME_ADD_COMMAND, true, iframe); setShowIframeModal(false); }; const onUpdateHTML = (html: string) => { editorRef.current.setContent(html); setShowHTMLModal(false); }; return ( <> {showImageModal && ( <UploadImageModal onImport={onAddImage} onCancel={() => { setShowImageModal(false); }} /> )} {showSymbolModal && ( <AddSymbolModal onAddSymbol={onAddSymbol} onCancel={() => { setShowSymbolModal(false); }} /> )} {showIframeModal && ( <AddIframeModal onAddIframe={onAddIframe} onCancel={() => setShowIframeModal(false)} /> )} {showHTMLModal && ( <HTMLModal html={editorRef.current.getContent()} onUpdate={onUpdateHTML} onCancel={() => { setShowHTMLModal(false); }} /> )} <Editor onEditorChange={(...props) => { console.log(props); }} onInit={(evt, editor) => { editorRef.current = editor; editor.addCommand("open_chars_dialog", () => { setShowSymbolModal(true); }); editor.addCommand(IMAGE_BUTTON_COMMAND, () => { setShowImageModal(true); }); editor.addCommand(IFRAME_BUTTON_COMMAND, () => { setShowIframeModal(true); }); editor.addCommand(HTML_BUTTON_COMMAND, () => { setShowHTMLModal(true); }); editor.ui.registry.addButton("parapraph-button", { text: "parapraph", onAction: api => { editor.formatter.apply("p"); } }); }} initialValue={value} init={{ height: 500, menubar: false, object_resizing: false, browser_spellcheck: true, plugins: [ "link", "lists", ], branding: false, contextmenu: false, formats: {}, toolbar: "paragraphs | bold italic underline strikethrough | subscript superscript | bullist numlist | link unlink | undo redo", toolbar_groups: { paragraphs: { icon: "blocks", items: "parapraph-button h2 h3 h4 h5 h6" } } }} /> </> ); }; const addImageToEditor = async (file: File, editor: EditorType) => { }; 我正在考虑做这样的事情 useEffect(() => { const rootDiv = document.getElementById("root"); const editorDiv = document.querySelector(".tox"); console.log(rootDiv) console.log(editorDiv) if (rootDiv && editorDiv) { rootDiv.appendChild(editorDiv); } }, []); 但是好像没效果 很抱歉撞到这个旧线程,但我遇到了同样的问题,并找到了适合我的解决方案:https://github.com/tinymce/tinymce-react/issues/186#issuecomment-730083282 您必须将以下内容添加到 TinyMCE 的 init 组件上的 Editor 属性中: ... menubar: false, setup: function(editor) { editor.on('PostRender', function() { var container = editor.getContainer(); var uiContainer = document.querySelector('.tox.tox-tinymce-aux'); if (uiContainer === null) return; container?.parentNode?.appendChild(uiContainer); }); } ... 不确定它是否仍然对您有用,但希望对其他遇到此问题的人也有用😄

回答 1 投票 0

如何在tinymce编辑器中启用字体系列和颜色选项?

我在我的cms上使用tinymce编辑器,它有一个普通的文本工具栏,其中有粗体、斜体、下划线和对齐选项,但它没有字体系列更改选项,甚至没有颜色更改...

回答 4 投票 0

TinyMCE 在发布后删除 <br/> 标签

我在带有文本区域的帖子表单中使用TinyMCE。 许多文本存储在数据库中,并且可能包含标签,例如: 一号线二号线 当我将这样的文本加载到...

回答 1 投票 0

toolbar_sticky 选项

我怎样才能在oracle APEX 的富文本TinyMCE 中拥有toolbar_sticky : true 选项? 我已经在初始化 JavaScript 函数部分尝试过此操作,但它不适用于富文本。 功能(选项)...

回答 1 投票 0

哪里可以下载Tinymce 4.0.28 | tinymce.js 文件具体

我一直在尝试找到 Tinymce 4.0.28 js 文件来运行我的旧程序。我在github上找到的档案好像没有js文件: A)“tinymce.js” B)“tinymce.min.js” Tinymce 网站

回答 1 投票 0

使用tinyMCE插入/更新链接时出现问题

我对tinyMCE有问题,但仅在实时环境中,由于某种原因tinyMCE重写绝对url并且仅适用于某些TLD网站,到目前为止我注意到它不适用于.eu域,是这样...

回答 7 投票 0

Tinymce 插件管理器 - 动态初始选择框值

我使用的是Tinymce v6.7.0。我想要列表框的初始值。但不知何故我无法设置这些值。 Tinymce 插件管理器 - 窗口 这是脚本: tinymce.PluginManager.add("一个...

回答 1 投票 0

自定义字体在 ReactJS 上的 TinyMCE 中不起作用

我正在尝试为 TinyMCE 中的印地语输入添加 Devlys 和 Kruti Dev 字体,但是当我在编辑器中输入时,出现的是英文字母而不是印地语。我正在尝试复制类似于

回答 1 投票 0

TinyMCE 角高度 100% 不起作用

将TinyMCE添加到我的项目中,但无法获得填充页面的高度。这是我的 html 页面,只是一个简单的全屏 div,里面有编辑器: 将 TinyMCE 添加到我的项目中,但无法获取填充页面的高度。这是我的 html 页面,只是一个简单的全屏 div,里面有编辑器: <div class="page-layout blank p-24" fusePerfectScrollbar> <editor apiKey="8zpue1x5ae105wdqusojcbzo6vov9mpymvixyf4375qv9mfk" [init]="{ menubar: false, resize: true, height: '100%', min_height: 350, plugins: [ 'advlist autolink lists link image imagetools imagecharmap preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | image' }" ></editor> </div> 但是当它加载时,它开始就像我将高度设置为 0 一样,直到我尝试调整它的大小。 使用您的代码,编辑器标签的高度将分配给将在编辑器组件中创建的 iframe。现在,编辑器标签没有采用封闭 div 的高度,因此您看不到您想要的高度。 添加样式=“高度:100%;”到编辑器标签,那么它将具有包围 div 的高度,然后 iframe 将具有包围编辑器标签的高度。 我似乎无法在您的代码中找到错误,但我建议您不要像以前那样共享您的 api 密钥。该代码适用于我,因此您可以根据需要复制/粘贴和编辑: <editor id="myTextarea" class="editor" apiKey="pasteYourApiKeyHere" [init]="{ width: 600, height: 8000, plugins: [ 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'help' ],}" [(ngModel)]="initialContent" (ngModelChange)="onEditorContentChange()"> </editor> 请注意,您可能不需要 ngModel 或我正在使用的函数。这些服务用于我的特定目的,并且仅包含粘贴当前正在工作的确切代码。根据您的需要删除或修改。

回答 2 投票 0

TinyMCE 正在添加新行(“ ") 无论 apply_source_formatting

TinyMCE 正在添加 以及我的文本的段落标签。无论 apply_source_formatting 设置值如何。 IE。 源文本: 人说: TinyMCE 正在向我的文本添加 \n 以及段落标签。无论 apply_source_formatting 设置值如何。 即。 原文: <blockquote><div class="cite">Person said:</div><div class="message"><p>ffgfgf</p></div></blockquote> TinyMCE 将其重新格式化为: <blockquote>\n<div class=\"cite\">Person said:</div>\n<div class=\"message\">\n<p>ffgfgf</p>\n</div>\n</blockquote>\n<p id=\"mce_1\">&nbsp;</p> 如何让 TimyMCE 停止添加这样的新行字符?当文本提交时,它真的会扰乱另一端的格式。 研究TinyMce的源代码我发现,在Writer.js(现在是Writer.ts)类中,插入\n之前检查的设置称为indent。 /** * Writes the a end element such as </p>. * * @method end * @param {String} name Name of the element. */ end: function(name) { var value; html.push('</', name, '>'); if (indent && indentAfter[name] && html.length > 0) { value = html[html.length - 1]; if (value.length > 0 && value !== '\n') { html.push('\n'); } } }, 因此将 indent: false 添加到设置对象似乎可以修复它。 tinymce.init({ selector: 'textarea', // change this value according to your HTML indent: false, }); 来自文档: 此选项默认启用,添加换行符 — U+000A, \n — 当 HTML 为关闭和打开块元素之间 使用 getContent() 以及在 TinyMCE 中渲染 HTML 时输出 预览对话框。 将 indent 设置为 false 即可从 TinyMCE 获取 HTML 输出,而无需 添加了任何换行符。

回答 1 投票 0

响应式图片tinymce图片链接

我正在扩展现有网站。我已经发布了该网站(如果您想查看,请单击此处)。我刚刚添加了一个非常简单的博客(用 php 和 mysql 制作),它运行良好,除了一个

回答 8 投票 0

当内容位于编辑器之外时如何保留 TinyMCE 打印样式

我正在尝试使用 HTML 到 PDF 转换器打印 React TinyMCE 编辑器的内容,但是当我提取内容并将其设置在自己的页面中时,样式非常不同。它重新...

回答 1 投票 0

渲染从数据库 Spring Boot、Thymeleaf 检索到的 HTML

我有一个 Spring Boot 应用程序,我使用 TinyMCE 以 HTML 格式保存内容。 “内容”正确保存在数据库中...... 用于保存内容的 HTML 内容保存在数据库中 ...

回答 2 投票 0

如何在reactjs中使用TinyMce编辑器填充或编辑HTML内容

我正在使用 TinyMce React 编辑器来允许用户创建、编辑和保存来自数据库的内容。然而,曾经。我在将数据库中的 HTML 内容解析回电子文件时遇到了挑战...

回答 1 投票 0

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.