tinymce 相关问题

tinyMCE自定义图标交替状态

因此，我可以添加一个自定义工具栏切换按钮，该按钮会将所选文本呈现为红色 - 即： tinymce.init({ 选择器：'#txtT'， 宽度：500， 身高...

允许选择和输入复选框可编辑

我正在开发的 HTML 模板包含各种 HTML 选择和复选框元素。 例如。 不... 我正在开发的 HTML 模板包含各种 HTML 选择和复选框元素。 例如。 <select> <option></option> <option>No</option> <option>Yes</option> </select> <input type="checkbox" /> 我发现这些元素似乎无法在所见即所得编辑器中进行编辑。 我希望用户能够在所见即所得编辑器中切换复选框并从这些元素中选择选项。 所以 HTML 可以变成这样： <select> <option></option> <option selected>No</option> <option>Yes</option> </select> <input type="checkbox" checked /> 有人能够在 TinyMCE 4 中实现这一目标吗？ 是否有我尚未找到的可以提供帮助的插件？作为插件来实现这一点是否存在技术挑战？ 感谢您的帮助/建议！ 更新： 我发现无法在编辑器中更改这些元素实际上是自 2008 年以来 Firefox 的一个报告的错误！在其他浏览器中，您可以更改这些元素的值 - 然而，由于没有对 HTML 进行任何更改 - 它们的状态不会保存。 也许在保存之前将这些元素的状态记录到 HTML 源中的插件可以满足我的要求？ 我设法创建了这样的插件（但针对版本 5.10.9）！创建文件夹external_plugins，创建文件夹checkbox_dd（我的插件名称）并添加plugin.js，然后将其作为代码添加到其中： (function () { var checkbox_dd = (function () { 'use strict'; tinymce.PluginManager.add("checkbox_dd", function (editor, url) { function _onAction() { editor.insertContent('<input type="checkbox">'); } // Define the Toolbar button editor.ui.registry.addButton('checkbox_dd', { tooltip: "Insert Checkbox", icon: 'checkmark', // Use a built-in icon or specify your own onAction: _onAction }); // Function to handle checkbox changes function updateCheckboxState(e) { if (e.target.nodeName === 'INPUT' && e.target.type === 'checkbox') { if (e.target.checked) { e.target.setAttribute('checked', ''); } else { e.target.removeAttribute('checked'); } } } // Add event listener to the editor body editor.on('init', function () { var body = editor.getBody(); body.addEventListener('change', updateCheckboxState); }); // Clean up event listener when editor is removed editor.on('remove', function () { var body = editor.getBody(); if (body) { body.removeEventListener('change', updateCheckboxState); } }); return { getMetadata: function () { return { name: "Checkbox Plugin for TinyMCE", url: "https://www.dejandozet.com/blog/tinymce-checkbox-plugin" }; } }; }); }()); })(); 然后在init中 tinymce.init({ ... external_plugins: { 'checkbox_dd':'/tinymce/external_plugins/checkbox_dd/plugin.js' }, toolbar: 'checkbox_dd |...', init_instance_callback: function (editor) { editor.getBody().addEventListener('click', function (e) { if (e.target.tagName === 'INPUT' && e.target.type === 'checkbox') { e.stopPropagation(); } }); }, content_style: 'input[type="checkbox"] { pointer-events: auto; }' }); 它成功了！我的目标是使用 TinyMCE 编辑器作为清单。

TinyMCE 拆分按钮 - 如何在下拉菜单上触发事件？

我的目标是对单击拆分按钮的下拉图标后获得的下拉菜单上的某些项目进行样式设计，并通过 DOM 操作作为自定义函数重新排列项目。 我的问题是，我不...

插入/编辑链接模态文本字段无法聚焦 TinyMce Wordpress

我在引导程序模态中有一个 TinyMce 实例。 当我单击“插入/编辑链接”按钮时，模式会正确打开，但文本字段不可聚焦 该复选框可以正确交互，但是...

获取内容时禁用添加br标签tinymce

我有一个这样的问题： 我正在使用 TinyMCE v6。每当我使用时： tinymce.get("html").getContent() 它总是在换行符后添加一个 标签。 那么有人可以帮我禁用...

在wordpresstinyMCE中添加“代码”按钮

我一直在关注这个教程，很多人喜欢它：http://codex.wordpress.org/TinyMCE_Custom_Buttons 函数 myplugin_addbuttons() { // 如果当前用户缺少

强制tinymce通过回车键输入换行符而不是创建一个新段落

当用户在使用 TinyMCE 时按下 Enter 键时，它不会添加新行，而是添加新段落。我可以更改此行为并强制它仅添加换行符 而不是新的

Tinymce 将 p 标签更改为 div

我有一个问题，我希望 Enter （这会创建一个很大的空间，因为它会创建一个 p 标签）作为 Shift + Enter 工作。我让它与 force_br_newlines：正确， Force_p_newlines：假，

从tinymce表中删除填充

大家好，我正在为后端Web应用程序开发CRUD系统，我已经安装了tinymce，并在编辑页面中放置了它的脚本。 // 初始化你的 </desc> <question vote="1"> <p>大家好，我正在为后端 Web 应用程序开发 CRUD 系统，我已经安装了 <pre><code>tinymce</code></pre> 并在编辑页面中放置了它的脚本。</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; // Initialize your tinyMCE Editor with your preferred options tinymce.init({ selector: &#39;textarea&#39;, height: 200, theme: &#39;modern&#39;, plugins: &#39;print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern help&#39;, toolbar1: &#39;formatselect | bold underline italic strikethrough | backcolor forecolor | fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | table &#39;, toolbar2: &#39;numlist bullist | outdent indent | removeformat | subscript superscript | link unlink&#39;, fontsize_formats: &#39;7px 8px 9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 25px 26px 27px 28px 29px 30px&#39;, image_advtab: true }); &lt;/script&gt; </code></pre> <p>问题出在表格插件中，当我从编辑器中选择 <pre><code>cellspace</code></pre> 和 <pre><code>cellpadding</code></pre> 时，它可以工作，并且似乎保存正确，但是当我进入该元素的视图页面时，表格没有那个属性。当我进入 Chrome 的开发者工具时，我看到：</p> <pre><code>th, td { padding: 0 } </code></pre> <p>如果我禁用表格进入正确的维度...... 谁能告诉我出了什么问题？？</p> </question> <answer tick="true" vote="1"> <p>如果它在 TinyMCE 中看起来正确，但在编辑器外部渲染时不正确，则可能是页面的 CSS 导致了该更改。 根据您在开发工具中对 <pre><code>th</code></pre> 和 <pre><code>td</code></pre> 填充的描述，情况似乎就是如此。 </p> </answer> <answer tick="false" vote="0"> <p>我正在研究类似的问题，这帮助我了解我们的表格插件是免费版本。 TinyMCE 还有一个高级表格插件，需要付费订阅才能使用<a href="https://www.tiny.cloud/docs/tinymce/latest/advtable/" rel="nofollow noreferrer">here</a>。如果添加的话，还有更细粒度的表格选项：</p> <pre><code>tinymce.init({ selector: &#39;textarea&#39;, // change this value according to your HTML plugins: &#39;table advtable&#39;, }); </code></pre> <p>有更多选项可用于调整该特定类型表格中内置的行和列的大小。</p> </answer> </body></html>

Codeiginter - do_upload“未选择文件”

我正在尝试从所见即所得文本区域（TinyMCE）上传图像，但它不起作用，它给我错误“未选择文件”。 我使用的是多部分形式，是否与其他“输入文件冲突...

支持TinyMCE中的任何自定义组件

我想允许 TinyMCE 代码编辑器中的任何自定义元素，例如 或 ，而不预先知道将定义哪些元素...

Wordpress — 用 TEXTAREA 替换 TinyMCE？

我正在使用 Wordpress 和 TinyMCE。 TinyMCE真是个垃圾！ TinyMCE 重新格式化我的 HTML，包括删除所有 p 标签。我什至选择了 wordpress 选项来让它不这样做。

如何在TinyMCE For Flow中自动保存？

我们在 Vaadin 14 中使用 TinyMCE For Flow 3.2.0。使用 org.vaadin.tinymce.TinyMce 类中的对象。该对象似乎无法检测浏览器选项卡何时关闭。这可能会导致

如何启用 TinyMCE 保存按钮？

我在 TinyMCE 4 上添加了保存插件，但它仅在编辑器中的某些文本发生更改时启用保存按钮。是否可以通过其他方式启用该按钮？ 因为我确实有另一条文字...

preg_replace 正则表达式 HTML [已关闭]

我在 WordPress 中使用短代码。在每个短代码输出（关闭 div）之后，我得到 （或 ）标签。 试图过滤掉它们，但我不知道如何。生成的 HTML 看起来像 <...

动态改变tinyMce编辑器的高度

我在我的页面中使用tinymce编辑器。我想做的是动态改变编辑器的高度。我创建了一个函数： 函数 setComposeTextareaHeight() { $("#compose").heigh...

Rails 中如何使用tinymce 防止 <p> 标签环绕我的输入？

默认情况下，tinymce 输入作为段落标签传递到 DOM： 我想删除该元素包装器，以便tinymce 准确地传递我在文本编辑器中输入的内容。 怎么办...

有没有办法在tinymce中更改图像信息后获得回调？

我想在更改图像中的ALT属性后得到回调。上图显示了功能。 包含图像后，我单击图像，然后单击图像选项 b...

将代码格式添加到工具栏中自己的按钮

我正在制作自己的 TinyMCE 工具栏，我想添加与选择“格式”>“代码”时完全相同的功能，但作为工具栏中自己的按钮。这可能吗？我应该怎么做？ T...

TinyMCE 不使用 codesample 插件设置代码输出样式？

我尝试在Laravel项目中实现tinyMCE，想法是输出风格化的PHP代码，就像它查看输入一样。 codesample 插件不应该这样工作还是我错了。 TinyMCE 集成： 我尝试在 Laravel 项目中实现tinyMCE，想法是输出风格化的 PHP 代码，就像它查看输入一样。 codesample插件不应该像那样工作吗？还是我错了。 TinyMCE 集成： <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> <script type="text/javascript"> tinymce.init({ selector: 'textarea.tinymce-editor', width: "100%", height: "700", mode: "exact", menubar: 'file edit insert view format table tools help', plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks fullscreen', 'insertdatetime media table paste help wordcount codesample' ], toolbar: 'undo redo | formatselect |' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help codesample', content_css: '//www.tiny.cloud/css/codepen.min.css' }); </script> 输入方式： 输出的样子： 如何在blade.php文件中打印输出： {!! $post->description !!} 如您所见，输出代码并不像输入那样风格化。这样工作正常吗？ 默认情况下，codesample插件使用prism.js将代码示例嵌入到编辑器内容中。 Prism 本身包含在 codesample 插件中，但这仅影响编辑器本身中的内容。因此，您不需要外部 JS 或 CSS 即可使内容在编辑器中显示格式正确。 您需要将 prism.js 和 prism.css 添加到项目中的适当位置，以便在网页上的代码示例中突出显示语法。您可以在 Prism 网站的下载页面上生成这些文件。 有关 codesample 插件的更多信息，请查看文档： https://www.tiny.cloud/docs/plugins/opensource/codesample/ 我找到了解决方案，codesimple插件适用于prism.js当我添加prism.js和prism.css文件时，输出看起来像输入。它们应该在 TinyMCE 配置之前添加。 它有效，但不包括 HTML/XML 标签。 <button type="button" class="btn">Base class</button>