FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 Guests

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

SCEditor Color Picker [Color Cubes]

View previous topic View next topic Go down

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sat 08 Mar 2014, 00:52

Hello,

This color picker was developed for the editor I am working on, but I've reworked it for use with the SCEditor. The color picker button is added after the original color button.

SCEditor Color Picker [Color Cubes] Captu123

Hovering over the colors will show their hex values in the input field. Additionally the color is also displayed at a larger scale next to the input. You can also type the color you want in the input field and click enter to insert the color into the editor. All colors present in the color cubes are web safe.

To install and test it :
Administration Panel > Modules > Javascript codes management > Create a new script

Title : Color picker
Placement : In all the pages
Code:
$(function() {$(function() {
    var colorPicker = '<div id="colorCubePopup"><style>#colorCubePopup {display:none;position:absolute;color:#333;font-size:10px;background:#fff;border:1px solid #ccc;padding:0;box-shadow:1px 2px 4px rgba(0,0,0,0.2);z-index:9999} #colorCubePopup div { margin:0; } .paletteColor {height:10px;width:10px;border:1px solid #fff;display:inline-block;cursor:pointer;} .paletteColor:hover {border-color:#333;} .marginR {margin-right:10px !important;} .colorPanel {padding:3px !important;border-bottom:1px solid #CCC;} #colorResult {width:48px;height:18px;border:1px solid #CCC;display:inline-block} #hexColor {margin:0 3px !important;vertical-align:top;padding:2px;cursor:text;} </style><div class="colorPanel"><div id="colorResult"></div><input id="hexColor" type="text" placeholder="#" size="8"></div><div id="colorCube" class="paletteColor marginR" style="background:#000000;"></div><div id="colorCube" class="paletteColor" style="background:#000000;"></div><div id="colorCube" class="paletteColor" style="background:#003300;"></div><div id="colorCube" class="paletteColor" style="background:#006600;"></div><div id="colorCube" class="paletteColor" style="background:#009900;"></div><div id="colorCube" class="paletteColor" style="background:#00CC00;"></div><div id="colorCube" class="paletteColor" style="background:#00FF00;"></div><div id="colorCube" class="paletteColor" style="background:#330000;"></div><div id="colorCube" class="paletteColor" style="background:#333300;"></div><div id="colorCube" class="paletteColor" style="background:#336600;"></div><div id="colorCube" class="paletteColor" style="background:#339900;"></div><div id="colorCube" class="paletteColor" style="background:#33CC00;"></div><div id="colorCube" class="paletteColor" style="background:#33FF00;"></div><div id="colorCube" class="paletteColor" style="background:#660000;"></div><div id="colorCube" class="paletteColor" style="background:#663300;"></div><div id="colorCube" class="paletteColor" style="background:#666600;"></div><div id="colorCube" class="paletteColor" style="background:#669900;"></div><div id="colorCube" class="paletteColor" style="background:#66CC00;"></div><div id="colorCube" class="paletteColor" style="background:#66FF00;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#333333;"></div><div id="colorCube" class="paletteColor" style="background:#000033;"></div><div id="colorCube" class="paletteColor" style="background:#003333;"></div><div id="colorCube" class="paletteColor" style="background:#006633;"></div><div id="colorCube" class="paletteColor" style="background:#009933;"></div><div id="colorCube" class="paletteColor" style="background:#00CC33;"></div><div id="colorCube" class="paletteColor" style="background:#00FF33;"></div><div id="colorCube" class="paletteColor" style="background:#330033;"></div><div id="colorCube" class="paletteColor" style="background:#333333;"></div><div id="colorCube" class="paletteColor" style="background:#336633;"></div><div id="colorCube" class="paletteColor" style="background:#339933;"></div><div id="colorCube" class="paletteColor" style="background:#33CC33;"></div><div id="colorCube" class="paletteColor" style="background:#33FF33;"></div><div id="colorCube" class="paletteColor" style="background:#660033;"></div><div id="colorCube" class="paletteColor" style="background:#663333;"></div><div id="colorCube" class="paletteColor" style="background:#666633;"></div><div id="colorCube" class="paletteColor" style="background:#669933;"></div><div id="colorCube" class="paletteColor" style="background:#66CC33;"></div><div id="colorCube" class="paletteColor" style="background:#66FF33;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#666666;"></div><div id="colorCube" class="paletteColor" style="background:#000066;"></div><div id="colorCube" class="paletteColor" style="background:#003366;"></div><div id="colorCube" class="paletteColor" style="background:#006666;"></div><div id="colorCube" class="paletteColor" style="background:#009966;"></div><div id="colorCube" class="paletteColor" style="background:#00CC66;"></div><div id="colorCube" class="paletteColor" style="background:#00FF66;"></div><div id="colorCube" class="paletteColor" style="background:#330066;"></div><div id="colorCube" class="paletteColor" style="background:#333366;"></div><div id="colorCube" class="paletteColor" style="background:#336666;"></div><div id="colorCube" class="paletteColor" style="background:#339966;"></div><div id="colorCube" class="paletteColor" style="background:#33CC66;"></div><div id="colorCube" class="paletteColor" style="background:#33FF66;"></div><div id="colorCube" class="paletteColor" style="background:#660066;"></div><div id="colorCube" class="paletteColor" style="background:#663366;"></div><div id="colorCube" class="paletteColor" style="background:#666666;"></div><div id="colorCube" class="paletteColor" style="background:#669966;"></div><div id="colorCube" class="paletteColor" style="background:#66CC66;"></div><div id="colorCube" class="paletteColor" style="background:#66FF66;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#999999;"></div><div id="colorCube" class="paletteColor" style="background:#000099;"></div><div id="colorCube" class="paletteColor" style="background:#003399;"></div><div id="colorCube" class="paletteColor" style="background:#006699;"></div><div id="colorCube" class="paletteColor" style="background:#009999;"></div><div id="colorCube" class="paletteColor" style="background:#00CC99;"></div><div id="colorCube" class="paletteColor" style="background:#00FF99;"></div><div id="colorCube" class="paletteColor" style="background:#330099;"></div><div id="colorCube" class="paletteColor" style="background:#333399;"></div><div id="colorCube" class="paletteColor" style="background:#336699;"></div><div id="colorCube" class="paletteColor" style="background:#339999;"></div><div id="colorCube" class="paletteColor" style="background:#33CC99;"></div><div id="colorCube" class="paletteColor" style="background:#33FF99;"></div><div id="colorCube" class="paletteColor" style="background:#660099;"></div><div id="colorCube" class="paletteColor" style="background:#663399;"></div><div id="colorCube" class="paletteColor" style="background:#666699;"></div><div id="colorCube" class="paletteColor" style="background:#669999;"></div><div id="colorCube" class="paletteColor" style="background:#66CC99;"></div><div id="colorCube" class="paletteColor" style="background:#66FF99;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#CCCCCC;"></div><div id="colorCube" class="paletteColor" style="background:#0000CC;"></div><div id="colorCube" class="paletteColor" style="background:#0033CC;"></div><div id="colorCube" class="paletteColor" style="background:#0066CC;"></div><div id="colorCube" class="paletteColor" style="background:#0099CC;"></div><div id="colorCube" class="paletteColor" style="background:#00CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#00FFCC;"></div><div id="colorCube" class="paletteColor" style="background:#3300CC;"></div><div id="colorCube" class="paletteColor" style="background:#3333CC;"></div><div id="colorCube" class="paletteColor" style="background:#3366CC;"></div><div id="colorCube" class="paletteColor" style="background:#3399CC;"></div><div id="colorCube" class="paletteColor" style="background:#33CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#33FFCC;"></div><div id="colorCube" class="paletteColor" style="background:#6600CC;"></div><div id="colorCube" class="paletteColor" style="background:#6633CC;"></div><div id="colorCube" class="paletteColor" style="background:#6666CC;"></div><div id="colorCube" class="paletteColor" style="background:#6699CC;"></div><div id="colorCube" class="paletteColor" style="background:#66CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#66FFCC;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FFFFFF;"></div><div id="colorCube" class="paletteColor" style="background:#0000FF;"></div><div id="colorCube" class="paletteColor" style="background:#0033FF;"></div><div id="colorCube" class="paletteColor" style="background:#0066FF;"></div><div id="colorCube" class="paletteColor" style="background:#0099FF;"></div><div id="colorCube" class="paletteColor" style="background:#00CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#00FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#3300FF;"></div><div id="colorCube" class="paletteColor" style="background:#3333FF;"></div><div id="colorCube" class="paletteColor" style="background:#3366FF;"></div><div id="colorCube" class="paletteColor" style="background:#3399FF;"></div><div id="colorCube" class="paletteColor" style="background:#33CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#33FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#6600FF;"></div><div id="colorCube" class="paletteColor" style="background:#6633FF;"></div><div id="colorCube" class="paletteColor" style="background:#6666FF;"></div><div id="colorCube" class="paletteColor" style="background:#6699FF;"></div><div id="colorCube" class="paletteColor" style="background:#66CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#66FFFF;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FF0000;"></div><div id="colorCube" class="paletteColor" style="background:#990000;"></div><div id="colorCube" class="paletteColor" style="background:#993300;"></div><div id="colorCube" class="paletteColor" style="background:#996600;"></div><div id="colorCube" class="paletteColor" style="background:#999900;"></div><div id="colorCube" class="paletteColor" style="background:#99CC00;"></div><div id="colorCube" class="paletteColor" style="background:#99FF00;"></div><div id="colorCube" class="paletteColor" style="background:#CC0000;"></div><div id="colorCube" class="paletteColor" style="background:#CC3300;"></div><div id="colorCube" class="paletteColor" style="background:#CC6600;"></div><div id="colorCube" class="paletteColor" style="background:#CC9900;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC00;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF00;"></div><div id="colorCube" class="paletteColor" style="background:#FF0000;"></div><div id="colorCube" class="paletteColor" style="background:#FF3300;"></div><div id="colorCube" class="paletteColor" style="background:#FF6600;"></div><div id="colorCube" class="paletteColor" style="background:#FF9900;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC00;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF00;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#00FF00;"></div><div id="colorCube" class="paletteColor" style="background:#990033;"></div><div id="colorCube" class="paletteColor" style="background:#993333;"></div><div id="colorCube" class="paletteColor" style="background:#996633;"></div><div id="colorCube" class="paletteColor" style="background:#999933;"></div><div id="colorCube" class="paletteColor" style="background:#99CC33;"></div><div id="colorCube" class="paletteColor" style="background:#99FF33;"></div><div id="colorCube" class="paletteColor" style="background:#CC0033;"></div><div id="colorCube" class="paletteColor" style="background:#CC3333;"></div><div id="colorCube" class="paletteColor" style="background:#CC6633;"></div><div id="colorCube" class="paletteColor" style="background:#CC9933;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC33;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF33;"></div><div id="colorCube" class="paletteColor" style="background:#FF0033;"></div><div id="colorCube" class="paletteColor" style="background:#FF3333;"></div><div id="colorCube" class="paletteColor" style="background:#FF6633;"></div><div id="colorCube" class="paletteColor" style="background:#FF9933;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC33;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF33;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#0000FF;"></div><div id="colorCube" class="paletteColor" style="background:#990066;"></div><div id="colorCube" class="paletteColor" style="background:#993366;"></div><div id="colorCube" class="paletteColor" style="background:#996666;"></div><div id="colorCube" class="paletteColor" style="background:#999966;"></div><div id="colorCube" class="paletteColor" style="background:#99CC66;"></div><div id="colorCube" class="paletteColor" style="background:#99FF66;"></div><div id="colorCube" class="paletteColor" style="background:#CC0066;"></div><div id="colorCube" class="paletteColor" style="background:#CC3366;"></div><div id="colorCube" class="paletteColor" style="background:#CC6666;"></div><div id="colorCube" class="paletteColor" style="background:#CC9966;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC66;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF66;"></div><div id="colorCube" class="paletteColor" style="background:#FF0066;"></div><div id="colorCube" class="paletteColor" style="background:#FF3366;"></div><div id="colorCube" class="paletteColor" style="background:#FF6666;"></div><div id="colorCube" class="paletteColor" style="background:#FF9966;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC66;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF66;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FFFF00;"></div><div id="colorCube" class="paletteColor" style="background:#990099;"></div><div id="colorCube" class="paletteColor" style="background:#993399;"></div><div id="colorCube" class="paletteColor" style="background:#996699;"></div><div id="colorCube" class="paletteColor" style="background:#999999;"></div><div id="colorCube" class="paletteColor" style="background:#99CC99;"></div><div id="colorCube" class="paletteColor" style="background:#99FF99;"></div><div id="colorCube" class="paletteColor" style="background:#CC0099;"></div><div id="colorCube" class="paletteColor" style="background:#CC3399;"></div><div id="colorCube" class="paletteColor" style="background:#CC6699;"></div><div id="colorCube" class="paletteColor" style="background:#CC9999;"></div><div id="colorCube" class="paletteColor" style="background:#CCCC99;"></div><div id="colorCube" class="paletteColor" style="background:#CCFF99;"></div><div id="colorCube" class="paletteColor" style="background:#FF0099;"></div><div id="colorCube" class="paletteColor" style="background:#FF3399;"></div><div id="colorCube" class="paletteColor" style="background:#FF6699;"></div><div id="colorCube" class="paletteColor" style="background:#FF9999;"></div><div id="colorCube" class="paletteColor" style="background:#FFCC99;"></div><div id="colorCube" class="paletteColor" style="background:#FFFF99;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#00FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#9900CC;"></div><div id="colorCube" class="paletteColor" style="background:#9933CC;"></div><div id="colorCube" class="paletteColor" style="background:#9966CC;"></div><div id="colorCube" class="paletteColor" style="background:#9999CC;"></div><div id="colorCube" class="paletteColor" style="background:#99CCCC;"></div><div id="colorCube" class="paletteColor" style="background:#99FFCC;"></div><div id="colorCube" class="paletteColor" style="background:#CC00CC;"></div><div id="colorCube" class="paletteColor" style="background:#CC33CC;"></div><div id="colorCube" class="paletteColor" style="background:#CC66CC;"></div><div id="colorCube" class="paletteColor" style="background:#CC99CC;"></div><div id="colorCube" class="paletteColor" style="background:#CCCCCC;"></div><div id="colorCube" class="paletteColor" style="background:#CCFFCC;"></div><div id="colorCube" class="paletteColor" style="background:#FF00CC;"></div><div id="colorCube" class="paletteColor" style="background:#FF33CC;"></div><div id="colorCube" class="paletteColor" style="background:#FF66CC;"></div><div id="colorCube" class="paletteColor" style="background:#FF99CC;"></div><div id="colorCube" class="paletteColor" style="background:#FFCCCC;"></div><div id="colorCube" class="paletteColor" style="background:#FFFFCC;"></div><br/><div id="colorCube" class="paletteColor marginR" style="background:#FF00FF;"></div><div id="colorCube" class="paletteColor" style="background:#9900FF;"></div><div id="colorCube" class="paletteColor" style="background:#9933FF;"></div><div id="colorCube" class="paletteColor" style="background:#9966FF;"></div><div id="colorCube" class="paletteColor" style="background:#9999FF;"></div><div id="colorCube" class="paletteColor" style="background:#99CCFF;"></div><div id="colorCube" class="paletteColor" style="background:#99FFFF;"></div><div id="colorCube" class="paletteColor" style="background:#CC00FF;"></div><div id="colorCube" class="paletteColor" style="background:#CC33FF;"></div><div id="colorCube" class="paletteColor" style="background:#CC66FF;"></div><div id="colorCube" class="paletteColor" style="background:#CC99FF;"></div><div id="colorCube" class="paletteColor" style="background:#CCCCFF;"></div><div id="colorCube" class="paletteColor" style="background:#CCFFFF;"></div><div id="colorCube" class="paletteColor" style="background:#FF00FF;"></div><div id="colorCube" class="paletteColor" style="background:#FF33FF;"></div><div id="colorCube" class="paletteColor" style="background:#FF66FF;"></div><div id="colorCube" class="paletteColor" style="background:#FF99FF;"></div><div id="colorCube" class="paletteColor" style="background:#FFCCFF;"></div><div id="colorCube" class="paletteColor" style="background:#FFFFFF;"></div></div>';
    var hideCube = function() { if ($('#colorCubePopup').css('display') !== 'none') { $('#colorCubePopup').hide() } };
    
    $('.sceditor-button-color').after('<a class="sceditor-button sceditor-button-cube" title="Color Cubes"><div style="background-image:url(http://i56.servimg.com/u/f56/18/45/41/65/color10.png);"></div></a>');
    $('body').append(colorPicker);    
    $(document).on('click','.sceditor-button-cube',function() {
        if ($('#colorCubePopup').css('display') == 'none') {
            var X = $('.sceditor-button-cube').offset().left;
            var Y = $('.sceditor-button-cube').offset().top + 25;
            
            $('#colorCubePopup').css('left',X + 'px').css('top',Y + 'px').show();
        }
        else { hideCube() }
    });
    
    $(document).on('mouseover','#colorCube',function() {
        var color = $(this).attr('style').replace(/background:(.*?);/,'$1');
        $('#colorResult').attr('style','background:'+color+';');
        $('#hexColor').val(color);
    });
    
    $(document).on('click','#colorCube',function() {
       var color = $(this).attr('style').replace(/background:(.*?);/,'$1');
       $('#text_editor_textarea').sceditor('instance').insertText('[color='+color+']','[/color]');
       hideCube();
    });

    $(document).on('keypress','#hexColor',function(e) {
        setTimeout(function() {
            var updateColor = $('#hexColor').val();
            $('#colorResult').attr('style','background:'+updateColor+';')
        },200);
        
        if (e.keyCode == 13) {
           var color = $('#hexColor').val();
           $('#text_editor_textarea').sceditor('instance').insertText('[color='+color+']','[/color]');
           hideCube();
           return false;
        }
    });
    
    $('.sceditor-button-source').click(function() { $('.sceditor-button-cube').removeClass('disabled') });
    $('.sceditor-button').not('.sceditor-button-cube').click(function() { hideCube() });
    $('.sceditor-container textarea').focus(function() { hideCube() });
    $('.sceditor-container iframe').contents().mousedown(function() { hideCube() });
})});

If you want to hide the original color picker, add this to your CSS :
Display > Colors > CSS stylesheet

Code:
.sceditor-button-color { display:none !important; }

If you encounter any bugs, or have feedback, you can leave it here.

Thank you and enjoy ! Very Happy

Version simple :
Ange Tuteur wrote:This is similar to the one I made, but less space. I used the color picker from the chatbox.

Instructions :
Administration Panel > Modules > JavaScript Code Management > Create a new script

Title : Color Cubes
Placement : In all the pages
Code:
$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    editor.createDropDown(caller, 'color-picker', '<iframe id="colorFrame" src="/chatbox/chatbox_selectcolor.htm" style="height:165px;width:250px;border:none;"></iframe>');
    $('#colorFrame').load(function(){$('#colorFrame').contents().find('table[bgcolor="#000000"]').find('td').click(function(){callback($(this).attr('bgcolor'));editor.closeDropDown(true)})});
  }
})});

Result :
SCEditor Color Picker [Color Cubes] Captu177

Note : Simple color palette must be enabled
( Administration Panel > General > Messages and emails > Configuration > Type of the editor colors palette )


Last edited by Ange Tuteur on Tue 14 Oct 2014, 10:15; edited 5 times in total
Rhino.Freak
Rhino.Freak

Gender : Male
Age : 27
Posts : 275
Points : 4219
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://tokyoghoular.foruns.com.pt/

PostRhino.Freak Sat 08 Mar 2014, 03:54

Wow!! Ill add it right away.. Thank you so much for sharing, you are the Best!!

I have a question, is it possible to add a real color picker (like in MS paint with Eyedropper symbol) ? Just asking if its possible.. :3
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sat 08 Mar 2014, 14:54

Thank you Smile

I'm sure it is possible however, I haven't tried, yet.
masesm
masesm
Member
Gender : Male
Posts : 10
Points : 3705
Reputation : 11
Location : United States of America
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postmasesm Mon 10 Mar 2014, 02:05

Error detected: Upon pressing the color button, and then press another button in the editor, the color window does not seems to disappear. Unlike the rest of the button, where when you click on one button, and then click on the other, the first window disappears and the other appears. Not really a big error, but I thought I would mention it  Wink 
masesm
masesm
Member
Gender : Male
Posts : 10
Points : 3705
Reputation : 11
Location : United States of America
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postmasesm Mon 10 Mar 2014, 02:08

Error 2 detected: The color changer does not seem to detect the editor mode change. It does BBcode even if the editor is not on bbcode. Not sure if it was developed that way.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 10 Mar 2014, 04:14

Hi,

Thanks for the info.

For the popup, currently it only closes when a color is chosen, or the button is pressed again. I will have to look into the SCEditor to find the proper way for closing the popups.

It was not primarily developed for mode WYSIWYG, but after looking at the switched mode I forgot to remove the disabled class from the button. I will try to improve that.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sun 16 Mar 2014, 07:17

Hello,

The following has been fixed for the color picker.

1. ) Drop down now closes when an editor button, or textarea is clicked.
2. ) The button should no longer be disabled while in mode WYSIWYG

The following are still present.

1. ) Tags display in mode WYSIWYG

You can find the updated code in the first post.

Many thanks for you feedback.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Tue 08 Apr 2014, 08:09

Hello,

The color cubes color picker code has been updated. This update has fixed a bug where the color picker would go to the bottom left corner of the screen while composing an MP. It should now display properly under its sceditor button.

You can find the updated code in the first post.
Typlo
Typlo
New Member
Gender : Unspecified
Posts : 3
Points : 3655
Reputation : 2
Language : Portuguese
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostTyplo Sat 12 Apr 2014, 16:13

Is to switch to this? http://www.colorpicker.com/ ??
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sun 13 Apr 2014, 09:40

Typlo wrote:Is to switch to this? http://www.colorpicker.com/ ??
Ooh that is nice. Very Happy

I'd have to figure out how I could do something like that.  study
Typlo
Typlo
New Member
Gender : Unspecified
Posts : 3
Points : 3655
Reputation : 2
Language : Portuguese
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostTyplo Sun 13 Apr 2014, 10:19

Very Happy Thanks by reply dear!
Rhino.Freak
Rhino.Freak

Gender : Male
Age : 27
Posts : 275
Points : 4219
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://tokyoghoular.foruns.com.pt/

PostRhino.Freak Thu 08 May 2014, 23:37

The color button has suddenly disappeared from my forum Sad

SCEditor Color Picker [Color Cubes] Untitl50
http//onepiecea-edition.yoo7.com

infact a lot of scripts have started to not work... scratch


sorry .. not an issue with your script, but mine..
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 09 May 2014, 08:01

^ check your most recent script. Also check your console for any errors, that can help you pinpoint which script it is usually.
Rhino.Freak
Rhino.Freak

Gender : Male
Age : 27
Posts : 275
Points : 4219
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
http://tokyoghoular.foruns.com.pt/

PostRhino.Freak Fri 09 May 2014, 11:46

Yeah i fixed the problem ^^
Michael_vx
Michael_vx

Gender : Male
Age : 32
Posts : 302
Points : 4057
Reputation : 76
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx Mon 09 Jun 2014, 03:37

hi its looks fine
the only thing i might look at as a problem is the collor show after send the post
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Wed 11 Jun 2014, 00:37

If the color is invalid it may not parse correctly. Shorthand hex(#000) isn't supported for text colors in the bbcode.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Wed 09 Jul 2014, 04:54

Small update made to the script show that it shows without having to wait for the entire page to load.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Tue 14 Oct 2014, 10:14

This is similar to the one I made, but less space. I used the color picker from the chatbox.

Instructions :
Administration Panel > Modules > JavaScript Code Management > Create a new script

Title : Color Cubes
Placement : In all the pages
Code:
$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1 || !$.sceditor) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    editor.createDropDown(caller, 'color-picker', '<iframe id="colorFrame" src="/chatbox/selectcolor" style="height:165px;width:250px;border:none;"></iframe>');
    $('#colorFrame').load(function(){$('#colorFrame').contents().find('table[bgcolor="#000000"]').find('td').click(function(){callback($(this).attr('bgcolor'));editor.closeDropDown(true)})});
  }
})});

Result :
SCEditor Color Picker [Color Cubes] Captu177

Note : Simple color palette must be enabled
( Administration Panel > General > Messages and emails > Configuration > Type of the editor colors palette )
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 06 Feb 2015, 15:34

If you were using the following script for the colorpicker and it's not working, it's due to the chatbox update. I've updated the code below, so you can have the colorpicker back.
Ange Tuteur wrote:This is similar to the one I made, but less space. I used the color picker from the chatbox.

Instructions :
Administration Panel > Modules > JavaScript Code Management > Create a new script

Title : Color Cubes
Placement : In all the pages
Code:
$(function(){$(function(){
  if ($("#text_editor_textarea").length < 1 || !$.sceditor) return;
  $.sceditor.command.get('color')._menu  = function (editor, caller, callback) {
    editor.createDropDown(caller, 'color-picker', '<iframe id="colorFrame" src="/chatbox/selectcolor" style="height:165px;width:250px;border:none;"></iframe>');
    $('#colorFrame').load(function(){$('#colorFrame').contents().find('table[bgcolor="#000000"]').find('td').click(function(){callback($(this).attr('bgcolor'));editor.closeDropDown(true)})});
  }
})});

Result :
SCEditor Color Picker [Color Cubes] Captu177

Note : Simple color palette must be enabled
( Administration Panel > General > Messages and emails > Configuration > Type of the editor colors palette )
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum