位置:首页 > 扩展 > 文本编辑器(TextEditor)

Create TextEditor

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。
jquery-easyui-texteditor.zip