tinymce 相关问题

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

如何以编程方式单击TinyMCE工具栏的按钮？

我想在提交按钮旁边像平常的表单按钮一样制作预览按钮（就像在大多数情况下“发布新主题”表单一样）。如何以编程方式模拟工具栏的预览按钮单击？我

javascript tinymce

回答 7 投票 0

向tinymce vue.js 包装器的工具栏添加自定义按钮的问题

我正在尝试使用vue.js包装器将自定义按钮添加到tinymce的工具栏（使用vue 3和tinymce 5）自定义按钮不显示在工具栏中的问题我已经尝试过以下...

javascript vue.js vuejs3 tinymce

回答 1 投票 0

TinyMCE 按键后反应光标返回开始

我正在使用 TinyMCE-React，当我在 TinyMCE 编辑器中输入初始值的文本时，光标不断返回到文本的开头...... 从“@tinymce/tinymce...

reactjs react-hooks tinymce

回答 3 投票 0

TinyMCE 6 和 xml 元素

TinyMCE 6 删除/剥离 body 标签。例如，当我将以下内容粘贴到源代码窗口中时测试 TinyMCE 6 删除/剥离身体标签。例如，当我将以下内容粘贴到源代码窗口时 <body xmlns="http://www.w3c.org/1999/xhtml"> <p>test</p> </body> 它被过滤成 <p>test</p> 如何保留身体标签？我有以下设置： tinymce.init({ selector: "textarea", encoding: 'raw', element_format : 'xhtml', 请注意，TinyMCE 5 保留了 body 标签 TinyMCE 6.0 中删除了整页插件（允许使用正文标签） https://www.tiny.cloud/docs/release-notes/release-notes59/#thefullpagefullpageplugin 目前（截至 2022 年 10 月）保留 body 标签的唯一方法是使用 TinyMCE 5 实际上，我的一个解决方案是在使用 save_onsavecallback 保存时添加回 body 标记，如下所示： var blob = new Blob(['<body>' + i.value+ '</body>'], {type: "text/plain;charset=utf-8"});

xml tinymce

回答 2 投票 0

Django - TinyMCE - 管理 - 如何更改编辑器大小？

我似乎找不到任何方法来改变 TinyMCE 中的编辑器大小。我在 Django 管理中编辑网站上的帖子，为了更轻松地我寻找一个比文本字段更好的编辑器。我成功了

python django tinymce django-tinymce

回答 3 投票 0

如何在Admin中设置HTMLField小部件的高度？

我在模型中有一个 HTMLField，因为这是在管理中使用 tinymce 小部件的最懒的方法。但问题是 textarea 字段没有设置“rows”属性。所以文本区域没有 e...

django tinymce django-tinymce

回答 2 投票 0

尝试将 Tinymce 插件与 webpack encore 一起使用时出错

我正在尝试在文本区域元素上使用 Tinymce 插件： </</desc> <question vote="2"> <p>我正在尝试在文本区域元素上使用 Tinymce 插件：</p> <pre><code><textarea id="reportDescription" name="reportDescription" class="form-control" rows="4"></textarea> </code></pre> <p>我正在使用 Symfony 和 Webpack Encore。所以我使用以下方法安装了该软件包：</p> <pre><code>yarn add tinymce </code></pre> <p>在 webpack.config.js 中我编码：</p> <pre><code>.copyFiles({ from: 'node_modules/tinymce/skins', to: 'skins/[path]/[name].[ext]' }) </code></pre> <p>在 .js 中我尝试初始化插件：</p> <pre><code>require('tinymce'); $(document).ready(function () { if($("#reportDescription").length > 0){ tinymce.init({ selector: "textarea#reportDescription" }); } }); </code></pre> <p>当我在浏览器上加载页面时，出现此错误：</p> <pre><code>tinymce.js:4680 GET http://url/build/models/dom/model.js net::ERR_ABORTED 404 (Not Found) tinymce.js:18181 Failed to load model: dom from url models/dom/model.js tinymce.js:4680 GET http://url/build/icons/default/icons.js net::ERR_ABORTED 404 (Not Found) tinymce.js:18181 Failed to load icons: default from url http://url/build/icons/default/icons.js tinymce.js:4680 GET http://url/build/themes/silver/theme.js net::ERR_ABORTED 404 (Not Found) tinymce.js:18181 Failed to load theme: silver from url themes/silver/theme.js </code></pre> <p>我还不太了解如何在 webpack 上使用模块。如何导入它们，何时使用 require 或 import 以及它们之间的区别。所以也许我错过了一些重要的事情。</p> </question> <answer tick="false" vote="2"> <p>我的设置如下</p> <ol> <li><p>安装copy webpack插件 -- <em>yarn 添加copy-webpack-plugin --dev</em></p> </li> <li><p>在 webpack.config.js 中</p> <pre><code>const CopyPlugin = require("copy-webpack-plugin"); // at the top // ... // ... other stuff Encore.addPlugin( new CopyPlugin({ patterns: [ { context: './node_modules/tinymce/', from: '**/*.(min.js|min.css|woff)', to: './tinymce/[path][name][ext]' } ] }) ); Encore // directory where compiled assets will be stored .setOutputPath('public/build/') // other code </code></pre> </li> <li><p>我使用stimulusjs，所以在刺激控制器（tiny_controller.js）中我有下面的代码，以便所有具有tinymce类的文本区域都将被匹配</p> <pre><code> import { Controller } from "@hotwired/stimulus"; import tinymce from 'tinymce/tinymce'; // other code // other code initialize() { this.defaults = { base_url: '/build/tinymce', plugins: 'preview importcss', menubar: 'view insert format tools table', toolbar: 'undo redo | bold italic' toolbar_sticky: false, suffix: '.min' }; } connect() { this.initTinyMCE(); } initTinyMCE() { let config = Object.assign({ selector: 'textarea.tinymce', }, this.defaults); tinymce.init(config); } //other code //other code </code></pre> </li> </ol> <p>最后在 HTML 表单中可能是这样的</p> <pre><code><div data-controller="tiny"> <textarea name="comment" class="tinymce">Enter text here..</textarea> </div> </code></pre> </answer> <answer tick="false" vote="0"> <p>虽然@Patrick Kenekayoro 发布了一个非常好的答案，但在您的场景中，问题在于路径。正如您所注意到的，它会查找 <pre><code>/build/models/...</code></pre>，因此要解决此问题，只需将以下代码复制/粘贴到您的 webpack 配置中：</p> <pre><code>.copyFiles({ from: 'node_modules/tinymce/skins', to: 'skins/[path]/[name].[ext]' }) .copyFiles({ from: 'node_modules/tinymce/models', to: 'models/[path]/[name].[ext]' }) .copyFiles({ from: 'node_modules/tinymce/plugins', to: 'plugins/[path][name].[ext]', includeSubdirectories: true, pattern: /.*/ }) .copyFiles({ from: 'node_modules/tinymce/icons', to: 'icons/[path][name].[ext]', includeSubdirectories: true, pattern: /.*/ }) </code></pre> <p>即使在最新的 Symfony 项目中，这对我来说也非常有效。</p> </answer> </body></html>

javascript symfony module tinymce webpack-encore

回答 0 投票 0

TinyMCE Vue2 和内联编辑

我正在尝试使用 TinyMCE 和 Vue.js 2.x 启用内联编辑我有一个非常简单的例子，我无法开始工作。 “普通”编辑器工作正常，所以它不是 Tiny 的安装...

vue.js vuejs2 tinymce

回答 1 投票 0

HTML 标签未使用 TinyMCE 文本编辑器在 React js 中以正确的方式呈现

我在 React js 中使用 TinyMCE 文本编辑器。使用富文本编辑器的目的是将数据与 html 标签一起保存。我面临的问题是我用 'p' ta 保存在 firebase 中的数据...

reactjs firebase dom tinymce tinymce-plugins

回答 1 投票 0

如果在多个 vuetify 对话框中使用，TinyMCE 会完全空白

我尝试在多个对话框中使用TinyMCE，但是每当我切换对话框时，TinyMCE 就会变得完全空白，我无法编辑它。我创建了这个演示来重现我收到的错误：https://

vue.js vuejs2 vuetify.js tinymce

回答 1 投票 0

使用django-tinymce时，在哪里指定referer？

我正在尝试将tinyMCE与django应用程序集成。我在 settings.py 中指定了以下内容： TINYMCE_JS_URL = "https://cdn.tiny.cloud/1//tinymce/6/tinymce.min.js&quo...

django tinymce

回答 1 投票 0

tinyMCE - tinyMCE.triggerSave() 与tinyMCE.get("id_here").triggerSave()

我已经愉快地使用tinyMCE很多年了。今天开始使用新的 Web 表单时，我在访问编辑器时遇到了两个以前从未遇到过的问题：首先，使用 jQuery.ready 我调用 t...

tinymce tinymce-4

回答 1 投票 0

如何从 TinyMCE 文本区域中删除图像和表格选项？

每次我在文本区域内单击进行输入时，都会显示这两个选项。我不需要它们。我尝试在 TinyMCE 网站上查找，但找不到任何内容。希望有人能帮我找到一个

plugins tinymce rich-text-editor

回答 2 投票 0

如何设置 TinyMCE 文本区域元素的焦点？

我正在将 TinyMCE 用于页面上的文本区域，但它在其他元素的 Tab 键顺序中表现不佳。当我跳出第一个元素时，我可以使用以下代码来捕获： $('#ti...

jquery focus tinymce

回答 13 投票 0

TinyMCE 不适用于 Bootstrap 5 模式

希望你能帮助我所以这是我的问题：我想在 Bootstrap 5 模式中集成 TinyMCE 编辑器但问题是，在 TinyMCE 模态（例如链接模态）中，我无法...

javascript html tinymce bootstrap-modal tinymce-5

回答 4 投票 0

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 来解决它

javascript vue.js tinymce vite

回答 1 投票 0

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

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

tinymce umbraco

回答 1 投票 0

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

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

tinymce

回答 10 投票 0

solid-start 中tinymce 的样式问题

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