tinymce 相关问题

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

我在我的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); }); } ... 不确定它是否仍然对您有用，但希望对其他遇到此问题的人也有用😄

reactjs tinymce

回答 1 投票 0

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

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

javascript fonts tinymce

回答 4 投票 0

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

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

forms post tags tinymce

回答 1 投票 0

toolbar_sticky 选项

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

tinymce oracle-apex

回答 1 投票 0

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

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

javascript tinymce tinymce-4

回答 1 投票 0

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

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

javascript tinymce rte

回答 7 投票 0

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

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

tinymce tinymce-plugins tinymce-6

回答 1 投票 0

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

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

reactjs tinymce tinymce-6

回答 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 或我正在使用的函数。这些服务用于我的特定目的，并且仅包含粘贴当前正在工作的确切代码。根据您的需要删除或修改。

angular tinymce

回答 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\"> </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 输出，而无需添加了任何换行符。

javascript tinymce

回答 1 投票 0

响应式图片tinymce图片链接

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

javascript html tinymce

回答 8 投票 0

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

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

reactjs tinymce puppeteer printing-web-page

回答 1 投票 0

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

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

html spring spring-mvc thymeleaf tinymce

回答 2 投票 0

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

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

reactjs tinymce edit blogs

回答 1 投票 0

Tinymce 在使用 require 或包含在 php 文件中时无法使用 php

mydb_config.php mydb_config.php <?php $servername = "localhost"; $username = "my_username"; $password = "my_passowrd"; try { $my_all_db_connect = new PDO("mysql:host=$servername;dbname=my_all_db", $username, $password,array( PDO::ATTR_PERSISTENT => true)); // set the PDO error mode to exception $my_all_db_connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); die(); } ?> my_tinymce_form.php <?php include 'mydb_config.php'; ?> <head> <script src="https://cdn.tiny.cloud/1/1pmtcs7gc1zvrc5fqwz5vbloi3cjpbvu85a0y1f49bc4s5v0/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script> <script> tinymce.init({ selector: 'textarea', plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate ai mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss markdown', toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat', tinycomments_mode: 'embedded', tinycomments_author: 'Author name', automatic_uploads: true, images_upload_url: 'extra_scripts/tinymce_image_uploader.php', images_reuse_filename: true, mergetags_list: [ { value: 'First.Name', title: 'First Name' }, { value: 'Email', title: 'Email' }, ], ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")), }); tinymce.activeEditor.uploadImages().then(() => { document.forms[0].submit(); }); </script> </head> <body> <textarea class="form-control" id="textarea" style="height: 150px;" name="textarea"></textarea> </body> 如果我删除第一行，Tinymce 就可以正常工作。 “包含‘mydb_config.php’；”。同时，如果我将“mydb_config.php”文件代码直接放入“my_tinymce_form.php”中，它就可以正常工作。但使用“include 'mydb_config.php';”时，tinymce 无法工作。任何人都可以帮我找出这背后的原因。在这种情况下包含有什么问题。您没有为 include 函数提供绝对文件位置，因此 PHP 将在 include_path php.ini 设置中查找文件，然后在与包含调用的脚本相同的目录中查找文件。如果脚本位于不同的目录中，则将找不到包含的文件。你可以尝试一些trigger_error()的说法在你的catch 就在您的 include 之后然后检查 php.ini 中的 error_log 设置指定的 php 错误文件 __DIR__预定义常量可以帮助您在代码中构建绝对文件路径。此外，您的问题将您的 TinyMCE 密钥暴露给此处的其他开发人员 - 因此您应该设置您的帐户来检查调用域。

php tinymce

回答 1 投票 0

将 TinyMCE WYSIWYG HTML 编辑器集成到 React Native 应用程序

我正在尝试将 TinyMCE WYSIWYG HTML 编辑器合并到 React Native WebView 组件中。有办法完成这个任务吗？

javascript react-native webview tinymce wysiwyg

回答 2 投票 0

如何向菜单栏项目添加图标？

const editorInitConfig = { // ... menubar: "文件编辑视图插入格式表自定义", 菜单： { // ... 风俗： { // 图标：“emoji”，该选项不存在...

javascript reactjs tinymce

回答 1 投票 0

TinyMCE 不保存块引用

为什么TinyMCE不断剥离块引用标签而不将它们保存到数据库中？我已经将它与其他元素一起添加到 valid_elements 列表中（顺便说一句，它们都有效）。为了...