ここの情報は古いです。ご理解頂いた上でお取り扱いください。

Changeset 6404 for OpenPNE/trunk


Ignore:
Timestamp:
Apr 8, 2008, 3:30:20 AM (15 years ago)
Author:
ebihara
Message:

#333:テキストモードでも簡易的にカラーピッカーを利用できるようにした

Location:
OpenPNE/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • OpenPNE/trunk/public_html/js/pne.js

    r6349 r6404  
    4747}
    4848
    49 function pne_mce_insert_tagname(id, tagname)
     49function pne_mce_insert_tagname(id, tagname, opt)
    5050{
    51     var opt = "";
     51    var opt = opt || "";
    5252
    5353    var elm = document.getElementById(id);
     
    5656    var pos = selection.create();
    5757
    58     if (tagname == "op:color") {
    59         opt = " code=\"#000000\"";
     58    if (tagname == "op:color" && !opt) {
     59        pne_mce_show_color_table(id, tagname);
     60        return;
    6061    }
    6162
     
    6667}
    6768
     69function pne_mce_show_color_table(id, tagname)
     70{
     71    var table = document.getElementById("mce_editor_color_table")
     72    if (table) {
     73        table.parentNode.removeChild(table);
     74        return;
     75    }
     76
     77    var color = null;
     78    var settings = {
     79        colors : ["000000","993300","333300","003300","003366","000080","333399","333333","800000","FF6600","808000","008000","008080","0000FF","666699","808080","FF0000","FF9900","99CC00","339966","33CCCC","3366FF","800080","999999","FF00FF","FFCC00","FFFF00","00FF00","00FFFF","00CCFF","993366","C0C0C0","FF99CC","FFCC99","FFFF99","CCFFCC","CCFFFF","99CCFF","CC99FF","FFFFFF"],
     80        grid_width : 8,
     81        default_color : "#888888"
     82    };
     83
     84    var button = document.getElementById("mce_textmode_button_op_color");
     85    var x = button.offsetLeft;
     86
     87    var button_container = document.getElementById("mce_editor_buttonmenu");
     88
     89    var table = document.createElement("table");
     90    table.id = "mce_editor_color_table";
     91    table.style.width = "150px";
     92    table.style.position = "absolute";
     93    table.style.left = (x + table.style.width) + "px";
     94    table.style.zIndex = 150;
     95    table.style.padding = "5px";
     96    table.style.border = "1px solid gray";
     97    table.style.backgroundColor = "#fff";
     98
     99    var tr;
     100 
     101    for (var i = 0; i < settings.colors.length; i++) {
     102        var code = "#" + settings.colors[i];
     103
     104        if (i == 0 || i % settings.grid_width == 0) {
     105            tr = document.createElement("tr");
     106            table.appendChild(tr);
     107        }
     108
     109        var td = document.createElement("td");
     110        td.style.backgroundColor = "#" + settings.colors[i];
     111        td.style.height = "10px";
     112        td.style.border = "1px solid white";
     113
     114        var a = document.createElement("a");
     115        a.setAttribute("href", "#");
     116        a.colorCode = code;
     117        a.style.width = "9px";
     118        a.style.height = "9px";
     119        a.style.display = "block";
     120        a.onclick = function() {
     121            pne_mce_insert_tagname(id, tagname, ' code="' + this.colorCode + '"');
     122            var table = document.getElementById("mce_editor_color_table")
     123            table.parentNode.removeChild(table);
     124        };
     125
     126        td.appendChild(a);
     127        tr.appendChild(td);
     128    }
     129
     130    button_container.appendChild(table);
     131}
     132
  • OpenPNE/trunk/webapp/modules/pc/templates/h_diary_add.tpl

    r6402 r6404  
    9595({foreach from=$INC_HEADER_decoration_config item=item key=key})
    9696({if item})
    97 <a href="#" onclick="pne_mce_insert_tagname('mce_editor_textarea', '({$key|replace:"_":":"})');"><img src="({t_img_url_skin filename=deco_`$key`})" alt="" /></a>
     97<a id="mce_textmode_button_({$key})" href="#" onclick="pne_mce_insert_tagname('mce_editor_textarea', '({$key|replace:"_":":"})');"><img src="({t_img_url_skin filename=deco_`$key`})" alt="" /></a>
    9898({/if})
    9999({/foreach})
Note: See TracChangeset for help on using the changeset viewer.