tinymce 相关问题

Vue 3 中带有 Vite 的我的 TinyMCE 编辑器组件在 Edit.vue 中首次加载时未加载内容数据？

我有一个带有 Vite 的 Vue 3 项目，我正在使用带有 TinyMCE 的 Editor.vue 组件。我的Editor.vue代码如下： 我的 Editor.vue 代码： ... 我有一个带有 Vite 的 Vue 3 项目，我正在使用带有 TinyMCE 的 Editor.vue 组件。我的Editor.vue代码如下： 我的 Editor.vue 代码： <template> <div class="mb-6"> <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" :for="id"> {{ label }} <span class="text-red-600" v-if="isRequired">*</span> </label> <Editor ref="editorRef" :id="id" :value="modelValue" :api-key="apiKey" @change="$emit('update:modelValue', $event.level.content)" :init="{ ...editorInit, setup: setupEditor }" /> <ValidationMessage :validation="validation" :field="id" /> </div> </template> <script setup> import { ref } from 'vue' import Editor from '@tinymce/tinymce-vue' import ValidationMessage from '@/components/ValidationMessage.vue' const apiKey = import.meta.env.VUE_APP_TINYMCE_API_KEY const props = defineProps({ isRequired: { type: Boolean, required: true }, label: { type: String, required: true }, id: { type: String, required: true }, modelValue: { type: String, required: true, default: '' }, validation: { type: Object, default: null, }, editorInit: { type: Object, default: () => ({ height: 500, selector: 'textarea', menubar: true, plugins: 'link image code lists', toolbar: 'undo redo | styleselect | forecolor | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent numlist bullist | link image | code', }), }, }) const editorRef = ref(null) const setupEditor = (editor) => { editor.on('init', () => { editor.setContent(props.modelValue) }) } defineEmits(['update:modelValue']) </script> Editor.vue 组件在我的父组件 Create.vue 中工作正常。描述字段已成功保存到数据库中。以下是我在 Create.vue 父级中使用 Editor.vue 的方法： <Editor isRequired label="Deskripsi" id="description" v-model="course.fields.description" :validation="validation" /> 问题是当我想编辑数据时，描述的内容没有直接加载到编辑器中。我需要刷新页面来加载数据。如何解决此问题，以便我的 Edit.vue 组件可以在首页加载时加载编辑器内容？ 我遇到了同样的问题，并能够通过将 @tinymce/tinymce-vue 更新到版本 5.1.1 来解决它

Umbraco 11 富文本编辑器文本大小选择器未显示

我已将以下内容添加到我的应用程序设置中： “富文本编辑器”：{ “命令”：[ { “别名”：“前色”， “姓名”：“C...

在 TinyMCE 中插入换行符而不是 <p>

我已按如下方式初始化TinyMCE。我想在用户按 Enter 键而不是段落时强制换行。我正在尝试关注，但没有成功。我正在使用 TinyMCE 版本 3_3_8。 小MCE...

solid-start 中tinymce 的样式问题

我正在尝试在一个稳定启动的项目中使用tinymce。 TinyMCE 在我需要时打开，但它没有显示工具栏，并且实际上不允许我编辑。我怀疑这是风格问题。 我

在图像工具上添加属性

我需要在图像工具上添加属性 我用的是小云。当我添加图像时，我需要在图像标签上添加类和属性。像那样 我可以添加自定义CSS tinymce.init({ 选择器: 'textarea', //

TinyMCE 编辑器预览在 Tailwind css 中不起作用

这是CDN链接 <p><pre><code>&lt;script src=&#34;https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js&#34; referrerpolicy=&#34;origin&#34;&gt;&lt;/script&gt;</code></pre>这是CDN链接</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; tinymce.init({ selector: &#39;textarea.tinymce-editor&#39;, height: 300, menubar: false, plugins: [ &#39;advlist autolink lists link image charmap print preview anchor&#39;, &#39;searchreplace visualblocks code fullscreen&#39;, &#39;insertdatetime media table paste code help wordcount&#39;, &#39;image&#39; ], toolbar: &#39;undo redo | formatselect | &#39; + &#39;bold italic backcolor | alignleft aligncenter &#39; + &#39;alignright alignjustify | bullist numlist outdent indent | &#39; + &#39;removeformat | help&#39;, content_css: &#39;//www.tiny.cloud/css/codepen.min.css&#39; }); &lt;/script&gt; {!! $courses-&gt;body !!} </code></pre> <p>我尝试在预览页面上显示内容..但不显示此预览 我尝试在预览页面上显示内容..但不显示此预览 我尝试在预览页面上显示内容..但没有显示此预览</p> </question> <answer tick="false" vote="0"> <p>我正在使用 tailwind-css..所以正常的 css 无法在该预览页面上工作..</p> <p>所以我用</p> <pre><code>&lt;div class=&#34;prose max-w-none&#34;&gt; {!! $courses-&gt;body !!} &lt;/div&gt; </code></pre> <p>在上面的代码中，我使用 prose 类来设置文本内容样式，并使用 max-w-none 来删除最大宽度限制，从而允许内容根据需要扩展。</p> </answer> </body></html>

多个tinymce文本区域

我使用tinymce来动态生成至少5个文本的网页。 不幸的是，我使用的配置仅适用于第一个文本区域。 tinyMCE.init({ 高度：“300”， 模式：“例如...

将自定义样式应用于Wordpress后端的acf tinymce可视化编辑器

主要目标：我正在为客户开发一个网站，他们希望将自定义CSS样式应用于后端可视化编辑器tinymce中的文本。没什么太疯狂的，只是一些基本的链接和列表...

TinyMCE 版本 5 的 Dark Skeen

请告诉我在哪里可以找到 TinyMCE 版本 5 的深色皮肤。 我发现的所有其他皮肤都没有深色主题： 材质经典、材质轮廓、bootstrap、织物、流畅、无边框、小型...

Laravel Nova TinyMCE - 未找到“Murdercode\TinymceEditor\TinymceEditor”类

我有这样的源代码 在此输入图像描述 Notif 中的输出 未找到类“Murdercode\TinymceEditor\TinymceEditor” 在此输入图像描述 我想上传图片到...

将焦点设置在TinyMce编辑器的加载上

当单击编辑按钮时，它会显示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()

无法从“tinymce”导入名称“HTMLField”

我在 makemigrations 时收到以下错误消息。有人可以建议一下吗。 从tinymce导入HTMLField 导入错误：无法从“tinymce”导入名称“HTMLField”（F:\Blog ootst...

我可以在tinymce编辑器中插入一个react组件吗

我可以在tinymce编辑器中插入react组件吗？ 我需要自定义一个工具栏，用户单击它后，我需要向tinymce编辑器插入一个react组件，我可以实现吗？ 我可以插入反应吗

将 React 组件添加到 TinyMCE 编辑器内容中

我们正在构建一个编辑器，我们希望使用 TimyMCE 和 React。我们有一些场景，在事件中我们必须将基于模板的内容添加到编辑器。我正在计划设计该项目...

Reactjs 与 TinyMCE 编辑器代码插件一起

我将Reactjs与tinyMCE 4.1.10 html编辑器（以及代码插件）和bootsrap css + js元素一起使用。经过编辑器的一些怪癖之后，一个相当有效的设置被重新...

占位符文本不适用于tinyMCE React

我正在使用tinyMCE反应 "tinymce": "^6.7.0", "@tinymce/tinymce-react": "^4.3.0", 我正在尝试向编辑器添加占位符。及其支持的形式 v5.0....

如何修复“ReferenceError：在”构建期间未定义导航器

我有一个使用 TypeScript 的 Next.js 项目。我参考了官方文档，结果如下。 BundledEditor.jsx： // ** https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/ **//

如何修复ReferenceError：导航器未定义yarn build

我有一个带有打字稿的 Nextjs 项目。 我参考了官方文档 https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/ 捆绑编辑器.jsx // ** https://www.tiny.cloud/docs/tinymce/6/

使用 TinyMce 进行捆绑 get ReferenceError: navigator is not Defined

我有一个 TypeScript Nextjs 项目，我想在没有 API 密钥的情况下使用 TinyMce。 我参考了官方的 https://www.tiny.cloud/docs/tinymce/6/react-pm-bundle/ 然后我创建一个 BundledEdi...

如何在tinymce中使用filemanager（响应式文件管理器）上传文件到亚马逊

我如何在文件管理器（响应式文件管理器）中将文件上传到亚马逊并在上传图像后对其进行加密。 使用此设置时，它仅将所有图像保存在我的本地文件夹中，任何想法......