Create from markup
<div class="easyui-texteditor" title="TextEditor" style="width:700px;height:300px;padding:20px"> <h3 style="text-align:center">TextEditor</h3> <p style="text-align:center">TextEditor is a lightweight html5 editor based on EasyUI. It is completely customizable to fit your needs。</p> </div>
Create using javascript。
<div id="te" style="width:700px;"></div> <script> $(function(){ $('#te').texteditor({ //... }); }); </script>
The properties extend from dialog, below is the added properties for texteditor。
名称 | 类型 | 描述 | 默认 |
---|---|---|---|
名称 | string | The form field name。 | |
toolbar | array | The top toolbar of the texteditor。 | ['bold','italic','strikethrough','underline','-','justifyleft','justifycenter','justifyright','justifyfull','-','insertorderedlist','insertunorderedlist','outdent','indent','-','formatblock','fontname','fontsize'] |
commands | object |
The command definitions.
代码实例: $.extend($.fn.texteditor.defaults.commands, { 'bold': { type: 'linkbutton', iconCls: 'icon-bold', onClick: function(){ $(this).texteditor('getEditor').texteditor('execCommand','bold'); } } }); |
The events extend from dialog。
The methods extend from dialog, below is the added methods for texteditor。
名称 | 参数 | 描述 |
---|---|---|
options | none | Return the options property。 |
execCommand | cmd | Execute a command。 |
getEditor | none | Get the editor object。 |
insertContent | html | Insert the html at the current cursor position。 |
destroy | none | Destroy the texteditor。 |
getValue | none | Get the texteditor value。 |
setValue | html | Set the texteditor value。 |
disable | none | Disable the texteditor component。 |
enable | none | Enable the texteditor component。 |
readonly | mode | Enable/Disable readonly mode。 |