使用动态列表填充nicedit图像插件

时间:2014-02-27 23:59:18

标签: javascript php image wysiwyg nicedit

我已经尝试了很长时间来填充下拉选择框,其中包含从上传文件夹中读取的动态图像列表,但没有成功。我不需要一个已经排序的上传脚本。

同样使用float而不是align,再次没有快乐。任何人都可以帮助或至少指出我正确的方向。

非常感谢; - )

    <script>
var nicImageOptions = {
    buttons : {
        'image' : {name : 'Add Image', type : 'nicImageButton', tags : ['IMG']}
    }
    /* NICEDIT_REMOVE_START */,iconFiles : {'image' : 'image.png'}/* NICEDIT_REMOVE_END */
};
/* END CONFIG */

var nicImageButton = nicEditorAdvancedButton.extend({   
    addPane : function() {
        this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
        this.addForm({
            '' : {type : 'title', txt : 'Add/Edit Image'},
            'src' : {type : 'select', txt : 'Align', options : { ### POPULATE DYNAMICALY FROM FOLDER USING PHP ###}},
            'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}},
            'CLASS' : {type : 'select', txt : 'FLOAT', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}}
        },this.im);
    },

    submit : function(e) {
        var src = this.inputs['src'].value;
        if(src == "" || src == "http://") {
            alert("You must enter a Image URL to insert");
            return false;
        }
        this.removePane();

        if(!this.im) {
            var tmp = 'javascript:nicImTemp();';
            this.ne.nicCommand("insertImage",tmp);
            this.im = this.findElm('IMG','src',tmp);
        }
        if(this.im) {
            this.im.setAttributes({
                src : this.inputs['src'].value,
                alt : this.inputs['alt'].value,
                CLASS : this.inputs['CLASS'].value
            });
        }
    }
});

nicEditors.registerPlugin(nicPlugin,nicImageOptions);
</script>
###############################更新

使用

到达目的地
`<input type='button' onclick="nicEditors.findEditor('article').setContent('tester');" value='Change Text'`/>

...但是当我用html填充setContent时 -

<input type='button' onclick="nicEditors.findEditor('article').setContent('<img src="../IMAGES/s/0za4ihOuga.jpg" class="ifn" />');" value='Change Text'/>

我得到了

');" value='Change Text'/>

显示在页面上,图像显示

1 个答案:

答案 0 :(得分:0)

我有理由。

/* START CONFIG */
var nicImageOptions = {
    buttons : {
        'image' : {name : 'Add Image', type : 'nicImageButton', tags : ['IMG']}
    }

};
/* END CONFIG */

var nicImageButton = nicEditorAdvancedButton.extend({   
    addPane : function() {
       var objid = document.getElementById('contentid').value;
        this.im = this.ne.selectedInstance.selElm().parentTag('IMG');
        this.addForm({
            '' : {type : 'title', txt : 'Add/Edit Image'},
            'src' : {type : 'select', txt : 'Bild', options : {none : '-'}},            
            'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}},
            'align' : {type : 'select', txt : 'Align', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}}
        },this.im);
        this.myFrame = new bkElement('iframe').setAttributes({ width : '0px', height : '0px', frameBorder : 0, scrolling : 'no', src : 'listatt.php?id='+objid }).setStyle({border : 0}).appendTo(this.pane.pane);
    },

    submit : function(e) {

       var objid = document.getElementById('contentid').value;
       src = "/docs/content-" + objid + "/" + this.inputs['src'].value;


        this.removePane();

        if(!this.im) {
            var tmp = 'javascript:nicImTemp();';
            this.ne.nicCommand("insertImage",tmp);
            this.im = this.findElm('IMG','src',tmp);
        }
        if(this.im) {
            this.im.setAttributes({
                src : this.inputs['src'].value,
                alt : this.inputs['alt'].value,
                align : this.inputs['align'].value
            });
        }
    }
});

nicEditors.registerPlugin(nicPlugin,nicImageOptions);

一个例子。

enter image description here

listatt.php

<body>

<script>

function addOption(selectbox, text, value)
{
    var optn = document.createElement("option");
    optn.text = text;
    optn.value = value;
    selectbox.options.add(optn);
}

function addOptions(element, options)
{
    //var element = getElementById(selectbox);
    var size = options.length;
    for (var i = 0; i < size; i++) {
        addOption(element, options[i][0], options[i][1]);
    }
}

var element = parent.document.getElementById('src');
var option = new Array();
<?php
// here fill the array
$atts = $app->wiki->getAttachments($_id,'wiki');
$i = 0;
foreach ($atts as $att)
{
    echo "option[$i] = new Object();";
    echo "option[$i]['0'] = '$att[name]';";
    echo "option[$i]['1'] = '$att[name]';";
    $i++;
}
?>

addOptions(element,option);

</script>

</body>