tinymce 相关问题

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

更新已安装的vue 3(nuxtjs)中的tinymce html内容

我在 nuxt.js 中有以下 vue3 页面。我已全局禁用 SSR。 函数 setHtml() { tinymce.activeEditor.setContent('<p>test</p>'); } </</desc> <question vote="0"> <p>我在 nuxt.js 中有以下 vue3 页面。我已全局禁用 SSR。</p> <pre><code>&lt;script setup&gt; function setHtml() { tinymce.activeEditor.setContent(&#39;&lt;p&gt;test&lt;/p&gt;&#39;); } &lt;/script&gt; &lt;template&gt; &lt;Navbar/&gt; &lt;editor api-key=&#34;no-api-key&#34; :init=&#34;{ menubar: false, plugins: &#39;lists advlist link image emoticons&#39;, toolbar: &#39;styleselect | forecolor backcolor | font-size bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image emoticons&#39; }&#34; /&gt; &lt;button @click=&#34;setHtml()&#34;&gt; Update html &lt;/button&gt; &lt;br&gt; &lt;textarea id=&#34;htmlOutput&#34; style=&#34;width: 100%; height: 50px;&#34;&gt;&lt;/textarea&gt; &lt;/template&gt; &lt;script&gt; import Editor from &#39;@tinymce/tinymce-vue&#39; export default { mounted() { tinymce.activeEditor.setContent(&#39;&lt;p&gt;test&lt;/p&gt;&#39;); } } &lt;/script&gt; </code></pre> <p>现在,我想在组件加载后直接将编辑器的 html 更新为 <pre><code>&lt;p&gt;test&lt;/p&gt;</code></pre> 。为此我应该使用<pre><code>mounted()</code></pre>。这会导致以下错误:</p> <pre><code>[nuxt] error caught during app initialization ReferenceError: tinymce is not defined </code></pre> <p>我尝试创建一个名为 <pre><code>setHtml()</code></pre> 的函数,该函数通过按钮调用。这确实有效。所以,我认为会发生以下两种情况之一:</p> <ol> <li><pre><code>mounted()</code></pre>的范围无法访问<pre><code>tinymce</code></pre></li> <li>每当执行<pre><code>mounted()</code></pre>时,编辑器尚未成功加载</li> </ol> <p>如何在安装页面后直接更新编辑器的 html 内容?</p> <p><a href="https://codesandbox.io/p/sandbox/vibrant-rain-7762dl?file=%2Fpages%2Findex.vue%3A32%2C1-32%2C39" rel="nofollow noreferrer">沙盒链接</a></p> </question> </body></html>

回答 0 投票 0

execCommand 事件中的 TinyMCE 问题

TinyMCE 编辑器有问题。当我从工具栏插入表格时,会触发 execCommand,它应该包含 mceInsertTable。但是,会触发两个事件:mceInsertConten...

回答 0 投票 0

当我单击工具栏上的任何内容时,TinyMce 会重新加载

问题是,每次我单击工具栏上的任何内容时,tinyMCE(v 4.7.12)编辑器都会重新加载。这仅在一次回发后发生。在第一次初始化时,编辑器工作正常,但是......

回答 1 投票 0

占位符在 TINYMCE 的编辑器文本区域中不起作用

我们尝试在tinymce.init中添加占位符,但它没有显示在文本区域中。 tinymce.init({ 选择器:“文本区域”, ** 占位符:“输入段落文本。突出显示要应用的文本

回答 0 投票 0

Tinymce 5.1.0 版本无法与 React 一起使用

尝试将tinymce与react结合使用,但@tinymce/tinymce-react的最新版本是4.3.0。我想使用 5.1.0 版本,如何在 React 中做到这一点?有什么帮助吗?设置代码为tinymce.ini...

回答 1 投票 0

使用 Vue.js 覆盖 TinyMCE 下拉列表中 formatselect 的 CSS

我已将tinyMCE编辑器集成到我的Vue.js应用程序中。 :初始化=“{ 高度:800, 菜单栏:假, 内联:真实, 设置:(编辑器)=> { 编辑....

回答 0 投票 0

TinyMCE 粘贴功能不起作用

我尝试在 TinyMCE 编辑器中使用复制/粘贴功能,但我注意到粘贴功能不起作用。我删除了所有插件并用“干净”的 TinyMCE 重新测试了它,但粘贴仍然没有效果......

回答 3 投票 0

如何从外部js文件调用参数化的tinymce.init?

我搜索了很多以寻找如何使用包含以下代码的 javascript 创建单独的 .js 文件的答案: tinymce.init({ 选择器:'#tbInformation', 插件:'列出 advlist

回答 0 投票 0

如何禁用 TinyMCE 自动文本替换

我使用 tinyMCE 版本 5.07 我注意到当我插入文本 #1 它会自动更改为 1 我如何禁用此自动格式或将其更改为 # 不会触发

回答 2 投票 0

如何阻止 TinyMCE 添加“<br data-mce-bogus=1">

我正在使用 TinyMCE 在自托管解决方案中提供的富文本区域。 当我添加项目符号列表并添加新项目时,文本 被添加到标记中。我...

回答 1 投票 0

TinyMCE 在 ColorPicker 中只显示 2 种颜色而不是 3 种

我正在使用 TinyMCE 的 backcolor 模块以及相应的 color_map 来快速访问重要的颜色(至少对于我们的项目而言)。 但我的问题是它只显示 2 ...

回答 1 投票 0

使用 tinymce 编辑器插入图像时出错

上传文件(文件,user.org_id) .then((结果) => { const filePath = `${S3_URL_MASTER}${user.org_id}/emailtemplate/${result.filename}`; cb(文件路径, {...

回答 0 投票 0

我们的 TinyMCE 编辑器从 v5 升级到 v6 有优势(或需求)吗?

我们正在为少数相当小的站点使用 TinyMCE v5。只有一个站点更大。 我的站点已设置好,并且可以在云中使用免费版 TinyMCE 5 正常工作。我猜是通过 AWS。 在 v5 我贝尔...

回答 0 投票 0

将 Material UI v4 的主题应用于 TinyMCE 内容

我们正在使用 Material UI v4,我们正在使用动态生成的样式 const useStyles = makeStyles((主题: 主题) => ({ 根:(选项)=>({ '& h1': options.h1, ...

回答 0 投票 0

在 tinyMCE 版本 6 中插入页眉和页脚

我已经安装了一个嵌入到 BPMS 中的 TinyMCE,我在添加页眉和页脚时遇到了问题。我尝试了 https://github.com/sirap-group/tinymce-plugin-headersfooters 但没有成功。

回答 0 投票 0

富文本编辑器 - 触发用户登录请求,由于内置的 WP tinymce 编辑器

我不是编码员,只是想使用富文本编辑器使表单更加用户友好。出于某种原因,这会触发 443 的用户登录请求。 我们在 wp-admin 上有密码保护,但是......

回答 0 投票 0

如何设置tinymce文本区域的高度?

我正在使用以下内容: <p>我正在使用以下内容:</p> <pre><code> <textarea data-ui-tinymce="tinymceOptions" data-ng-disabled="modal.action=='delete'" data-ng-model="modal.formData.text" id="inputText" rows="20" required></textarea> </code></pre> <p>tinymce出现时高度只有几厘米。第一次出现时如何更改默认高度?</p> <p>这是我正在使用的选项列表:</p> <pre><code>selector: "textarea", plugins: [ "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "table contextmenu template textcolor paste fullpage textcolor" ], toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect fontselect fontsizeselect", toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | code | inserttime preview | forecolor backcolor", toolbar3: "table | hr removeformat | subscript superscript | charmap | print fullscreen | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", menubar: false, toolbar_items_size: 'small', templates: [ {title: 'Test template 1', content: 'Test 1'}, {title: 'Test template 2', content: 'Test 2'} </code></pre> <p>]</p> </question> <answer tick="false" vote="25"> <p>来自javascript</p> <pre><code>tinymce.init({ selector: 'textarea', height: 200 }); </code></pre> <p>或来自 html</p> <pre><code><textarea style="height: 200px;"> </code></pre> </answer> <answer tick="true" vote="6"> <p>你应该在 CSS 中设置容器对象的高度:</p> <pre><code>#inputText { height : 10000000px; } </code></pre> </answer> <answer tick="false" vote="2"> <p>对于 tinyMCE 版本 <strong>before</strong> 4.X 那么这段代码是有效的</p> <pre><code>tinyMCE.init({ ..., setup: function(editor) { editor.onInit.add(function() { var width = editor.getWin().clientWidth; var height = 50; editor.theme.resizeTo(width, height); }); } }); </code></pre> <p>对于 tinyMCE 版本 4.X 和 <strong>之后</strong> 那么这段代码是有效的</p> <pre><code>tinyMCE.init({ setup: function (ed) { ed.on('init', function(args) { var id = ed.id; var height = 25; document.getElementById(id + '_ifr').style.height = height + 'px'; }); } }); </code></pre> </answer> <answer tick="false" vote="1"> <p>TinyMCE的全局高度设置,编辑Django项目的settings.py:</p> <pre><code>TINYMCE_DEFAULT_CONFIG = {'height': 120} </code></pre> <p>对于每个小部件设置,在表单类中使用<pre><code>mce_attrs</code></pre>:</p> <pre><code>input = forms.CharField(widget=TinyMCE(mce_attrs={'height': 120})) </code></pre> <p>使用 django-tinymce 2.7.0. 测试</p> <p><strong>引擎盖下:</strong> 您可以在文本区域生成的 HTML 的 data-mce-conf 属性中看到类似<pre><code>&quot;height&quot;: 120,</code></pre> 的字符串。否则,会出问题。</p> </answer> <answer tick="false" vote="0"> <p>对我有用(见<strong>setTimeout</strong>部分)</p> <p></p><div data-hide="false" data-lang="js"> <div> <pre><code>$(function () { window.init_tinymce = function (id, custom_config) { var textarea = $('#' + id); // Default TinyMCE configuration var basic_config = { mode: 'none', plugins: "link", menu: 'none', toolbar: 'bold | formatselect | link' }; tinymce.init($.extend(basic_config, custom_config)); ... setTimeout(function(){ //wait for tinymce to load console.log('timeout'); $(tinymce.editors[0].iframeElement).contents().find('body') .css('min-height', $(tinymce.editors[0].contentAreaContainer).height() * .9); }, 1000); }; });</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>将此 css 添加到您的自定义样式表,否则它将降低所有现有编辑器的高度。 </p> <pre><code>.mce-edit-area iframe { max-height: 200px; } </code></pre> </answer> <answer tick="false" vote="0"> <p>对于版本 6,以下代码应该可以工作</p> <pre><code>const wishedHeight = '100px' // get `editor` from context of callbacks like `init`, `setup`, `loaded`, etc editor.editorContainer.style.height = wishedHeight; </code></pre> </answer> </body></html>

回答 0 投票 0

tiny mce 提到插件在获取调用中访问服务器 url 时遇到问题

我正在通过云 API 使用 tiny mce 6,需要做一个基本的提及插件实现来带来用户列表,但是当我调用服务器上的其中一个路由来获取用户时,网络...

回答 0 投票 0

setContent of an textarea with tinyMCE

我有一些文本区域,它们都带有 tinyMCE。 我想设置特定文本区域的内容,但找不到方法。 我试过这个: tinyMCE.get('标题').setContent(

回答 11 投票 0

如何在 tinyMCE 中用服务器的 url 替换 imgae 文件?

所以,我将富文本编辑器从 Quill 更改为 tinyMCE,我面临的问题是当我从本地计算机上传图像时,我在使用 tinymce.activeEditor 时将其作为文件获取。

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.