javascript - CKEDITOR: Display Source mode as tabs instead of single button -


Is there any way to show CKEDITOR the source mode option as two tabs instead of one source (HTML / SOURCE view) is? button?

But with little help, this is a piece of cake ().

HTML Tabs are based on the "radio + label" technology, which is very common and is described here. Note that there is no need to create a real tab because the editor will change its contents. I did to reduce JS ??? If you want you can still control your tabs with JS.

  & lt; Div class = "tabs" & gt; & Lt; Input type = "radio" id = "tab-wysiwyg" name = "mode" checked & gt; & Lt; Label = "tab-wysiwyg" & gt; WYSIWYG & lt; / Label & gt; & Lt; Input type = "radio" id = "tab-source" name = "mode" & gt; & Lt; Label = "tab-source" & gt; Source & lt; / Label & gt; & Lt; Textarea id = "editor" & gt; Hello! & Lt; / Textarea & gt; & Lt; / Div & gt;   

JS . Note that listeners can also be used with jQuery or any other DOM library. The only thing I used to keep it simple is the mention which is the only thing you can attach to the audience externally: gives an example of the editor who is also stored in the global item.

  CKEDITOR.replace ('editor', {toolbarGroups: [{name: 'basicstyles'}], at: {instanceReady: function () {var doc = CKEDITOR.document, editor = this ; Doc.getById ('tab-wysiwyg') .on ('click', function () {editor.setMode ('wysiwyg');}); Doc.getById ('tab-source') .on ('click' , Function () {editor.setMode ('source');})}}}});   

CSS (for tabs) Styling, Icandy ....

  .tabs [type = radio] {display : None; Status: Completed; }. Tabs [type = radio] + label {font-size: 12px; Display area; Swim left; Limit: 1px solid #bbb; Cursor: indicator; Padding: .5 AM 1em; Color: # 888; Status: Relative; Margin-right: -1px; Margin-down: -1 pixel; Opacity: .8; font-weight: bold; }. Tabs label: Hover {background: # f7f7f7; }. Tabs [type = radio]: check + label {background: RGB (244244244); Opacity: 1; Color: # 000; } .tabs .cke_editor_editor {Explicit: Both; }  Additional : You have the option to reduce the toolbar in source mode and  editor.execCommand ('toolbarCollapse'); You can also use . Have fun!   

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -