zoukankan      html  css  js  c++  java
  • CKEditor在.NET中的应用

    转自:http://shawnqiu.javaeye.com/blog/689748

    1. 下载ckeditor
    官方网址:http://ckeditor.com/
    最新版本:CKEditor 3.3.1,released on 10 June 2010

    2. 精简ckeditor
    删除_samples和_source文件夹,分别为示例文件和未压缩源程序。
    删除lang文件夹下除zh-cn.js,en.js下的所有语言文件,或根据需要删除。
    删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可)
    删除skins目录下不需要的皮肤。//如果只保留V2则必须在config.js中指定皮肤

    3. ckeditor 3.0.1相关文件配置路径
    /ckeditor.js   核心文件,调用需加载
    /config.js     配置文件,参数配置均在此完成
    /plugins/smiley/images 表情符号.

    4. ckeditor配置(config.js配置文件)

    Config.js代码 复制代码
    1. config.language = "zh-cn";   
    2. config.skin = "office2003";   
    3. config.width = "100%";   
    4. config.height = "600px";   
    5. config.resize_enabled = false;   
    6. config.toolbarCanCollapse = false;   
    7. config.toolbar = [['Source''Preview''-'], ['Cut''Copy''Paste''PasteText''PasteFromWord', ], ['Undo''Redo''-''Find''Replace''-''SelectAll''RemoveFormat'], ['Image''Flash''Table''HorizontalRule''Smiley''SpecialChar''PageBreak'], '/', ['Bold''Italic''Underline''-''Subscript''Superscript'], ['NumberedList''BulletedList''-''Outdent''Indent''Blockquote'], ['JustifyLeft''JustifyCenter''JustifyRight''JustifyBlock'], ['Link''Unlink''Anchor'], '/', ['Format''Font''FontSize'], ['TextColor''BGColor'], ['Maximize''ShowBlocks''-''About']];  


    5. ckeditor内的文本自动换行
    修改contents.css,设置如下
    Css代码 复制代码
    1. body { word-break:break-all;//自动换行 }  


    6. .net环境应用ckeditor
       HEAD中引用js脚本
    Javascript代码 复制代码
    1. <script type="text/javascript" src="../ckeditor/ckeditor.js"></script>  

    将相应的控件替换成编辑器代码
    Html代码 复制代码
    1. <asp:textbox id="txt_CKEditor" runat="server" Width="100%"></asp:textbox>  
    2. <script type="text/javascript">  
    3.   var editor = CKEDITOR.replace('txt_CKEditor');   
    4. </script>  

    添加一个text控件,用于存放ckeditor的HTML源码
    Html代码 复制代码
    1. <asp:textbox id="txt_NoticeContext" runat="server" Width="1px" TextMode="MultiLine" Height="1px"></asp:textbox>  


    7. 获取ckeditor的HTML源码
    HTML页面中
    Javascript代码 复制代码
    1. <script>   
    2.   function BindContent()   
    3.   {   
    4.     document.Form1.txt_NoticeContext.value = editor.document.getBody().getHtml();   
    5.   }        
    6. </script>  

    cs页面中
    C#代码 复制代码
    1. protected void Page_Load(object sender, EventArgs e)   
    2. {   
    3.   //向按钮增加读取页面内容的js函数(点击按钮时将文章内容绑定到隐藏的文本框)   
    4.   btn_Add.Attributes.Add("onclick""javascript:BindContent();");   
    5. }  

      获取OO对象时
    C#代码 复制代码
    1. noticeInfoTemp.NoticeContext = txt_NoticeContext.Text;  


    8. 将HTML源码赋给ckeditor
    HTML页面中
    Javascript代码 复制代码
    1. <script>   
    2.   function LoadContent()   
    3.   {   
    4.     editor.setData(document.Form1.txt_NoticeContext.value);   
    5.   }            
    6. </script>   
    7. ...   
    8. <body onload="javascipt:LoadContent();">  

    cs页面中
    C#代码 复制代码
    1. txt_NoticeContext.Text = t_tw_noticeinfo.NoticeContext;  

  • 相关阅读:
    AJAX异步传输——以php文件传输为例
    js控制json生成菜单——自制菜单(一)
    vs2010中关于HTML控件与服务器控件分别和js函数混合使用的问题
    SQL数据库连接到服务器出错——无法连接到XXX
    PHP错误:Namespace declaration statement has to be the very first statement in the script
    【LeetCode】19. Remove Nth Node From End of List
    【LeetCode】14. Longest Common Prefix
    【LeetCode】38. Count and Say
    【LeetCode】242. Valid Anagram
    【LeetCode】387. First Unique Character in a String
  • 原文地址:https://www.cnblogs.com/wangpei/p/1965226.html
Copyright © 2011-2022 走看看