Ckeditor4超详细使用加配置教程

下载地址:

https://ckeditor.com/ckeditor-4/download/4/download/)
下载好后解压,将文件夹放到项目目录下

引用:

在需要用到的地方引用

    <script src="ckeditor/ckeditor.js"></script>

这个就是富文本框

     <div style="width: 700px;height: 300px ">
        <label >个人简介</label>描述:<textarea name="description" id="description"/></textarea>
    </div>

接下来是核心

 <script type="text/javascript">
        window.onload = function()
    {
    CKEDITOR.replace( 'description');
    };
    </script>


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
CKEditor 4 是一款强大的富文本编辑器,可用于创建各种类型的文档,包括博客文章、电子邮件、新闻稿等。下面是 CKEditor 4 的使用教程: 1. 下载 CKEditor 4 CKEditor 4 可以从官方网站上免费下载。下载完成后,将其解压缩到您选择的位置。 2. 集成 CKEditor 4 将 CKEditor 4 集成到网站中很简单。只需将编辑器文件夹复制到您的服务器上,并在需要使用编辑器的页面上包含以下 JavaScript 代码: ```html <script src="/path/to/ckeditor.js"></script> ``` 3. 创建一个基本的编辑器 要在页面上创建一个基本的 CKEditor 4 编辑器,只需在页面中包含以下代码: ```html <textarea name="editor1"></textarea> <script> CKEDITOR.replace( 'editor1' ); </script> ``` 4. 自定义编辑器 CKEditor 4 允许您根据需要自定义编辑器。您可以添按钮、工具栏、插件等。以下是一些示例代码: 添一个自定义按钮: ```javascript CKEDITOR.plugins.add( 'myplugin', { icons: 'myplugin', init: function( editor ) { editor.ui.addButton( 'MyButton', { label: 'My Button', command: 'mycommand', toolbar: 'insert' } ); editor.addCommand( 'mycommand', { exec: function( editor ) { // Do something here. } } ); } } ); ``` 添一个自定义工具栏: ```javascript var editor = CKEDITOR.replace( 'editor1', { toolbar: [ { name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] }, { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] }, { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format' ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }, { name: 'about', items: [ 'About' ] } ] } ); ``` 添一个插件: ```javascript CKEDITOR.plugins.addExternal( 'myplugin', '/path/to/myplugin/' ); ``` 这些示例只是 CKEditor 4 自定义的一部分。您可以查看官方文档以获取更多示例代码和详细信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值