如何在纤细的组件中包含和使用tinymce？答案

【问题标题】：How to include and use tinymce in a svelte component?如何在纤细的组件中包含和使用tinymce？
【发布时间】：2019-11-06 12:47:42
【问题描述】：

我想在我的苗条应用程序中包含一个外部 rtf 组件。

我尝试使用 template.htm 中的 cdn 添加 tinymce，然后创建以下 svelte 组件。编辑器呈现，但我无法将数据输入或输出编辑器。

<script>
  import { onMount, tick } from 'svelte'
  export let label = ''
  export let value = ''

  $: console.log('value', value)

  onMount(() => {
    tinymce.init({
      selector: '#tiny',
    })
  })
</script>

<p>
  <label class="w3-text-grey">{label}</label>
  <textarea id="tiny" bind:value />
</p>

【问题讨论】：

标签： tinymce svelte

【解决方案1】：

超级老但是今天遇到这个问题，找到了解决办法。

解决办法：

<svelte:head>
    <script src="https://cdn.tiny..."></script>
</svelte:head>

<script>
import {onMount} from 'svelte';
let getHTML;
let myHTML;
onMount(() => {
    tinymce.init({
        selector: '#tiny'
    })

    getHTML = () => {
        myHTML = tinymce.get('tiny').getContent();
    }
})
</script>

<textarea id="tiny" bind:value />

<!-- click to get html from the editor -->
<button on:click={getHTML}>Get HTML from TinyMCE</button>
<!-- html is printed here -->
{myHTML}

说明：

我最初的想法是按正常方式绑定

<textarea bind:value></textarea>

但这不起作用我认为因为 tinyMCE 在后台做复杂的事情。我没有在template.htm 中添加cdn 引用，而是使用<svelte:head>，所以它只为这个组件加载。必须调用函数tinymce.get('...').getContent()才能获取编辑器的内容，但是它需要tinyMCE，所以必须在onMount内部调用。所以我在 onMount 中定义了一个函数getHTML。现在getHTML可以在任何地方使用，将编辑器的内容分配给myHTML。

【讨论】：

在 svelte:head 标记中包含

【解决方案2】：

第一步：

在终端上运行此命令

    npm install @tinymce/tinymce-svelte

（安装参考：https://www.tiny.cloud/docs/integrations/svelte/）

第二步：

  <script>
    import { onMount } from 'svelte';
    let myComponent;
    let summary='';  

   
    onMount(async()=>{
            const module=await import ('@tinymce/tinymce-svelte');
            myComponent=module.default;
    })
  </script>

第三步：

<svelte:component this={myComponent} bind:value={summary}/>
{@html summary}

【讨论】：