Hide/Show CKEditor buttons on an onclick event - javascript

I am developing a simple tool for sending emails.
I am using CKEditor for my textarea formatting.
I want a scenario, whereby by default whereby the formatting buttons do not show till the user clicks on "Show Formatting buttons"
How can I achieve this with CKEditor without using two textareas.

You can use this link as an example:
Create and destroy CKEditor instances on the fly
In the example they use a div, but you can just as easily use a standard textarea, and it will do the plain text / rich text tradeoff you are looking for.

Related

Call Equation Editor plugin when custom button is clicked

I have a very basic text editor that uses CKEditor. The default CKEditor toolbar is hidden because for editing I need only image upload (which is completely custom) and Equation Editor plugin for formulas.
My goal is to use a custom button for the Equation Editor and call the plugin on click. So, somewhere in the UI of the editor, I would have this:
Insert formula
Clicking on the button should open the Equation Editor.
How do I achieve this?
Note: I have multiple CKEditor instances on the page.
You should use CKEDITOR.editor.execCommand() like this
CKEDITOR.instances.myEditorInstance.execCommand( 'mathjax' )
And this is where you'll find how to do this.
You can list available commands of the CKEditor instance by browsing CKEDITOR.instances.myEditorInstance.commands object.

multiple input in a single prompt box?

I am developing a simple web application using javascript.
I want to know that how to add multiple inputs in a single prompt box using javascript.
Go to this website, they have a full code, explanation, and example for you to learn how to achieve what you wanted.
https://www.w3schools.com/howto/howto_css_contact_form.asp
Summary of what you should do:
Create a form, just like usual
hide the form using display:none
Then create a button
Create a JS script, that "onclick" on the
button, will unhide the form.
as simple as that

How I can create my own wysiwyg editor with my own style?

I want to create my own editor with my own style, I tried to edit a couple jquery editors but I can't get what I want.
Here is a sample pic of what I want:
I finished this bar in HTML and its look exactly what I want so the next step is to add actions to these buttons.
I don't have any idea how to do it but let's say that we added a textarea like other editors and attach this textarea with the top buttons - that is what I don't know how to do it.
if there is some way to make the text bold when the user click bold button for example.
We can do it easy with jQuery if this is some DIV element but this is textarea and I don't know to do it with it.
sorry for bad english.
What you would want to look for, for the editor of your choice is some API to execute commands directly instead of using the editors packaged toolbar. It might look something like "ExecuteCommand('bold')". You would then just wire up your buttons to do that.

Style / Replace a select box using prototype / scriptactulous

I'm trying to style my select box, I assume I need some type of javascript method.
I'm using rails - and sticking with prototype/scriptactulous.
Does anyone know of any solutions?
EDIT:
CSS doesn't do nearly what I'm trying to accomplish:
alt text http://img16.imageshack.us/img16/1373/dropdownk.png
I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar.
You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.
For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery.
In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/
There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

How can I set the focus inside the Yahoo Rich Text Editor

I have a an HTML form which contains the YAHOO rich text editor on it.
When I display the form I want the YAHOO editor to have focus so that the cursor is ready to accept input without the user having to click on it or tab into it
I got this from the documenation over at the YUI library. Specifically at a sample titled Editor - Basic Buttons
var myEditor = new YAHOO.widget.Editor('editor', {focusAtStart:true});
myEditor.render();
The key here is the the "focusAtStart" attribute as part of the optional attributes object
I haven't employed the YAHOO rich text editor, but wouldn't it work, if you use a window.onload event ?-)
Like roenving, I have never used the YAHOO rich text editor, but it should work with the window.onload event.
Let's say you specified id="yahoo_text_editor" for your YAHOO rich text editor.
Then, do
<body onload="document.getElementById('yahoo_text_editor').focus()">
Hope this helps.

Categories