TinyMCE 将原始 html 插入活动编辑器

Question

为 TinyMCE 使用 WindowManager 我打开了一个 window 并且它写回原始 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"},
    });

Answer 1

改变这个：

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

为此：

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

这里是关于如何以各种方式在 tinymce 上设置内容的参考link。

希望对您有所帮助。

TinyMCE 将原始 html 插入活动编辑器

TinyMCE insert raw html into active editor

javascript

tinymce