主题: [教學]圖片加上位置的屬性
作者: chino, 发布日期: 2009-08-21 14:31:22, 浏览数: 4499

我是直接加在kindeditor.js,而且改成繁體的 使用v3.2.1

貼出來看的懂就用吧,幾個地方有局部修改

1.在htmlTags img: 加上align

2.修改下面這段的代碼加上align的設置

KE.plugin['image'] = {
    click : function(id) {
        KE.util.selection(id);
        var dialog = new KE.dialog({
            id : id,
            cmd : 'image',
            width : 310,
            height : 90,
            title : KE.lang['image'],
            yesButton : KE.lang['yes'],
            noButton : KE.lang['no']
        });
        dialog.show();
    },
    check : function(id) {
        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
        var type = KE.$('type', dialogDoc).value;
        var url = '';
        if (type == 1) {
            url = KE.$('imgFile', dialogDoc).value;
        } else {
            url = KE.$('url', dialogDoc).value;
        }
        var width = KE.$('imgWidth', dialogDoc).value;
        var height = KE.$('imgHeight', dialogDoc).value;
        var border = KE.$('imgBorder', dialogDoc).value;
        var Align = KE.$('imgAlign', dialogDoc).value;  //本行增加
        if (!url.match(/\.(jpg|jpeg|gif|bmp|png)(\s|$)/i)) {
            alert(KE.lang['invalidImg']);
            window.focus();
            KE.g[id].yesButton.focus();
            return false;
        }
        if (width.match(/^\d+$/) == null) {
            alert(KE.lang['invalidWidth']);
            window.focus();
            KE.g[id].yesButton.focus();
            return false;
        }
        if (height.match(/^\d+$/) == null) {
            alert(KE.lang['invalidHeight']);
            window.focus();
            KE.g[id].yesButton.focus();
            return false;
        }
        if (border.match(/^\d+$/) == null) {
            alert(KE.lang['invalidBorder']);
            window.focus();
            KE.g[id].yesButton.focus();
            return false;
        }
        return true;
    },
    exec : function(id) {
        KE.util.select(id);
        var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
        var type = KE.$('type', dialogDoc).value;
        if (!this.check(id)) return false;
        if (type == 1) {
            KE.$('editorId', dialogDoc).value = id;
            dialogDoc.uploadForm.submit();
            return false;
        } else {
            var url = KE.$('url', dialogDoc).value;
            var title = KE.$('imgTitle', dialogDoc).value;
            var width = KE.$('imgWidth', dialogDoc).value;
            var height = KE.$('imgHeight', dialogDoc).value;
            var border = KE.$('imgBorder', dialogDoc).value;
            var Align = KE.$('imgAlign', dialogDoc).value; //本行增加
            this.insert(id, url, title, width, height, border,Align); //本行修改
        }
    },
    insert : function(id, url, title, width, height, border,Align) { //本行修改
        var html = '<img src="' + url + '" ';
        if (width > 0) html += 'width="' + width + '" ';
        if (height > 0) html += 'height="' + height + '" ';
        if (title) html += 'title="' + title + '" ';
        if (Align) html += 'align="' + Align + '" '; //本行增加

        html += 'alt="' + title + '" ';
        html += 'border="' + border + '" />';
        KE.util.insertHtml(id, html);
        KE.layout.hide(id);
        KE.util.focus(id);
    }
};

應該直接蓋掉這段就可以

然後再修改plugins/image.html 我取中間一段,你自己對照一下

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="left1">
<select id="type" name="type" /> <option value="1" selected="selected">本機</option>
<option value="2">遠端</option>
</select>
</td>
<td class="right1">
<input type="file" id="imgFile" name="imgFile" style="width:220px;" />
<input type="text" id="url" name="url" value="http://" maxlength="255" style="width:220px;display:none;" />
</td>
</tr>
<tr>
<td class="left1">說明:</td>
<td class="right1">
<input type="text" id="imgTitle" name="imgTitle" value="" maxlength="100" style="width:120px;" />
<select id="imgAlign" name="imgAlign" style="width:100px;">
<option value="">圖片位置</option>
<option value="baseline">基線對齊</option>
<option value="top">居上</option>
<option value="middle">居中</option>
<option value="bottom">居下</option>
<option value="texttop">文字上方</option>
<option value="absmiddle">絕對居中</option>
<option value="absbottom">絕對居下</option>
<option value="left">居左圖文環繞</option>
<option value="right">居右圖文環繞</option>
</select>
</td>
</tr>
</table>

 

如果你是用php 那要再改upload.php 主要是加上imgAlign,取代下面這個即可

echo '<script type="text/javascript">parent.KE.plugin["image"].insert("' . $_POST['id'] . '", "' . $file_url . '","' . $_POST['imgTitle'] . '","' . $_POST['imgWidth'] . '","' . $_POST['imgHeight'] . '","' . $_POST['imgBorder'] . '","' . $_POST['imgAlign'] . '");</script>';

 

以上改完就能用了

作者: Roddy, 发布日期: 2009-08-21 16:54:21
不错 
回复
作者: 若海, 发布日期: 2009-08-28 08:47:37
还是建议自己扩展为自己的插件,最好不要动原js文件
回复
发表新帖 发表回复