TinyMCE向当前编辑器插入原始HTML

Question

使用WindowManager打开一个窗口并返回原始HTML，但它截断了我的图像链接。奇怪的是，它对锚标签没有这样的问题，只有对图像标签。

我有这段代码：

html = '<a title="'+ $('#title').val() +'" href="'+ $('#url').val() +'"><img src="'+ $('#imgURL').val() +'" /></a>';

    var parentEditor = parent.tinyMCE.activeEditor;
    parentEditor.execCommand('mceInsertRawHTML', false, html);
    parentEditor.windowManager.close();

它确实将HTML插入到活动编辑器中。当我将HTML记录到控制台时，我会得到：

<a title="Click Action" href="yahoo.com"><img src="http://marketingedu.mychm.co/images/buttons/c2a-button4.png" /></a>

然而，当我在tinyMCE编辑器中查看源代码时，它会将图像的SRC属性更改为。

../../images/buttons/c2a-button4.png

这是TinyMCE编辑器的完整JavaScript初始化代码。

tinymce.init({
        selector: ".editor",
        setup: function(ed) {
            ed.on('change', function(e) {
                tinyMCE.triggerSave();

                $('form').trigger('checkform.areYouSure');
            });
            ed.on('init', function(e) {
                autoresize_max_height: 500
            });
            ed.addButton('defaultbtn', {
                title: 'Insert Button',
                icon: 'fa fa-plus-square',
                onclick: function() {
                    // Open window
                    ed.windowManager.open({
                        title: 'Button Selector',
                        url: "<?=$this->url('/webinar/custombuttons') ?>",
                        width: 800,
                        height: 600
                    });
                }
            });
        },
        plugins: [
            "advlist autolink link responsivefilemanager lists charmap print preview hr anchor pagebreak spellchecker",
            "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
            "save table contextmenu directionality template paste textcolor colorpicker responsivefilemanager autoresize"
        ],
        toolbar: "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | table | link responsivefilemanager defaultbtn",
        image_advtab: true ,

        external_filemanager_path:"/filemanager/",
        filemanager_title:"Filemanager" ,
        external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
    });

- swg1cor14

Answer 1

改为：

var parentEditor = parent.tinyMCE.activeEditor;
parentEditor.execCommand('mceInsertRawHTML', false, html);

转换为这样：

tinymce.activeEditor.setContent(html, {format: 'raw'});

这里有一个参考链接，介绍了在tinymce中以各种方式设置内容的方法。

希望这可以帮到你。

- revobtz

---

它可以与HTML一起使用，但如果我想添加一些JavaScript代码，例如 <script>alert("loaded");</script>，该怎么办？ - Blues Clues

@Jie，你需要允许他们。 - Hashbrown

这篇文章救了我一命。它为我解决了问题。谢谢。已点赞。 - Dion