-
官网下载:https://ckeditor.com/ckeditor-4/download/
-
解压文件目录到与所调用文件同级
-
引用js文件:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
-
编写html域:
<div style="margin-left:60px;" ><textarea rows="60" cols="20" id="test" name="Mytextarea"></textarea></div>
-
替换html域
<script type="text/javascript"> CKEDITOR.replace('Mytextarea', { //属性名称:属性值, } ); </script>
-
属性配置
uiColor: '#ffccdd', toolbarCanCollapse :true,//能否收缩 toolbarStartupExpanded:true,//默认是否打开 toolbarLocation : 'top',//位置 bottom|top resize_enabled : false,//拖拽改变大小 resize_maxHeight : 3000,//最大高度 autoUpdateElement : true,//提交表单时更新元素内容 height:160, width:932, fontSize_defaultLabel : '12px',//默认字体大小 fontSize_sizes :'6/6px;8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px',//可选字体大小 tabSpaces : 2,//按下tab键是缩进的字数,为0则跳出编辑区 theme : 'default',//主题 undoStackSize : 20,//撤销时记录的步数 //快捷键 keystrokes : [ [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点 [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点 [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单 [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销 [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做 [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], // [ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接 [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体 [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体 [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线 [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ] ], //防止快捷键与浏览器冲突 blockedKeystrokes : [ CKEDITOR.CTRL + 66 /*B*/, CKEDITOR.CTRL + 73 /*I*/, CKEDITOR.CTRL + 85 /*U*/ ], //工具栏 toolbar:'Basic', //调用自定义工具栏config.js 默认Basic
-
自定义工具栏
-
通过配置文件config.js
config.toolbar = 'SingleLine'; //width:932 config.toolbar_SingleLine = [ { name: 'document', items: [ 'Source' ] }, { name: 'clipboard', items: [ 'Undo', 'Redo' ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] }, { name: 'paragraph', items: [ 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, { name: 'insert', items: [ 'HorizontalRule', 'Smiley', 'SpecialChar' ] }, { name: 'styles', items: [ 'Styles','FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, ]; config.toolbar = 'DoubleLine'; //width:932 config.toolbar_DoubleLine = [ { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, { name: 'links', items: [ 'Link', 'Unlink'] }, { name: 'insert', items: [ 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, '/', { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] }, { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] } ];
script中调用:
toolbar:'SingleLine', //调用自定义工具栏config.js
-
直接在script中配置
toolbar : [ ['Styles', 'Format'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About'] ]
-
多功能插件CKEditor安装、使用技巧与配置
猜你喜欢
转载自blog.csdn.net/Zeno_wrj/article/details/107164159
今日推荐
周排行