Question

此问题类似于this stackoverflow问题，我们要在其中实现自定义图像库并以编程方式将图像添加到tinymice。唯一的区别是我们使用tinymce-react plugin而不是在jquery中安装tinymice。我当前的tinymice配置

<TinyMCE apiKey={"myKeyHere"}
            config={{
                height: 500,
                plugins: 'image table link',
                selector: "textarea",  // change this value according to your HTML
                menubar: "insert",
                default_link_target: "_blank",
            }}
            content={this.props.value}
            onContentChanged={(event) => {
                {/*console.log(event)*/
                }
                this.props.onChange(event)
            }}
        />

Answer 1

结果比我想的要简单得多。我可以做

    <script>
    $(document).ready(function() {
        $("#btnSubmit").click(function(){
            tinymce.activeEditor.insertContent('<img alt="Smiley face" height="50" width="50" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTi7TskMwhabA1y8S5uSKON0ES5t6ehm9nUZO_5qjDFUUU52Y22qA"/>');
        });
    });
</script>

在我页面的顶部，它起作用了。

我看到的唯一收获是，即使没有tinymice编辑器处于活动状态，它也会插入图像。但是，如果我们仅从tinymice编辑器中显示画廊，则可以解决此问题。

tinymce-react将图像插入tinymce编辑器

1 个答案: