精华内容
下载资源
问答
  • ckeditor下载
    2018-06-26 10:53:22

    release地址

    https://github.com/ckeditor/ckeditor-releases

    下载4.8版CKEditor

    git clone -b full/4.8.x git://github.com/ckeditor/ckeditor-releases.git ckeditor.full.4.8.x
    更多相关内容
  • 最新ckeditor下载

    2012-08-02 15:06:43
    ckeditor_3.6.4,是目前最新的ckeditor编辑器,里面有例子。
  • CKEditor 4下载和使用

    2022-04-26 16:18:02
    1.下载文件https://ckeditor.com/ckeditor-4/download/ 2.选择完整版 3.解压文件放在项目目录 4.配置工具栏 找到index.html打开页面 编辑自己的工具栏 根据需求选择想要的工具栏选项,获取配置代码 复制配置...

    富文本

    CKEditor 4

    1.下载文件https://ckeditor.com/ckeditor-4/download/

    2.选择完整版

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlk9LGHC-1650961055749)(images/image-20220106115655947.png)]

    3.解压文件放在项目目录

    在这里插入图片描述

    4.配置工具栏

    找到index.html打开页面

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuipS51p-1650961055752)(images/image-20220106134639640.png)]

    编辑自己的工具栏

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xjfpEzef-1650961055753)(images/image-20220106134722874.png)]

    根据需求选择想要的工具栏选项,获取配置代码

    在这里插入图片描述

    复制配置代码

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wcd2SNgm-1650961055755)(images/image-20220106135003143.png)]

    粘贴到配置文件
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47RWL8Zp-1650961055755)(images/image-20220106135157839.png)]

    5. html页面使用富文本

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div class="richText">
            <button onclick="getData()">获取内容</button>
            <div id="Text"></div>
        </div>
        <!-- 引入富文本 -->
        <script src="./ckeditor/ckeditor/ckeditor.js"></script>
        <script type="text/javascript">
            CKEDITOR.replace('Text');
            function getData() {
                <!-- 获取富文本的内容 -->
                var CHtml = CKEDITOR.instances.Text.getData();
                console.log(CHtml);
            }
        </script>
    </body>
    
    </html>
    

    6.富文本内容编辑

    //获取富文本内容
    CKEDITOR.instances.Text.getData();
    //设置富文本内容
    CKEDITOR.instances.Text.setData();
    

    7. 修改富文本背景

    在config.js文件中添加以下代码

    CKEDITOR.addCss(".cke_editable{background-color: #FFF5D3}")
    

    config.js文件内容如下:

    /**
     * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
     * For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
     */
    
    CKEDITOR.editorConfig = function (config) {
        config.toolbarGroups = [
            { name: 'document', groups: ['mode', 'document', 'doctools'] },
            { name: 'clipboard', groups: ['clipboard', 'undo'] },
            { name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing'] },
            { name: 'forms', groups: ['forms'] },
            '/',
            { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
            { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph'] },
            { name: 'links', groups: ['links'] },
            { name: 'insert', groups: ['insert'] },
            '/',
            { name: 'styles', groups: ['styles'] },
            { name: 'colors', groups: ['colors'] },
            { name: 'tools', groups: ['tools'] },
            { name: 'others', groups: ['others'] },
            { name: 'about', groups: ['about'] }
        ];
        config.removeButtons = 'Save,Print';
        
        // 背景颜色
        CKEDITOR.addCss(".cke_editable{background-color: #FFF5D3}")
    };
    

    8. 修改富文本默认样式

    在content.css这个文件中修改想要的样式保存即可。

    9. 修改富文本只读属性

    // Text是页面标签的id,true为只读,false为可编辑
    CKEDITOR.instances['Text'].setReadOnly(false);
    

    页面效果如图:
    在这里插入图片描述

    展开全文
  • 之前,直接使用的ckeditor-vue实现的富文本编辑器,问题主要是使用add-ons里面的plugin比较麻烦,需要自己包装,然后如果想要更改固有的plugin,比如table、tableselection比较麻烦。 于是,为了更方便使用修改...

    之前,直接使用的ckeditor-vue实现的富文本编辑器,问题主要是使用add-ons里面的plugin比较麻烦,需要自己包装,然后如果想要更改固有的plugin,比如table、tableselection比较麻烦。
    于是,为了更方便使用修改plugin,我们采用了第二中方式,从官网下载解压package,直接放到项目里面。

    下载

    官网地址:https://ckeditor.com/ckeditor-4/download/
    可以根据需要直接选择前三个下载,也可以定制自定义的,如果你想要使用额外的add-ons里面的plugin、或者想要未优化的源码方便修改的话,建议使用ONline Builder自定义下载包。而且,自定义的构建器还可以选择语言、皮肤什么的。
    在这里插入图片描述
    最后,同意协议,可以选择优化后的或者源码(如果你想要修改ckeditor的源码的话,选择源码,否则,选择optimized比较快),download即可。
    在这里插入图片描述

    使用

    将下载包解压,放到vue的项目下的public目录下(该目录下的文件不打包,直接复制到结果里面),项目目录样式如下:
    在这里插入图片描述
    然后,在index.html文件里面引入ckeditor.js文件

    <!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
        <script src="<%= BASE_URL %>ckeditor/ckeditor.js"></script>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    

    创建CkEditor.vue文件,然后在App.vue里面引用即可使用。

    <template>
      <div>
        <textarea :id='id'></textarea>
      </div>
    </template>
    
    <script>
      import MyDialog from './MyDialog'
      export default {
        name: 'CkEditor',
        mounted: function () {
          const self = this
          let CKEDITOR = window.CKEDITOR
          console.log(CKEDITOR)
    
          // 渲染编辑器
          let ckeditor = window.CKEDITOR.replace(self.id, {
            height: 500,
            language: 'en',
            allowedContent: true,
            pasteFilter: null,
            toolbar: [
              {
                name: 'code',
                items: ['Source']
              },
              {
                name: 'basicstyles',
                items: ['Styles', '-', 'Bold', 'Italic', 'Strike', 'Underline', 'TextColor', 'BGColor', 'Font', 'FontSize']
              },
              {
                name: 'styles',
                items: ['RemoveFormat']
              },
              {
                name: 'insert',
                items: ['Table', 'SpecialChar', 'HorizontalRule']
              },
              '/',
              {
                name: 'paragraph',
                items: ['Format', 'NumberedList', 'BulletedList', '-', 'Indent', 'Outdent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'lineheight']
              },
              {
                name: 'links',
                items: ['Link', 'Unlink', '-', 'Subscribe', 'Unsubscribe', 'HtmlTemplate']
              },
              {
                name: 'document',
                items: ['Undo', 'Redo']
              }
            ]
          })
    
          //处理图片copy、paste
          ckeditor.on('paste', async evt => {
            if (evt.data.dataTransfer.getFilesCount() > 0) {
              evt.data.dataValue = ''
              if (evt.data.dataTransfer.getFilesCount()) {
                let file = evt.data.dataTransfer.getFile(0)
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                  self.ckeditor.insertHtml(`<img src="${reader.result}"/>`)
                };
                reader.onerror = error => {
                  console.error(error)
                }
              }
            }
          })
          //处理tab
          ckeditor.on('key', function (event) {
            let keycode = event.data.keyCode
            if (keycode === 9) {
              event.cancel()
              ckeditor.execCommand('indent')
            }
          })
    
          ckeditor.on('instanceReady', () => {
            self.ckeditor = ckeditor
            console.log(ckeditor)
          })
    
          // 监听内容变更事件
          ckeditor.on('change', function () {
            self.$emit('contentChanged', self.ckeditor.getData())
          })
        },
        data: function () {
          return {
            id: parseInt(Math.random() * 10000).toString(),
            textarea: '',
            ckeditor: null
          }
        },
        methods: {
          insertDiv (data) {
            this.ckeditor.insertHtml(data)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    

    注意上面的配置文件里面的height、allowedContent、toolbar都可以不配置,这里是为了获得自己想要的效果,自定义的配置。

    自定义插件

    下面,我们要定义一个插件mydialog,具体步骤如下。
    首先,在public/ckeditor/plugins下面添加文件夹mydialog,该文件夹里面包含icons目录和plugin.js文件,如图所示:
    在这里插入图片描述
    icons里面是图标mydialog.png,plugin.js是插件定义,代码如下:

    CKEDITOR.plugins.add('mydialog', {
      icons: 'mydialog',
      init: function (editor) {
        editor.addCommand('mydialog', {
          exec: function (editor) {
            editor.dialog.show()
          }
        })
        editor.ui.addButton('MyDialog', {
          label: 'Open My Dialog',
          command: 'mydialog'
        })
      }
    })
    

    其中,icons是图标,名字和icons下面的图片一致,然后,定义一个button和一个点击button时候执行的命令即可。
    插件定义好了,那么要怎么使用它呢?
    我们修改CkEditor.vue文件,使自定义插件生效:

    <template>
      <div>
        <textarea :id='id'></textarea>
        <my-dialog ref="dialog" @content-changed="insertDiv"></my-dialog>
      </div>
    </template>
    
    <script>
      import MyDialog from './MyDialog'
      export default {
        name: 'CkEditor',
        mounted: function () {
          const self = this
          let CKEDITOR = window.CKEDITOR
          console.log(CKEDITOR)
    
          // 渲染编辑器
          let ckeditor = window.CKEDITOR.replace(self.id, {
            height: 500,
            language: 'en',
            //自定义插件(位于public下的ckeditor/plugins/mydialog)
            extraPlugins: 'mydialog',
            removePlugins: 'resize',
            allowedContent: true,
            pasteFilter: null,
            toolbar: [
              {
                name: 'code',
                items: ['Source']
              },
              {
                name: 'basicstyles',
                items: ['Styles', '-', 'Bold', 'Italic', 'Strike', 'Underline', 'TextColor', 'BGColor', 'Font', 'FontSize']
              },
              {
                name: 'styles',
                items: ['RemoveFormat']
              },
              {
                name: 'insert',
                items: ['MyDialog', 'Table', 'SpecialChar', 'HorizontalRule']
              },
              '/',
              {
                name: 'paragraph',
                items: ['Format', 'NumberedList', 'BulletedList', '-', 'Indent', 'Outdent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight']
              },
              {
                name: 'links',
                items: ['Link', 'Unlink', '-', 'Subscribe', 'Unsubscribe', 'HtmlTemplate']
              },
              {
                name: 'document',
                items: ['Undo', 'Redo']
              }
            ]
          })
    
          ckeditor.on('paste', async evt => {
            if (evt.data.dataTransfer.getFilesCount() > 0) {
              evt.data.dataValue = ''
              if (evt.data.dataTransfer.getFilesCount()) {
                let file = evt.data.dataTransfer.getFile(0)
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                  self.ckeditor.insertHtml(`<img src="${reader.result}"/>`)
                };
                reader.onerror = error => {
                  console.error(error)
                }
              }
            }
          })
          ckeditor.on('key', function (event) {
            let keycode = event.data.keyCode
            if (keycode === 9) {
              event.cancel()
              ckeditor.execCommand('indent')
            }
          })
    
          ckeditor.on('instanceReady', () => {
            self.ckeditor = ckeditor
            ckeditor.dialog = self.$refs.dialog
            console.log(ckeditor)
          })
    
          // 监听内容变更事件
          ckeditor.on('change', function () {
            self.$emit('contentChanged', self.ckeditor.getData())
          })
        },
        data: function () {
          return {
            id: parseInt(Math.random() * 10000).toString(),
            textarea: '',
            ckeditor: null
          }
        },
        methods: {
          insertDiv (data) {
            this.ckeditor.insertHtml(data)
          }
        },
        components: {
          MyDialog
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    

    主要修改内容:

    • 配置文件里面加extraPlugins: 'mydialog',,引入插件;
    • import插件界面文件MyDialog,把dialog界面引入;
    • toolbar配置里面加入'MyDialog'按钮
    • instanceReady里面加入ckeditor.dialog = self.$refs.dialog,把界面对象赋值给editor
    • 添加<my-dialog ref="dialog" @content-changed="insertDiv"></my-dialog>dialog界面
    • 添加insertDiv方法(插入div)

    MyDialog文件内容如下:

    <template>
      <el-dialog title="Insert A Div" :visible.sync="showDialog" width="50%">
        <el-form label-width="120px" label-position="left">
          <el-form-item label="color:" >
            <el-color-picker v-model="color"></el-color-picker>
          </el-form-item>
          <el-form-item label="background:">
            <el-color-picker v-model="background"></el-color-picker>
          </el-form-item>
          <el-form-item label="border">
            <el-input v-model="border" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">Cancel</el-button>
        <el-button type="primary" @click="save">OK</el-button>
      </span>
      </el-dialog>
    </template>
    
    <script>
      export default {
        name: 'MyDialog',
        data () {
          return {
            showDialog: false,
            color: '#000',
            background: '#fff',
            border: '1px solid #ccc'
          }
        },
        methods: {
          show () {
            this.showDialog = true
          },
          save () {
            let div = `<div style="color: ${this.color}; background: ${this.background}; border: ${this.border}; padding:5px 10px;">&nbsp;</div>`
            this.$emit('content-changed', div)
            this.showDialog = false
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    

    最后的实现效果:
    点击自定义button,弹出如下对话框,点击ok,插入div。
    在这里插入图片描述
    插入的div如下所示:
    在这里插入图片描述

    这里我们的自定义插件的界面使用的是自己的界面,ckeditor提供了自己的dialog,如果要使用ckeditor的dialog,就不需要定义MyDialog文件了,可以直接在plugin.js里面定义界面,具体怎么做可以去官网查。

    代码仓库:
    https://github.com/gaograce/ckeditor-vue-example2.git

    展开全文
  • ckeditor4+ckfinder3.1组合,里面已作PHP初步配置,这是本人花了一上午时间搞定的.(已去除域名限制,有条件的朋友请资助下ckeditor项目组)
  • ckeditor + ckfinder

    2018-05-07 20:42:59
    CKeditor CKfinder 整合方案,清晰明了,供给有需要的伙伴!
  • ckeditor最新

    2013-10-10 15:57:12
    ckeditor最新
  • 富文本编辑器 1.概述 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于 Microsoft Word 的编辑...①ckeditor------本次说明 ②Kindeditor ③ueditor ④wangEd...

    目录

    富文本编辑器

            1.概述

            2.常用富文本编辑器

            3.CKeditor介绍

            4.CKeditor的使用步骤

                    4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者standed,可能会有些功能不能用)

                    4.2 解压之后得到如下的文件目录【其中核心文件是ckeditor.js(必须),配置文件是config.js(可选)】

                    4.3 解压后复制到工程的webContent目录下

                    4.4 在指定JSP页面引用CKEDITOR的JS文件并且替换TEXTAREA标签

                    4.5 CKEDITOR.replace()配置

                    4.6 config.js文件配置  ***

            SmartUpload插件

            1.[问题]图片上传是到数据库还是到服务器?

            2.使用步骤

            3.案例

            4.表单其它输入项怎么获取


    富文本编辑器

            1.概述

                    富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于 Microsoft Word 的编辑功能。

            2.常用富文本编辑器

                    ①ckeditor------本次说明

                    ②Kindeditor

                    ③ueditor

                    ④wangEditor

                    ⑤SmartMarkUP

                    ⑥Control.Editor

                    ⑦EditArea

                    ⑧Free Rich Text Editor

            3.CKeditor介绍

                    ckeditor是一款由javascript编写的富文本网页编辑器,它可以填写文字、插入图片、视频、Excel等富媒体信息,也可以在源码方式下填写内容,在各个网站中应用非常广泛。

            4.CKeditor的使用步骤

                    4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者standed,可能会有些功能不能用)

                    4.2 解压之后得到如下的文件目录【其中核心文件是ckeditor.js(必须),配置文件是config.js(可选)】

                    4.3 解压后复制到工程的webContent目录下

                    4.4 在指定JSP页面引用CKEDITOR的JS文件并且替换TEXTAREA标签

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 引入ckeditor.js  -->
    <script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	window.onload = function(){
    		//根据textarea标签的name属性替换成富文本编辑器
    		CKEDITOR.replace("ncontent");
    	}
    </script>
    </head>
    <body>
    	<textarea name="ncontent"></textarea>
    </body>
    </html>
    

                    4.5 CKEDITOR.replace()配置

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			window.onload = function() {
    				CKEDITOR.replace('ncontent', {
    					toolbar: 'Basic',
    					uiColor: '#9AB8F3',
    					language: 'zh-cn',
    					width: '800',
    					height: '200',
    					toolbar: 'Full'
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<textarea name="ncontent" id="ncontent">12312</textarea>
    
    		<!-- 1.点击获取被选中的内容 -->
    		<button id="btn" type="button">test1</button>
    	</body>
    </html>
    

                    4.6 config.js文件配置

                            下面是config.js文件里的一些常用设置

    CKEDITOR.editorConfig = function( config ) {
        // Define changes to default configuration here. For example:
        // config.language = 'fr';
        // config.uiColor = '#AADC6E';
      	// 介面语言,默认为 'en'
    	config.language = 'zh-cn';
        // 设置宽高
        config.width = 400;
        config.height = 400;
        // 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'
        config.skin = 'v2';
        // 背景颜色
        config.uiColor = '#FFF';
    
    
        // 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js
        config.toolbar = 'Basic';
        config.toolbar = 'Full';
        //工具栏是否可以被收缩
        config.toolbarCanCollapse = true;
        //工具栏的位置
        config.toolbarLocation = 'top';//可选:bottom
        //工具栏默认是否展开
        config.toolbarStartupExpanded = true;
        // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
        config.resize_enabled = false;
        //改变大小的最大高度
        config.resize_maxHeight = 3000;
        //改变大小的最大宽度
        config.resize_maxWidth = 3000;
        //改变大小的最小高度
        config.resize_minHeight = 250;
        //改变大小的最小宽度
        config.resize_minWidth = 750;
        // 当提交包含有此编辑器的表单时,是否自动更新元素内的资料
        config.autoUpdateElement = true;
        // 设置是使用绝对目录还是相对目录,为空为相对目录
        config.baseHref = ''
        // 编辑器的z-index值
        config.baseFloatZIndex = 10000;
        //设置快捷键
        config.keystrokes = [
        [ CKEDITOR.ALT + 121 , 'toolbarFocus' ], //获取焦点
        [ CKEDITOR.ALT + 122 , 'elementsPathFocus' ], //元素焦点
        [ CKEDITOR.SHIFT + 121 , 'contextMenu' ], //文本功能表
        [ CKEDITOR.CTRL + 90 , 'undo' ], //撤销
        [ CKEDITOR.CTRL + 89 , 'redo' ], //重做
        [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 , 'redo' ], //
        [ CKEDITOR.CTRL + 76 , 'link' ], //链结
        [ CKEDITOR.CTRL + 66 , 'bold' ], //粗体
        [ CKEDITOR.CTRL + 73 , 'italic' ], //斜体
        [ CKEDITOR.CTRL + 85 , 'underline' ], //下划线
        [ CKEDITOR.ALT + 109 , 'toolbarCollapse' ]
        ]
        //设置快捷键 可能与流览器快捷键冲突 plugins/keystrokes/plugin.js.
        config.blockedKeystrokes = [
        CKEDITOR.CTRL + 66 ,
        CKEDITOR.CTRL + 73 ,
        CKEDITOR.CTRL + 85
        ]
        //设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.
        config.colorButton_backStyle = {undefined
        element : 'span',
        styles : { 'background-color' : '#(color)' }
        }
        //设置前景色的取值 plugins/colorbutton/plugin.js
        config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,
        006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,
        A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,
        FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’
        //是否在选择颜色时显示“其他颜色”选项 plugins/colorbutton/plugin.js
        config.colorButton_enableMore = false
        //区块的前景色预设值设置 plugins/colorbutton/plugin.js
        config.colorButton_foreStyle = {undefined
        element : 'span',
        styles : { 'color' : '#(color)' }
        };
        //所需要添加的CSS档 在此添加 可使用相对路径和网站的绝对路径
        config.contentsCss = './contents.css';
        //文字方向
        config.contentsLangDirection = 'rtl'; //从左到右
        //CKeditor的配置档 若不想配置 留空即可
        CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );
        //介面编辑框的背景色 plugins/dialog/plugin.js
        config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //可设置参考
        config.dialog_backgroundCoverColor = 'white' //默认
        //背景的不透明度 数值应该在:0.0~1.0 之间 plugins/dialog/plugin.js
        config.dialog_backgroundCoverOpacity = 0.5
        //移动或者改变元素时 边框的吸附距离 单位:图元 plugins/dialog/plugin.js
        config.dialog_magnetDistance = 20;
        //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.
        config.disableNativeSpellChecker = true
        //进行表格编辑功能 如:添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js
        config.disableNativeTableHandles = true; //默认为不开启
        //是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true;
        config.disableObjectResizing = false //默认为开启
        //设置HTML文档类型
        config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;
        //是否对编辑区域进行渲染 plugins/editingblock/plugin.js
        config.editingBlock = true;
        //编辑器中回车产生的标籤
        config.enterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
        //是否使用HTML实体进行输出 plugins/entities/plugin.js
        config.entities = true;
        //定义更多的实体 plugins/entities/plugin.js
        config.entities_additional = '#39'; //其中#代替了&
        //是否转换一些难以显示的字元为相应的HTML字元 plugins/entities/plugin.js
        config.entities_greek = true;
        //是否转换一些拉丁字元为HTML plugins/entities/plugin.js
        config.entities_latin = true;
        //是否转换一些特殊字元为ASCII字元 如"This is Chinese: 汉语."转换为"This is Chinese: &#27721;&#35821;." plugins/entities/plugin.js
        config.entities_processNumerical = false;
        //添加新组件
        config.extraPlugins = 'myplugin'; //非默认 仅示例
        //使用搜索时的高亮色 plugins/find/plugin.js
        config.find_highlight = {
        element : 'span',
        styles : { 'background-color' : '#ff0', 'color' : '#00f' }
        };
        //默认的字体名 plugins/font/plugin.js
        config.font_defaultLabel = 'Arial';
        //字体编辑时的字元集 可以添加常用的中文字元:宋体、楷体、黑体等 plugins/font/plugin.js
        config.font_names = 'Arial;Times New Roman;Verdana';
        //文字的默认式样 plugins/font/plugin.js
        config.font_style = {
        element : 'span',
        styles : { 'font-family' : '#(family)' },
        overrides : [ { element : 'font', attributes : { 'face' : null } } ]
        };
        //字体默认大小 plugins/font/plugin.js
        config.fontSize_defaultLabel = '12px';
        //字体编辑时可选的字体大小 plugins/font/plugin.js
        config.fontSize_sizes ='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'
        //设置字体大小时 使用的式样 plugins/font/plugin.js
        config.fontSize_style = {
        element : 'span',
        styles : { 'font-size' : '#(size)' },
        overrides : [ { element : 'font', attributes : { 'size' : null } } ]
        };
        //是否强制複製来的内容去除格式 plugins/pastetext/plugin.js
        config.forcePasteAsPlainText =false //不去除
        //是否强制用“&”来代替“&amp;”plugins/htmldataprocessor/plugin.js
        config.forceSimpleAmpersand = false;
        //对address标籤进行格式化 plugins/format/plugin.js
        config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
        //对DIV标籤自动进行格式化 plugins/format/plugin.js
        config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
        //对H1标籤自动进行格式化 plugins/format/plugin.js
        config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
        //对H2标籤自动进行格式化 plugins/format/plugin.js
        config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
        //对H3标籤自动进行格式化 plugins/format/plugin.js
        config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };
        //对H4标籤自动进行格式化 plugins/format/plugin.js
        config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };
        //对H5标籤自动进行格式化 plugins/format/plugin.js
        config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };
        //对H6标籤自动进行格式化 plugins/format/plugin.js
        config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };
        //对P标籤自动进行格式化 plugins/format/plugin.js
        config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
        //对PRE标籤自动进行格式化 plugins/format/plugin.js
        config.format_pre = { element : 'pre', attributes : { class : 'code' } };
        //用分号分隔的标籤名字 在工具栏上显示 plugins/format/plugin.js
        config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
        //是否使用完整的html编辑模式 如使用,其源码将包含:<html><body></body></html>等标籤
        config.fullPage = false;
        //是否忽略段落中的空字元 若不忽略 则字元将以“”表示 plugins/wysiwygarea/plugin.js
        config.ignoreEmptyParagraph = true;
        //在清除图片属性框中的链结属性时 是否同时清除两边的<a>标籤 plugins/image/plugin.js
        config.image_removeLinkByEmptyURL = true;
        //一组用逗号分隔的标籤名称,显示在左下角的层次嵌套中 plugins/menu/plugin.js.
        config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';
        //显示子功能表时的延迟,单位:ms plugins/menu/plugin.js
        config.menu_subMenuDelay = 400;
        //当执行“新建”命令时,编辑器中的内容 plugins/newpage/plugin.js
        config.newpage_html = '';
        //当从word里複製文字进来时,是否进行文字的格式化去除 plugins/pastefromword/plugin.js
        config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
        //是否使用<h1><h2>等标籤修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js
        config.pasteFromWordKeepsStructure = false;
        //从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
        config.pasteFromWordRemoveStyle = false;
        //对应后台语言的类型来对输出的HTML内容进行格式化,默认为空
        config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP Code
        config.protectedSource.push( //g ); // ASP Code
        config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi ); // ASP.Net Code
        //当输入:shift+Enter时插入的标籤
        config.shiftEnterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
        //可选的表情替代字元 plugins/smiley/plugin.js.
        config.smiley_descriptions = [
        ':)', ':(', ';)', ':D', ':/', ':P',
        '', '', '', '', '', '',
        '', ';(', '', '', '', '',
        '', ':kiss', '' ];
        //对应的表情图片 plugins/smiley/plugin.js
        config.smiley_images = [
        'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
        'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
        'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
        'broken_heart.gif','kiss.gif','envelope.gif'];
        //表情的地址 plugins/smiley/plugin.js
        config.smiley_path = 'plugins/smiley/images/';
        //页面载入时,编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
        config.startupFocus = false;
        //载入时,以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
        config.startupMode ='wysiwyg';
        //载入时,是否显示框体的边框 plugins/showblocks/plugin.js
        config.startupOutlineBlocks = false;
        //是否载入样式档 plugins/stylescombo/plugin.js.
        config.stylesCombo_stylesSet = 'default';
        //以下为可选
        config.stylesCombo_stylesSet = 'mystyles';
        config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
        config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
        //起始的索引值
        config.tabIndex = 0;
        //当用户键入TAB时,编辑器走过的空格数,(&nbsp;) 当值为0时,焦点将移出编辑框 plugins/tab/plugin.js
        config.tabSpaces = 0;
        //默认使用的范本 plugins/templates/plugin.js.
        config.templates = 'default';
        //用逗号分隔的范本档plugins/templates/plugin.js.
        config.templates_files = [ 'plugins/templates/templates/default.js' ]
        //当使用范本时,“编辑内容将被替换”框是否选中 plugins/templates/plugin.js
        config.templates_replaceContent = true;
        //主题
        config.theme = 'default';
        //撤销的记录步数 plugins/undo/plugin.js
        config.undoStackSize =20;
        // 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
        //CKFinder.SetupCKEditor(null, '/ckfinder/');
    };
    

    SmartUpload插件

            1.[问题]图片上传是到数据库还是到服务器?

                    文件路径保存到数据库中,而把文件上传到服务器【tomcat】的硬盘中。

            2.使用步骤

                    ①环境准备:使用SmartUpload组件需要在项目中引入jspsmartupload.jar文件

                            --将jspsmartupload.jar添加到web-inf\lib目录下

                    ②需要设置表单的enctype属性--设置enctype属性后表单必须以post方式提交。

                            --<form enctype = "multipart/form-data" method = "post">

                    ③jsp smartupload.jar包中的File类

                            --封装了单个上传文件所包含的所有信息

                            saveAS() | isMissing() | getFieldName() | getFileName()

             3.案例

    <form action = "doAddFile.jsp" enctype="multipart/form-data" method = "post">
    		<input type = "file" name = "file"/>
    		<input type = "submit" value = "上传"/>	
    </form>
    
    
    <%
            /*
    	(1)实例化组件SmartUpload  拿到钥匙
    	(2)调用初始化的方法initialize  来激活该组件
    	(3)可以省略:设置对应限制方法
    	(4)调用upload方法暂时将文件上传到服务器内存上
    	(5)根据所选中的文件得到对应的文件名称拼接到指定的路径下进行服务器的本地保存
    		File类中的方法
    	*/
    	//(1)实例化组件SmartUpload  拿到钥匙
    	SmartUpload su = new SmartUpload();
    	//(2)调用初始化的方法initialize  来激活该组件
    	//pagecontext 内置对象之一    当前页面  
    	su.initialize(pageContext);
    	//(3)可以省略:设置对应限制方法
    	su.setAllowedFilesList("jpg,png,jpeg");//允许上传的文件类型
    	su.setDeniedFilesList("doc,avi,mp4");//禁止上传的文件类型
            //设置上传文件大小
    	int file_size = 10*1024*1024;
            //单个文件最大限制   
    	su.setMaxFileSize(file_size);		
    	//大小限制    单位 字节
    	//设置组件上传文件时的编码格式
    	su.setCharset("utf-8");
    	
    	//(4)调用upload方法暂时将文件上传到服务器内存上
    	su.upload();
    	
    	//(5)根据所选中的文件得到对应的文件名称拼接到指定的路径下进行服务器的本地保存
    	//File类中的方法
    	
    	//获取上传到服务器内存上的文件(第一个)
    	File file = su.getFiles().getFile(0);
    	
    	//定义一个变量存储当前服务器中项目的路径
    	String path = "upload//";
    	//根据pageContext获取当前项目的根目录
    	//String path = pageContext.getRequest().getServletContext().getContextPath();
    	System.out.println(path);
    	//判断  看你有没有选中
    	if(!file.isMissing()){//选中文件了
    		//想要将图片保存到服务器本地中
    		path+=file.getFileName();
    		//out.println(file.getFilePathName());//获取名字
    	}
    	
    	//out.println(path);
    	//最终保存到服务器本地中
    	file.saveAs(path,SmartUpload.SAVE_AUTO);
    	
    
    
    %>

            4.表单其它输入项怎么获取

    姓名:<input type = "text" name = "sname"/>
    获取sname
    String sname = request.getParameter("sname");
    out.print(sname);
    ----sname没有加载进去
    【解决方式】
    Request req = su.getRequest();
    String sname = req.getParameter("sname");
    out.print(uname);
    

    展开全文
  • CKEditor for ASP.NET

    2012-08-06 20:13:34
    ckeditor.zip,ckeditor,bin,CKEditor.NET.pdb,CKEditor.NET.dll,ckeditor,config.js,.htaccess,images,spacer.gif,lang,el.js,uk.js,nl.js,ca.js,fa.js,pt-br.js,zh.js,es.js,da.js,tr.js,gl.js,de.js,bg.js,hu.js,...
  • ckeditor 图片上传 远程图片下载
  • CKeditor for JAVA v3.6.4

    2021-04-22 16:12:40
    fckeditor-java.rar,ckeditor-java-3.6.4.war,说明.htm
  • CKEditor v4.5.11

    2020-12-04 21:09:12
    ckeditor是fckeditor html编辑器了一个升级版本,用过fckeditor的都知道,由于其打开速度的不理想把fckeditor用于网站做为在线编辑器并不是明智的选择,ckeditor正好弥补了这一缺陷,ckeditor是由Frederico Knabben....
  • ckeditor富文本编辑器,适合在线文本发布,内置上传附件,邮件等功能
  • CKEditor v4.7.1

    2020-11-30 03:59:22
    ckeditor是fckeditor html编辑器了一个升级版本,用过fckeditor的都知道,由于其打开速度的不理想把fckeditor用于网站做为在线编辑器并不是明智的选择,ckeditor正好弥补了这一缺陷,ckedi
  • CKEditor-其他

    2021-06-13 07:06:55
    <p>ckeditor是fckeditor html编辑器了一个升级版本,用过fckeditor的站长都知道,由于其打开速度的不理想把fckeditor用于网站做为在线编辑器并不是明智的选择,ckeditor正好弥补了这一缺陷,ckeditor是由Frederico ...
  • CKEditor asp.net

    2015-08-05 10:32:45
    CKEditor 文本编辑功能 asp.net
  • 安装django-ckeditor

    2021-10-22 09:50:59
    pip install django-ckeditor==5.6.1 安装pillow时需要的依赖包 apt-get install libjpeg-dev libpng-dev 百度了许多博客,都没找到答案,后来看官网,发现最新版的django-ckeditor的上传功能已经移植到ckeditor_...
  • node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:http://127.0.0.1/ckeditor5-build-classic/sample/,图片上传配置了ckfinder,请自行在网上下载放置在网站根目录,...
  • CKEditor v4.5.10

    2020-12-06 04:45:04
    ckeditor是fckeditor html编辑器了一个升级版本,用过fckeditor的都知道,由于其打开速度的不理想把fckeditor用于网站做为在线编辑器并不是明智的选择,ckeditor正好弥补了这一缺陷,ckeditor是由Frederico Knabben....
  • ckeditor4添加上传视频插件 后端java配置看下面的链接 https://blog.csdn.net/sxz13145/article/details/124410416
  • 用于React的CKEditor 5 RTF编辑器组件 用于React的官方 Rich Text编辑器组件。 :open_book: 请参阅中的指南以了解更多信息: 使用create-react-app@1 贡献克隆此存储库后,安装必要的依赖项: npm install 您也可以...
  • ckeditor5_v19ie兼容版

    2020-05-23 12:05:54
    3. 因属于完整版,速度会偏慢,如果要删除部分工具请从csdn下载ckeditor5 v19完整版配置文件进行删除并重新编译。 4. 已知存在两个bug,(1) TableCellProperties不兼容ie浏览器,QQ浏览器及360浏览器可正常使用,此...
  • ckeditor sdk

    2018-05-03 17:37:27
    网页富文本编辑器ckeditor 的帮助文档,支持页面的富文本编辑。
  • CKEditor 4图片上传CKEditor 4的简单隐藏iframe图片上传按钮下载档案将imageupload文件夹上传到ckeditor插件文件夹 [removed][removed][removed] CKEDITOR.plugins.addExternal('imageupload', '/ckeditor/plugins/...
  • ckeditor5-v22 全工具版

    2020-08-30 18:05:46
    node_modules 文件夹为包文件,该文件夹容量较大,在实际应用时可以删除,必须在网站模式使用,如:http://127.0.0.1/ckeditor5-build-classic/sample/,图片上传配置了ckfinder,请自行在网上下载放置在网站根目录,...
  • ckeditor5_v19完整版

    2020-05-15 18:33:26
    ckeditor5_v19完整版,可直接放在网站根目下使用,工具齐全,注意ckfinder请自行下载并放在网站根目录下。
  • ckeditor5 v23,全工具版,下载配置了ckfinder,因考虑版权没有该文件,如果要实现下载功能,请将ckfinder以"ckfinder”为名命名文件夹放置在网站根目录,编辑器网页示例文件为ckeditor5-23.0.0\packages\ckeditor5-...
  • 首先需要安装ckeditor-5npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic然后,在main.js中:import CKEditor from '@ckeditor/ckeditor5-vue';Vue.use( CKEditor );再次,进行组件化...
  • CKEditor 富文本编辑框 富文本编辑器 ckeditor struts2fckeditorplugin ckeditor-java-core-3.5.3
  • ckeditor full

    2017-08-27 13:36:54
    ckeditor 完整包

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,278
精华内容 2,111
关键字:

ckeditor下载