This topic contains 1 reply, has 2 voices, and was last updated by admin 7 months, 3 weeks ago.
-
In our current project we need to add an editor. I am trying to implement the sample in: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxeditor/defaultfunctionality.htm, but only the textArea is displayed Ok, the toolbar is just six buttons (no style) that do trigger the actions (making text bold, underline, etc) but again; without any style.
I added a couple of controls (an input, button) and the input is presenting issues too (check green line in the image). The button displays Ok.
Checking the sample source code, there is nothing special about styles or containers,etc, but seems like I’m missing something.Thanks in advance
Here is the code I’m using (Its almost the code in the sample page):
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>jqxEditor represents a ready-for-use HTML editor which can simplify web content creation or be a replacement of your HTML Text Areas.</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <title></title> <meta content="" charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="Styles/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" /> <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" /> <link href="jqwidgets/styles/jqx.web.css" rel="stylesheet" type="text/css" /> <script src="jqwidgets/globalization/globalize.js" type="text/javascript"></script> <script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery.mobile-1.4.2.min.js.js" type="text/javascript"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownbutton.js"></script> <script type="text/javascript" src="jqwidgets/jqxcolorpicker.js"></script> <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxeditor.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/jqxeditor.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function () { setTimeout(() => { $("#jqxSubmitButton").jqxButton({ width: 120, height: 40 }); $('#editor').jqxEditor({ height: "400px", width: "1000px", tools: 'bold italic underline | left center right' }); console.log($('#editor')); var countries = new Array("Afghanistan", "Albania", "Algeria"); $("#input").jqxInput({placeHolder: "Enter a Country", height: 30, width: 250, minLength: 1, source: countries }); }, "500"); }); </script> <input type="text" id="input"/> <div> <input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton' /> </div> <textarea name="editor" id="editor" style='margin-top: 20px;'> <b>jqxEditor</b> is a HTML text editor designed to simplify web content creation. You can use it as a replacement of your Textarea or you can create it from a DIV element. <br /> <br /> Features include: <br /> <ul> <li>Text formatting</li> <li>Text alignment</li> <li>Hyperlink dialog</li> <li>Image dialog</li> <li>Bulleted list</li> <li>Numbered list</li> </ul> </textarea> </body> </html>
You must be logged in to reply to this topic.