如果您想了解CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用和富文本编辑器kindeditor的知识，那么本篇文章将是您的不二之选。我们将深入剖析CKEDITOR富文本编

如果您想了解CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用和富文本编辑器kindeditor的知识，那么本篇文章将是您的不二之选。我们将深入剖析CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用的各个方面，并为您解答富文本编辑器kindeditor的疑在这篇文章中，我们将为您介绍CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用的相关知识，同时也会详细的解释富文本编辑器kindeditor的运用方法，并给出实际的案例分析，希望能帮助到您！

• CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用（富文本编辑器kindeditor）
• CKEditor富文本编辑器
• django中ckeditor富文本编辑器使用
• Django添加ckeditor富文本编辑器
• jQuery 移动端artEditor富文本编辑器

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用（富文本编辑器kindeditor）

一、下载安装Ckeditor，并将其整合到项目中

1、什么是CKeditor？为什么要使用它？

我们在做门户网站或者公文系统时，客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求，此时就需要使用一种叫做富文本编辑器的东西，这类编辑器有很多，ckeditor就是其中一种，下面介绍其使用方法

2、如何下载

√ 进入官方网站http://ckeditor.com/，点击Download进入下载页面

√ CKEDITOR支持多种编程语言及框架（如：java、asp.net、sharepoint等），我们选择asp.net

√ 下载后解压，简单解释里面内容

3、下面讲如何将CKEditor整合到我们的应用中

√ 新建一个网站

√ 为了代码清晰，新建一个目录，起名JS，方便将ckeditor放到该目录下

√ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页，起名test_ckeditor

√ 增加对ckeditor的引用

√ 调用，主要是通过对TextBox的格式化实现富文本的显示效果

√ 为了简便，我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合)，从http://jquery.com/下载

√ 将下载后的文件放到JS文件夹下

√ 引用jquery（通过将jquery类库拖放到title标签下）

√ 页面上添加TextBox文本框（ID：TextBox1）

<asp:TextBox ID="TextBox1" runat=server" TextMode=MultiLine" />

√ 用ckeditor插件格式化TextBox1。在<script src="JS/jquery-1.6.2.min.js" type="text/javascript"></script>中添加如下代码

    <script type=text/javascript">
        var ckeditor; //定义全局变量 ckeditor
        $(function () {当全部DOM元素加载完毕后执行下面语句，不加此句javascript将无法找到TextBox1
            ckeditor = CKEDITOR.replace(<%=TextBox1.ClientID %>"); 用CKEDITOR.replace命令将TextBox1格式化成富文本
        });
    </script>

（注：以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBox1这个文本框进行改造，让其看起来更炫）

√ 按F5键预览，即可看到TextBox1被ckeditor格式化后的效果

4、CKEDITOR个性化定制

√ 这么多功能摆在这里就一个字”乱“，如何去掉我们不常用的功能呢？这就需要定义

√ 双击ckeditor目录中的config.js文件，通过对其进行配置可实现您的个性化需求

√ 下面给出常用的配置，供您选择

/*
copyright (c) 2003-2011,CKSource - Frederico Knabben. All rights reserved.
For licensing,see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function (config) {
     Define changes to default configuration here. For example:
    定义语言，此处改为中文
    config.language = 'zh-cn'; 中文颜色config.uiColor = '#AADC6E';字体
    config.font_names = '宋体;楷体;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';
    默认使用的toolbar（工具栏），此设定名字为“Basic”的toolbar为系统默认的工具栏
    config.toolbar = 'Basic';
    名字为“Basic”的toolbar（工具栏）的具体设定。只保留以下功能：
    config.toolbar_Basic =
    [
        { name: 'styles',items: ['Font','FontSize'] },样式栏：字体、大小
        {name: 'paragraph',items: ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },0); line-height:1.5!important">对齐栏：左对齐、中心对齐、右对齐、两端对齐
        {name: 'colors',items: ['TextColor','BGColor'] },0); line-height:1.5!important">颜色栏：文本颜色、背景颜色
        {name: 'basicstyles',items: ['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat'] },0); line-height:1.5!important">基本样式栏：加粗、倾斜、下划线、删除线、下标、上标、移除样式
        {name: 'insert',items: ['Image','Flash','Table','HorizontalRule'] },0); line-height:1.5!important">插入栏：图像、flash、表格、水平线
        {name: 'links',items: ['Link','Unlink'] },0); line-height:1.5!important">超链接栏：增加超链接、取消超链接
        {name: 'document',items: ['Source']}源代码栏：查看源代码
    ];
    工具栏是否可以被收缩（即：右上角的三角符号是否显示）
    config.toolbarCanCollapse = true;
    工具栏默认是否展开
    config.toolbarStartupExpanded =  是否允许“拖拽改变尺寸”功能（即：右下角的三角符号是否显示）
    config.resize_enabled = false;
    当输入：shift+Enter时插入的标签
    config.shiftEnterMode = CKEDITOR.ENTER_P; 可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV回车（Enter）时产生的标签
    config.enterMode = CKEDITOR.ENTER_BR; 可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV宽度config.width = "600px";高度config.height = "500px";默认样式config.skin ：'kama'（默认）、'office2003'、'v2'config.skin = "kama";工具栏的位置config.toolbarLocation = 'top'; //可选：bottom改变大小的最大高度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;

    以下为上传附件的相关配置，需配合ckfinder控件使用    var ckfinderPath = "/Scripts";    config.filebrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html';//上传文件时浏览服务文件夹    config.filebrowserImagebrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Images';//上传图片时浏览服务文件夹    config.filebrowserFlashbrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签)    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上传Flash按钮(标签)
};

CKFinder.setupCKEditor(ckeditor,"/JS/ckfinder/");用CKFinder.setupCKEditor命令将ckeditor与ckfinder进行整合

<asp:ListView ID=ListView1" DataKeyNames=id" 
        DataSourceID=dc_test">
        <AlternatingItemTemplate>
            <tr style=background-color: #FAFAD2;color: #284775;">
                <td>
                    <asp:Label ID=idLabel" Text='<%# Eval("id") %>' />
                </td>
                <td>
                    <asp:Label ID=titleLabel<%# Eval("title") %>post_timeLabel<%# Eval("post_time") %>content_detailsLabel" 
                        Text=<%# Eval("content_details") %>' />
                </td>
            </tr>
        </AlternatingItemTemplate>
        <EditItemTemplate>
            <tr style=background-color: #FFCC66;color: #000080;">
                <td>
                    <asp:Button ID=UpdateButton" CommandName=Update更新" />
                    <asp:Button ID=CancelButtonCancel取消" />
                </td>
                <td>
                    <asp:Label ID=idLabel1' />
                </td>
                <td>
                    <asp:TextBox ID=titleTextBox<%# Bind("title") %>post_timeTextBox<%# Bind("post_time") %>content_detailsTextBox<%# Bind("content_details") %>' />
                </td>
            </tr>
        </EditItemTemplate>
        <EmptyDataTemplate>
            <table runat=" 
                style=background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                <tr>
                    <td>
                        未返回数据。</td>
                </tr>
            </table>
        </EmptyDataTemplate>
        <InsertItemTemplate>
            <tr style="">
                <td>
                    <asp:Button ID=InsertButtonInsert插入清除" />
                </td>
                <td>
                    <asp:TextBox ID=idTextBox<%# Bind("id") %>' />
                </td>
            </tr>
        </InsertItemTemplate>
        <ItemTemplate>
            <tr style=background-color: #FFFBD6;color: #333333;' />
                </td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table runat=">
                <tr runat=">
                    <td runat=">
                        <table ID=itemPlaceholderContainer" border=1" 
                            style=background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana,sans-serif;">
                            <tr runat=" style=">
                                <th runat=">
                                    id</th>
                                <th runat=">
                                    title</th>
                                <th runat=">
                                    post_time</th>
                                <th runat=">
                                    content_details</th>
                            </tr>
                            <tr ID=itemPlaceholder">
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr runat=" 
                        style=text-align: center;background-color: #FFCC66;font-family: Verdana,sans-serif;color: #333333;">
                    </td>
                </tr>
            </table>
        </LayoutTemplate>
        <SelectedItemTemplate>
            <tr style=background-color: #FFCC66;font-weight: bold;color: #000080;' />
                </td>
            </tr>
        </SelectedItemTemplate>
    </asp:ListView>

    <asp:ListView ID=" DataSourceID=">
        <EmptyDataTemplate>
            <table runat=background-color: #FFFFFF; border-collapse: collapse;
                border-color: #999999; border-style: none; border-width: 1px;>
                <tr>
                    <td>
                        未返回数据。
                    </td>
                </tr>
            </table>
        </EmptyDataTemplate>
        <ItemTemplate>
            <tr style=background-color: #FFFBD6; color: #333333;">
                        <table id=background-color: #FFFFFF;
                            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
                            font-family: Verdana,sans-serif;
                            <tr runat=">
                                    标题
                                </th>
                                <th runat=">
                                    录入时间
                                </th>
                                <th runat=">
                                    内容
                                </th>
                            </tr>
                            <tr id=text-align: center; background-color: #FFCC66; font-family: Verdana,0); line-height:1.5!important">
                        color: #333333;
                    </td>
                </tr>
            </table>
        </LayoutTemplate>
    </asp:ListView>

标题：<asp:TextBox ID=txt_Title √ 在TextBox1下添加一个Button（ID：btn_Insert），作为录入按键
 
 
 
<asp:Button ID=btn_Insert录入 √ 添加完成后整体效果如下图所示：
 
 √ 在后台添加“录入”点击事件
 
 √ 在录入按键的Click点击事件中定义如下代码
 
 
 
 
 
        protected void btn_Insert_Click(object sender,EventArgs e)
        {
            using (sqlConnection conn = new sqlConnection(str_Conn))与数据库建立连接
            {
                conn.open();打开数据库
                执行命令
                using (sqlCommand cmd = new sqlCommand(insert into tb_test (title,content_details) values (@title,@content_details)",conn))
                {
                    cmd.Parameters.AddWithValue(title标题
                    cmd.Parameters.AddWithValue(@content_detailsBox1.Text);正文
                    if (cmd.ExecuteNonQuery() > 0)如果插入成功（即：受影响的行数>0）
                    {
                        ListView1.DataBind();
                    }
                    else 否则报“插入失败”的错误
                    {
                        ScriptManager.RegisterClientScriptBlock(this.Page,255); line-height:1.5!important">typeof(Page),"",0); line-height:1.5!important">alert('插入失败')true);
                    }
                }
            }
        }
 
 
 
   √ 按F5运行项目，分别在标题、正文处录入文字及上传照片，然后点击“录入”
 
 √ 点击“录入”，我们可以看到记录成功插入
 
3、美化
 
  或许你会感觉这样的录入方式不太给力，如果我点击录入按钮，然后弹出一个模拟层，并且可以拖动，似乎更炫，而且客户要求一般也是如此。
 
 就像下面的感觉：
 
 √ 先说拖动效果，代码可以自己写，但是有了JQUERY，我们只需要在弹出层（此处为一个DIV）后面加一个.draggable就行了，代码简洁，何乐而不为。但draggable这个方法并非JQUERY类库原始封装，需要一个叫 JQUERY UI 的插件（该插件能够扩展许多JQUERY的功能）来提供
 
 √ 进入http://jquery.com/
 
 √ 进入UI选项，下载需要的插件
 
 √ 在项目的JS文件加下建立一个jquery_ui目录，将下载后的文件解压到该目录下
 
 √ 前台添加对UI控件的引用
 
 √ 下面我们定义弹出层
 
 ①在ListView1的下方新增一个div，命名为div_Pop
 
 ②在该div中再建一个div作为标题行，命名为div_Title ，并且输入标题：录入内容
 
 ③将我们需要录入的内容全部剪切到该div_Pop中
 
 ④在录入按钮后面添加取消按钮，点击后弹出层消失
 
 
 
 
 
    <div id=div_Popdisplay: none;width:750px;"><%--该div包裹标题行及录入的内容,默认隐藏--%>
        <div id=div_Title"><%--该div是标题行，将来拖动此行可移动整个div_Pop--%>
            录入内容<hr />
        </div>
        标题：<asp:TextBox ID=" />
        <asp:TextBox ID=" />
        <asp:Button ID=" OnClick=btn_Insert_Click" />
        <input id=btn_Close" type=button" value=" /><%--取消按键，点击后弹出层消失--%>
    </div>
 
 
 
   √ 在form标签下新增一个button，点击该button后出现弹出层
 
 
 
<input id=btn_Add √ 在javascript标签<script type="text/javascript"></script>中，定义弹出层显示和消失的方法
 
弹出层显示
        function show_Win(div_Win,tr_Title,event) {
            var c_Width = document.documentElement.clientWidth; 可见 宽度
            var s_Width = document.documentElement.scrollWidth; 滚动 宽度var s_Left = document.documentElement.scrollLeft || document.body.scrollLeft; 据左边距 宽度(document.body的加入是为了兼容safari浏览器)var c_Height = document.documentElement.clientHeight; 可见 高度var s_Height = document.documentElement.scrollHeight; 滚动 高度var s_Top = document.documentElement.scrollTop || document.body.scrollTop; 距上边距 高度(document.body的加入是为了兼容safari浏览器)var js_Title = $("#" + tr_Title); 
            js_Title.css("cursor","move");
            创建遮罩层
            $("<div id=\"div_Bg\"></div>").css({ "position": "absolute","left": "0px","right": "0px","width": s_Width + "px","height": s_Height + "px","background-color": "#ffffff","opacity": "0.6" }).prependTo("body");
            获取弹出层var msgObj = $("#" + div_Win);
            msgObj.css("display","block"); 必须先弹出此行，否则msgObj[0].offsetHeight为0，因为"display":"none"时，offsetHeight无法取到数据y轴位置var js_Top = (c_Height - parseInt(msgObj[0].offsetHeight)) / 2 + s_Top + "px";
            x轴位置var js_Left = (c_Width - parseInt(msgObj[0].offsetWidth)) / 2 + s_Left + "px";
            msgObj.css({ "position": "absolute","top": js_Top,"left": js_Left,"border": "double 4px #FF9999 " });
            使弹出层可移动
            msgObj.draggable({ handle: js_Title,scroll: false });handdle表示拖动什么部位可使整个弹出层移动，scroll表示弹出层移出可视范围后浏览器是否自动生成滚动条
        }
        弹出层消失function close_Win(div_Win) {
            var div_Bg = $("#div_Bg");
            div_Bg.remove();
            $("#" + div_Win).fadeOut(200);
        }
 
 
 
   √ 在JQUERY标签$(function(){})中，新增录入（弹出层显示）和取消（弹出层消失）事件
 
 
 
            事件：点击“录入”后，弹出层显示
            $("#btn_Add").click(function () { show_Win("div_Pop","div_Title",event) });
            事件：点击“取消”后，弹出层消失
            $("#btn_Close").click(function () { close_Win("div_Pop"); });
 
 
 √ 按F5预览结果
 我想苹果系统之所以受欢迎是因为它做到了简洁、易用与高度的整合。想象一下，如果增删改查操作在多个页面给客户是什么体验—繁琐、晕~，如果在一个页面并且做得相当人性化又是什么感觉—简洁、爽！那么如何将修改功能做的更人性化呢？我们做如下尝试：
 
 ①当点击标题行中的数据，自动弹出相关内容（根据主键id从WebService获取）
 
 ②弹出层新增“修改”按键，点击后能将修改的数据更新到数据库
 
 √ 由于我们要新增修改功能，所以在录入、取消中间，要增加“修改”按键
 √ 同时加入一个HiddenFiled隐藏标签，并将主键的值赋给它（如何赋值后面将讲到，见show_Details方法的最后一句代码），方便后台编写修改按键程序时调用
 
 √ 进入后台test_ckeditor.aspx.cs代码，添加btn_Edit_Click的事件处理程序
 
void btn_Edit_Click(update tb_test set title=@title,content_details=@content_details where id=@id@id主键id如果修改成功（即：受影响的行数>0）
                    {
                        ListView1.DataBind();重新绑定数据
                    }
                    否则报“修改失败”的错误alert('修改失败') √ 添加WebService（一种让前台页面与后台代码异步通讯的技术，能为我们带来网页局部更新的体验），取名：WebService1.asmx
 
 √ 取消相关注释，允许外部javascript方法调用该WebService1；自定义方法，根据主键id得到数据库其他字段值
 
 ①由于我们要返回一个数组列表（该列表包含标题、日期、内容）所以要添加System.Collections引用
 ②由于我们需要对SQLServer数据库进行操作，所以需要添加System.Data.SqlClient引用
 ③由于我们需要对SQLServer数据库进行操作，所以需要添加数据库连接字符串，以明确对哪个数据库进行操作
 
 √ 下面我们定义自己的方法：根据id获取标题、日期、内容，并将其存入ArrayList，等待调用
 
 
 
 
 
        [WebMethod]
        public ArrayList get_Details(string str_Id)str_Id参数是从javascript方法中接收的主键id值
        {
            ArrayList al = new ArrayList();定义ArrayList，准备存储 标题、提交时间、内容建立数据库连接执行sql命令select title,post_time,content_details from tb_test where id=@id主键id
                    定义只读数据流，根据主键id从中读取 标题（title）、提交时间（post_time）、内容（content_details）using (sqlDataReader sdr = cmd.ExecuteReader(System.Data.CommandBehavior.CloseConnection))CommandBehavior.CloseConnection表示自动侦测sdr的状态，如果sdr关闭，则数据库连接也自动关闭
                    {
                        sdr.Read();向前读取一条记录
                        al.Add(sdr["].ToString());post_time提交时间content_details内容
                        if (!sdr.IsClosed) { sdr.Close(); }如果数据流没有关闭，就关掉它
                    }
                }
            }
            return al;返回ArrayList
        }
 
 
 
   √ 前台调用步骤：
 
 ① 切换到test_ckeditor.aspx前台页面，在javascript标签<script type="text/javascript"></script>中定义方法
 
 ② 向WebService1.asmx发送数据库主键id
 
 ③ 然后通过主键id获取提交时间、内容等先关信息
 
显示明细（用到了AJAX异步交互技术）function show_Details(str_Id) {
            $.ajax({
                type: "POST",0); line-height:1.5!important">AJAX有两种传送类型，POST和GET，其中POST更安全
                contentType: "application/json",0); line-height:1.5!important">微软的WebService框架采用json内容类型进行数据传输
                url: "WebService1.asmx/get_Details",0); line-height:1.5!important">WebService1.asmx所在路径/方法
                data: "{str_Id:'" + str_Id + "'}",0); line-height:1.5!important">方法的参数
                dataType: 'json',0); line-height:1.5!important">微软的WebService框架采用json作为数据类型
                success: function (result) {回调函数（即：如果上面的语句都执行成功的话，WebService1.asmx返回来的数据），通常用result.d表示返回的数据集合
                    $("#txt_Title").val(result.d[0]); 得到标题
                    ckeditor.setData(result.d[2]); 得到内容
                    show_Win("div_Pop",event); 弹出层
                    $("#hf").val(str_Id); 将主键存储在HidenFiled中，方便调用
                }
            });
        }
 
 
 
   √ 改造ListView1 <ItemTemplate></ItemTemplate>标签中的第一列，实现点击标题行，弹出详细内容的目的
 
 √ 按F5键进行预览
 
 √ 下面我们继续完善，将删除功能融入其中
 
 √ 在test_ckeditor.aspx前台页面，定位到LayoutTemplate中，在table上新增一个叫做“删除”的th列头
 
 √ 定位到ItemTemplate中，在最后新增一列，于其中放置“删除按键”，注意必须为该Button设置CommandName="Delete"，目的是告诉程序该Button的功能就是“删除”，否则无法与后台的ItemDeleting事件配合实现删除记录的功能
 
 √ 进入ItemDeleting后台事件处理程序
 
 √ 在ItemDeleting后台事件处理程序中，填写如下代码：
 
void ListView1_ItemDeleting(        {
            delete from tb_test where id=@id如果删除成功（即：受影响的行数>0）else否则报“删除失败”的错误alert('删除失败') √ 按F5预览效果
 
 演示完毕。想必我们很多项目都会用到这些常用的功能，记录下来，日后方便。
                  


                  
总结
                  
以上是小编为你收集整理的CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用全部内容。
                  
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
            

CKEditor富文本编辑器

CKEditor

　　富文本即具备丰富样式格式的文本。在运营后台，运营人员需要录入课程的相关描述，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带格式的文本，我们引入富文本编辑器。

1. 安装

pip install django-ckeditor

2.在INSTALLED_APPS中添加

INSTALLED_APPS = [
    ...
    ''ckeditor'',  # 富文本编辑器
    ''ckeditor_uploader'',  # 富文本编辑器上传图片模块
    ...
]

3. 添加CKEditor设置

在settings/dev.py中添加

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    ''default'': {
        ''toolbar'': ''full'',  # 工具条功能
        ''height'': 300,      # 编辑器高度
        # ''width'': 300,     # 编辑器宽
    },
}
CKEDITOR_UPLOAD_PATH = ''''  # 上传图片保存路径

4. 添加ckeditor路由

在总路由中添加

url(r''^ckeditor/'', include(''ckeditor_uploader.urls'')),

5. 为模型类添加字段

ckeditor提供了两种类型的Django模型类字段

• ckeditor.fields.RichTextField  不支持上传文件的富文本字段

• ckeditor_uploader.fields.RichTextUploadingField  支持上传文件的富文本字段\

修改course/models.py里面的字段信息,记得要重新数据迁移

from ckeditor_uploader.fields import RichTextUploadingField
class Course(models.Model):
    """
    专题课程
    """
    ...
    
    brief = RichTextUploadingField(max_length=2048, verbose_name="课程概述", null=True, blank=True)

django中ckeditor富文本编辑器使用

1.安装模块

　　（pillow是python的一个图像处理库）

　　pip install django-ckeditor

　　pip install pillow

2.编辑seetings.py配置文件　

INSTALLED_APPS = [
   ''ckeditor'',#富文本编辑器
    ''ckeditor_uploader''#富文本编辑器上传图片模块
]

#媒体文件配置
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "images"  # 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写  '' '' ,如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。


# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    #（1）默认配置
    # ''default'': {
    #     ''toolbar'': ''full'',  # 工具条功能
    #     ''height'': 300,  # 编辑器高度
    #     ''width'': 800,  # 编辑器宽
    # },

    #（3）自定义配置带代码块显示
    ''default'': {
        ''toolbar'': (
            [''div'', ''Source'', ''-'', ''Save'', ''NewPage'', ''Preview'', ''-'', ''Templates''],
            [''Cut'', ''Copy'', ''Paste'', ''PasteText'', ''PasteFromWord'', ''-'', ''Print'', ''SpellChecker'', ''Scayt''],
            [''Undo'', ''Redo'', ''-'', ''Find'', ''Replace'', ''-'', ''SelectAll'', ''RemoveFormat''],
            [''Form'', ''Checkbox'', ''Radio'', ''TextField'', ''Textarea'', ''Select'', ''Button'', ''ImageButton'', ''HiddenField''],
            [''Bold'', ''Italic'', ''Underline'', ''Strike'', ''-'', ''Subscript'', ''Superscript''],
            [''NumberedList'', ''BulletedList'', ''-'', ''Outdent'', ''Indent'', ''Blockquote''],
            [''JustifyLeft'', ''JustifyCenter'', ''JustifyRight'', ''JustifyBlock''],
            [''Link'', ''Unlink'', ''Anchor''],
            [''Image'', ''Flash'', ''Table'', ''HorizontalRule'', ''Smiley'', ''SpecialChar'', ''PageBreak''],
            [''Styles'', ''Format'', ''Font'', ''FontSize''],
            [''TextColor'', ''BGColor''],
            [''Maximize'', ''ShowBlocks'', ''-'', ''About'', ''pbckcode''],
            [''Blockquote'', ''CodeSnippet''],
        ),
        ''width'': ''auto'',
        # 添加按钮在这里
        ''toolbar_Custom'': [
            [''NumberedList'', ''BulletedList''],
            [''Blockquote'', ''CodeSnippet''],
        ],
        # 插件
        ''extraPlugins'': '',''.join([''codesnippet'', ''widget'', ''lineutils'', ]),
    },
}

seetings.py

3.编辑urls.py路由

from django.conf.urls import url, include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
from editer import views

urlpatterns = [
                  url(r''^admin/'', admin.site.urls),
                  url(r''^ckeditor/'', include(''ckeditor_uploader.urls'')),
                  url(r''^index/'', views.index),#测试获取后台编辑的内容用的

              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  ## 没有这一句无法显示上传的图片

urls.py

4.app应用的models.py中的应用　　

from django.db import models
from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField


class SPUModel(models.Model):
    ''''''这是spu表格''''''
    name = models.CharField(max_length=32, verbose_name=''商品名'')
    sales = models.CharField(max_length=20, verbose_name=''销售量'')
    desc_pack = RichTextUploadingField(default='''', verbose_name=''商品详情'')

    def __str__(self):
        return self.name

    class Meta:
        verbose_name = ''商品表''
        db_table = verbose_name
        verbose_name_plural = verbose_name

models.py

5.数据库迁移指令

　　makemigrations

　　migrate

6.创建admin超级用户

　　createsuperuser

7.app应用的admin.py文件中注册表　　

from django.contrib import admin
from editer import models

# Register your models here.
admin.site.register(models.SPUModel)

admin.py

8.启动项目，进入admin后台管理编辑即可

 9.在templates文件夹中编写测试url返回页面index.html　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CKEditorTest</title>
</head>
<body>
<div>
    {% for obj in all %}
        <hr>
        <h2>第{{ forloop.counter }}篇：</h2>
        <h2>标题：{{ obj.name }}</h2>
        <h3>销量：{{ obj.sales }}</h3>
        {{ obj.desc_pack | safe }}

    {% endfor %}

</div>
</body>
</html>

index.html

10.app应用的views.py文件中编写测试url对应的视图函数　　

from django.shortcuts import render
from editer import models


# Create your views here.
def index(request):
    all_obj = list(models.SPUModel.objects.all().all().values(''name'',''sales'',''desc_pack''))

    return render(request, ''index.html'', {''all'': all_obj})

views.py

11.重启项目，浏览器测试http://127.0.0.1:8000/index/

 参考博客：https://blog.csdn.net/weixin_43158056/article/details/93911844

Django添加ckeditor富文本编辑器

通过pip安装。

pip3 install django-ckeditor
pip3 install Pillow

在settings.py的INSTALLED_APPS里添加ckeditor和ckeditor_uploader两个应用。

INSTALLED_APPS = (
    #
    ''ckeditor'',
    ''ckeditor_uploader''
)

CKEDITOR_JQUERY_URL = ''https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js''  
  
MEDIA_URL = ''/media/''  
  
MEDIA_ROOT = os.path.join(BASE_DIR,''media/'')  
  
CKEDITOR_UPLOAD_PATH = ''uploads/''  
  
CKEDITOR_IMAGE_BACKEND = ''PIL''  
  
CKEDITOR_CONFIGS = {  
    ''default'': {  
        ''toolbar'': ''full'',  
    },  
}

接下来在urls.py里配置ckeditor相关的url。

from django.conf.urls import url,include
urlpatterns = [
      url(r''^ckeditor/'', include(''ckeditor_uploader.urls'')),
]

最后修改需要使用富文本编辑器的Django APP的目录下的models.py。其中RichTextField拥有TextField的全部参数，还拥有其他的一些参数。

from ckeditor.fields import RichTextField
#
content = RichTextField() # 将需要使用富文本编辑器的字段改为RichTextField

content = RichTextUploadingField(verbose_name=u''内容'')#可以上传图片的

在 templates 中使用内容

{{ content | safe }}

jQuery 移动端artEditor富文本编辑器

由于手机上打字比较慢，并不适合长篇大论的文章，所以移动端的富文本编辑器很少。artEditor是一款基于jQuery的移动端富文本编辑器，支持插入图片，后续完善其他功能。

插件地址：https://github.com/baixuexiyang/artEditor 欢迎star或fork。

demo

引用：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="artEditor.min.js"></script> 

参数：

imgTar

图片上传按钮

limitSize

图片最大限制，默认3兆

showServer

显示从服务端返回的图片，默认是显示本地资源的图片

uploadUrl

图片上传路劲

data

上传图片其他参数

uploadField

上传图片字段

placeholader

富文本编辑器holder

validHtml

粘贴时，去除不合法的html标签

uploadSuccess

图片上传成功回调

uploadError

图片上传失败回调

demo：

html:

<div id="content">
</div> 

js:

$(''#content'').artEditor({
imgTar: ''#imageUpload'',
limitSize: 5, // 兆
showServer: false,
uploadUrl: '''',
data: {},
uploadField: ''image'',
placeholader: ''<p>请输入文章正文内容</p>'',
validHtml: ["br"],
uploadSuccess: function(res) {
// return img url
return res.path;
},
uploadError: function(res) {
// something error
console.log(res);
}
});

以上内容给大家介绍了jQuery 移动端artEditor富文本编辑器的相关知识，希望大家喜欢。

关于CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用和富文本编辑器kindeditor的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CKEditor富文本编辑器、django中ckeditor富文本编辑器使用、Django添加ckeditor富文本编辑器、jQuery 移动端artEditor富文本编辑器等相关知识的信息别忘了在本站进行查找喔。