TinyMCE是一个独立于平台的基于Web的JavaScript HTML WYSIWYG编辑器控件,由Moxiecode Systems AB在LGPL下作为开源发布。使用此标记可以了解有关TinyMCE的使用及其与CMS和其他基于Web的应用程序的集成的问题。
我正在开发的 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 4 上添加了保存插件,但它仅在编辑器中的某些文本发生更改时启用保存按钮。是否可以通过其他方式启用该按钮? 因为我确实有另一条文字...
我想在更改图像中的ALT属性后得到回调。上图显示了功能。 包含图像后,我单击图像,然后单击图像选项 b...
Silverstripe 4 TinyMCE 插件:如何保存和恢复每条记录唯一的滚动位置
我正在为 Silverstripe CMS 开发一个 TinyMCE 插件,用于在编辑和保存长文本内容后保存和恢复滚动位置。当前的实现可以很好地恢复...
tinyMCE 在空 p 标签之间放置什么字符。 我有以下空 p 标签: tinyMCE 在空 p 标签之间放置什么字符。 我有以下空 p 标签: <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> 我想删除它......但它们不被 str_replace 或 preg_replace 识别。我能做的最好的事情就是找到标签之间的space。换句话说,我可以删除 <p> 本身或 </p> ...但是当我尝试搜索 <p> </p> 没找到。 尝试过 或   我在网上找到了很多解决方案,但没有一个有效。似乎有问题的字符(p 标签之间的空格)不同或不知何故无法识别。我这么说是因为我尝试了以下 str_replace(" ", "", $html); 字符串中的所有其他空格都被删除...除了 p 标签之间的空格。 它可能是某种类型的非打印 unicode 字符。 \s 或者可能是\pS。 preg_replace("@<p>[\pZ\pC]*</p>@u", "", $string);
是否有其他方法可以禁用将 Base64 图像转换为 blob 的逻辑?
“images_dataimg_filter”选项还可用于指定过滤谓词函数,以禁用在编辑器中将 Base64 图像转换为 Blob 的逻辑。 随着新版本...
我使用 TinyMCE 4,我已将源内容作为链接插入 示例链接 在TinyMCE中插入以上内容后,如果我点击预览b...
哪里可以下载Tinymce 4.0.28 | tinymce.js 文件具体
我一直在尝试找到 Tinymce 4.0.28 js 文件来运行我的旧程序。我在github上找到的档案好像没有js文件: A)“tinymce.js” B)“tinymce.min.js” Tinymce 网站
tinymce.get('content').getContent 不管用。 这是我的代码。你可以看到我尝试过的不同事情的所有不同评论。我有 警报('结束'); 最后只是作为一个测试...
获取 TinyMCE 4 字体大小下拉菜单,以 px 而不是 pt 为单位设置字体大小
有没有人找到一种方法可以让 TinyMCE 4 字体大小下拉菜单提供以 px 而不是 pt 为单位的字体大小? 谢谢
我尝试粘贴 HTML 代码。我使用tinymce代码插件。保存后就OK了。 源代码:测试... 我尝试粘贴 HTML 代码。我使用tinymce代码插件。保存后就OK了 源代码:<p><code><html><body>test</body></html></code></p> 显示在页面上:<html><body>test</body></html> 当我再次编辑它时,打开后所有html代码都丢失了:<p><code>test</code></p> 我使用的是4.5版本。 我可以将您的内容加载到 TinyMCE 中,它会保留所有正确的元素: https://fiddle.tiny.cloud/keiaab 该小提琴适用于 TinyMCE 4、5 和 6。 请注意,TinyMCE 4 不是当前受支持或维护的 TinyMCE 版本。目前支持的版本是TinyMCE 5和TinyMCE 6。 我也有同样的问题,我使用codesample插件粘贴HTML代码,并且在前端可以看到良好的结果 但是当我想编辑该帖子时,当内容从 DB 加载到tinymce 时,TniyMce 会删除 HTML 代码。 当我在 codesample 插件框中编写一些代码时,它会执行以下操作,当从数据库加载相同的代码时不会发生这种情况。
我在asp.net应用程序中使用这个插件http://www.tinymce.com的tiny mce文本编辑器。 我正在使用 http://www.roxyfileman.com/TinyMCE-file-browser 添加文件浏览器 mce 中的功能...
一位客户要求我制作一个插件来插入电话链接,我知道这可以通过链接插件来完成,但他想要一个专门设计来执行此操作的插件。我已经有了带有弹出窗口的插件
我正在尝试基于现有的 TinyMCE 4 图像插件构建自定义插件。它将有两个下拉菜单。当用户单击第一个时 - 我想隐藏第二个(css 样式显示:无;)。 ...
我正在使用 TinyMCE 4.1.10 在页面上的多个 div 上启用内联编辑。初始页面加载时一切正常,但如果我拆除编辑器并在 ajax 调用 Tiny 中重新绑定文本区域...
我可以通过以下方式访问 TinyMCE 中选定的文本 var选择=parent.tinyMCE.activeEditor.selection.getContent(); 但我如何才能访问已选择的文本片段的 href
tinyMCE - tinyMCE.triggerSave() 与tinyMCE.get("id_here").triggerSave()
我已经愉快地使用tinyMCE很多年了。今天开始使用新的 Web 表单时,我在访问编辑器时遇到了两个以前从未遇到过的问题: 首先,使用 jQuery.ready 我调用 t...
我需要更新使用 Visual Studio 开发的 asp.net 项目中的几个 MS NuGet 包。我正在更新的是 Microsoft.AspNet.Identity.EntityFramework Microsoft.CodeDom.Prov...
Silverstripe 4 使用额外的自定义 HTMLEditorField
在 Silverstripe 4 中我们如何使用不同的 HTMLEditor 配置? 我想在同一环境中有两个不同的 HTMLEditorFields。 一款具有所有功能和所有按钮的产品。 还有一个(
当单击编辑按钮时,它会显示tinymce文本编辑器,但问题是它不会将焦点设置在从第二个开始的编辑器的第一次加载上,它工作正常 以下是我尝试过的 超文本标记语言 当单击编辑按钮时,它会显示tinymce文本编辑器,但问题是它没有将焦点设置在从第二个开始的编辑器的第一次加载上,它工作正常 以下是我尝试过的 HTML <h3>History Review <a href="#" class="blue_edit_btn" id="history_review_link" onclick="bgshoweditor('history_review')" >Edit</a></h3> JQuery function bgshoweditor(editorid) { $("#"+editorid+"_div").hide(); $("#"+editorid).show(); tinyMCE.execCommand('mceRemoveControl', false, editorid ); tinyMCE.execCommand('mceAddControl', true, editorid ); tinyMCE.execCommand('mceFocus', false, editorid ); tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true); tinyMCE.activeEditor.selection.collapse(false); } 也许 mceFocus 命令已在 TinyMce 4 中删除(我这么说是因为在 4.x 中删除了 mceRemoveControl 和 mceAddControl )。 所以,我建议使用.focus() 试试这个: tinyMCE.get(editorid).focus(); 工作示例 或者您可以使用 auto_focus 属性。 auto_focus:此选项使您能够自动聚焦编辑器实例。 注意:auto_focus 在编辑器加载时将焦点设置在编辑器上 尝试此代码可能对您有用 function bgshoweditor(editorid) { $("#"+editorid+"_div").hide(); $("#"+editorid).show(); if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) { tinyMCE.execCommand('mceRemoveControl', false, editorid ); } tinyMCE.execCommand('mceAddControl', true, editorid ); tinyMCE.execCommand('mceFocus', false, editorid ); tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.getBody(), true); tinyMCE.activeEditor.selection.collapse(false); } 适用于tinyMCE v4+ tinymce.activeEditor.focus(); 以防万一您正在寻找 VUE 瘦插件的解决方案 @tinymce/tinymce-vue import { getTinymce } from '@tinymce/tinymce-vue/lib/es2015/main/ts/TinyMCE' const tinyMCE = getTinymce() tinyMCE.activeEditor.focus()