Have a wysiwyg input pop up on a screen

[etech0]

Noob here trying to put together a plugin and looking for help

I'm wondering how I can have a wysiwyg editor box pop up on the screen, where people can edit/put in content that will then get saved in a plugin key.

Any ideas? I hope this is not too much to ask for...

Thanks!

[Wormopolis]

this is just my opinion, so dont consider it your only option:

My plan of attack would be to use the built in wysiwyg editor for posts. rather then trying to make something from scratch. I dont know if its possible to just make that appear anywhere on the page, but you could take them to a post create page, hide all the extraneous stuff around the editor - including the submit button. then have a button that sets the key value with the contents. I would also URIencode the contents to make sure everything ported correctly. then when you want to use the key contents, convert it back.

If your intent is to make a plugin to allow HTML in posts, I would strongly caution against it.

[Chris]

The code in this post shows how to call the internal wysiwyg _prompt. I'm probably reading the question wrong but if all you want to do is popup the moderately easy to use wysiwyg dialog then that'll be your huckleberry. You supply the fields and it creates them for you then shows them to the user and finally returns the answers. It can be called from any page not just on pages where the wysiwyg has been instantiated and it accepts a callback function that receives the values entered by the user allowing you to set the key from within that callback if you wish. The callback is never invoked if the user cancels the dialog. Any field can be set to "required" meaning the user cannot skip it (similar error hint mechanism that happens when posting with a thread subject empty for example).

[Wormopolis]

^ even better.

[Chris]

I should probably give some info on usage of this function


$.ui.wysiwyg.prototype._prompt({
 fields:[{
title:'will you marry me?',
   input: true,
placeholder: 'enter yes here',
   name: 'marry'
 }],
 title: 'Answer',
 callback:function(values){
pb.window.alert('She said '+values.marry);
 },
 ieWidth: 425
})

SPOILER: Click to show

• 
  
  
  
$.ui.wysiwyg.prototype._prompt({
 fields:[{
title:'will you marry me?',
   selectMenu: true,
required: true,
   name: 'marry',
options:[["Yes!","Yes"],['No','No'],["No way!","Get away from me you creep!"]]
 }],
 title: 'Answer',
 callback:function(values){
pb.window.alert('She said "'+values.marry+'"');
 },
 ieWidth: 425
})

• 
  
  
$.ui.wysiwyg.prototype._prompt({
 fields:[{
title:'will you marry me?',
   selectMenu: true,
required: true,
   name: 'marry',
options:[["Yes!","Yes"],['No','No'],["No way!","Get away from me you creep!"]]
 },{
title: 'don\'t ask me again',
input:true,
name: 'border',
type:'checkbox'
 }],
 title: 'Answer',
 callback:function(values){
pb.window.alert('She said "'+values.marry+'"');
 },
 ieWidth: 425
})

  

The function takes a single param which is a javascript plain object containing name:value pairs



{
fields:[], //a collection of plain objects describing each field that is to be created in the prompt dialog
title: String(), //used for the title of the dialog as well as the button's text
callback: function(values){}, //values will be a plain object containing field names and their final values
ieWidth: Number(), //optional width to set dialog for people who are incredibly still using IE7
dialog: {}, //optional set of configuration values to pass through to the dialog widget (height,width,buttons,title and the "open" event are overridden by Proboards)
extraInfo: String() //HTML that will be inserted at the bottom of the dialog to provide extra instructions or just about anything else HTML is capable of doing
}

Fields are themselves plain objects describing what kind of field to create

{
name: String(), //name of the field, should be unique (grouping not supported)
title: String(), //the field label that tells what kind of value is expected in that field
value: String(), //sets a default value already filled in or selected for this field
input: Boolean(), //used to indicate this field should be an input or textarea
select: Boolean(), //used to indicate this field should be a standard dropdown
selectMenu: Boolean(), //used to indicate whether this field should be the Proboards styled dropdown
type: String(), //valid if input is true; this can be set to 'textarea' or any supported input type (defaults to "text")
required: Boolean(), //valid if input is true; this forces the user to supply an answer for this field
rows: Number(), //valid if input is true and type is 'textarea'; a number describing how many rows the textarea should be
cols: Number(), //valid if input is true and type is 'textarea'; a number describing how many columns the textarea should be
className: String(), //valid if input is true but type is not 'textarea'; a class or space separated list of classes to add
checked: Boolean(),  //valid if input is true but type is not 'textarea'; adds a checked attribute to the input
size: Number(), //valid if input is true but type is not 'textarea'; adds a size attribute to the input (defaults to 16)
min: Number(), //valid if input is true but type is not 'textarea'; enforces a minimum numeric value by adding a min attribute to the input
max: Number(), //valid if input is true but type is not 'textarea'; enforces a maximum numeric value by adding a max attribute to the input
placeholder: String(), //valid if input is true but type is not 'textarea'; adds a placeholder attribute that occupies the field until typing begins
options: [] //valid if select or selectMenu is true; an array containing arrays that supply the options to add to the dropdown in the format ["optionValue","OptionText"]
}


Note: if creating an input with the type set to checkbox the name has to be "border" since it is hard-coded in the function that only border (from the table insert prompt) can be a checkbox.

values[elements[i].name] = elements[i].name == "border" ? elements[i].checked : elements[i].value

You could also use the select_dialog if wanting checkboxes.