zoukankan      html  css  js  c++  java
  • [转载]百度免费的文本编辑器Ueditor的使用说明

    感谢大家对我这个菜鸟的帮助,这是我第一次用.NET做网站。在这里向大家推荐个百度免费的文本编辑器Ueditor,是.NET版的,在http://ueditor.baidu.com/website/index.html可以下载。官网上也有简单的教程,看着费劲很蛋疼。

    然后我花了一天多的时间研究出了它在数据控件里的用法,高手们不要见笑啊,都是我自己实验出来的:如下:

    部署说明:
     
    1、拷贝源码包中的dialogs、themes、net、third-party、editor_all.js和editor_config.js到ueditor文件夹中。

    2、在ueditor文件夹里的editor_config.js里设置绝对路径:

    URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("/")+1).replace("_examples/","").replace("website/","");
    改成
    URL= window.UEDITOR_HOME_URL||"/ueditor/";
     
     
    3、加入文件头,注意次序不要错:
    <script type="text/javascript" src="/ueditor/editor_config.js"></script>
    < script type="text/javascript" src="/ueditor/editor_all.js"></script>
    < link rel="stylesheet" href="/ueditor/themes/default/ueditor.css">
     

    4、加入实体,其中div或者textarea是实例,script是引用语句。
    <div id="myEditor" style="800px;"></div>
    < script type="text/javascript">
        var editor = new baidu.editor.ui.Editor();
        editor.render("myEditor");
    < /script>

    可以在div或textarea中加name属性,以改变传值变量名,覆盖默认变量名,在一页里引用多个实例时用,如下:

    <textarea id="myEditor" style="800px;" name="myContent"></textarea>
    < script type="text/javascript">
        var editor = new baidu.editor.ui.Editor();
        editor.render("myEditor");
    < /script>
     
     
    5、传值到数据库:
    默认传值变量为editorValue,这个可以在editor_config.js文件里的textarea:后面修改。

    ◆如果不放在控件里:后端可以用Request.Form["editorValue"]来获取,这个值只能由有提交功能的按钮来提取。

    ◆用FormView控件实现插入功能:
    ①在<InsertItemTemplate>里把<asp:TextBox Text='<%# Bind("newsContent") %>' ...什么的替换成:
    <textarea id="myEditor" style="800px;" ></textarea>
    < script type="text/javascript">
        var editor = new baidu.editor.ui.Editor();
        editor.render("myEditor");
    < /script>

    ②在<InsertItemTemplate>的底端,一定要把<asp:LinkButton ...的提交按钮改换成<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="确定新增" />

    ③在此FormView的数据源<asp:SqlDataSource里的<InsertParameters>里:
    把<asp:Parameter Name="newsContent" Type="String" />改成<asp:FormParameter FormField="editorValue" Name="newsContent" Type="String" />

    ◆用ListView控件实现插入功能:
    ①在<InsertItemTemplate>里把<asp:TextBox Text='<%# Bind("newsContent") %>' ...什么的替换成:
    <textarea id="myEditor1" name="insertEditorValue" style="800px;" ></textarea>
    < script type="text/javascript">
        var editor = new baidu.editor.ui.Editor();
        editor.render("myEditor1");
    < /script>
    关键点:textarea一定要加上name属性以防止和编辑模块中的传值参数起冲突;
            textarea的id也要和编辑模块的有区别,但要和render("的id保持一致。

    ②在此ListView的数据源<asp:SqlDataSource里的<InsertParameters>里:
    把<asp:Parameter Name="newsContent" Type="String" />改成<asp:FormParameter FormField="insertEditorValue" Name="newsContent" Type="String" />

    ◆用ListView控件实现编辑功能:
    ①首先要打开ueditor目录下的editor_config.js文件,设置,autoClearinitialContent:false否则一点鼠标内容就消失了。

    ②在<EditItemTemplate>里把<asp:TextBox Text='<%# Bind("newsContent") %>' ...什么的替换成:
    <textarea id="myEditor2"  name="editEditorValue" style="800px;"><asp:Label ID="Label1" runat="server" Text='<%# Eval("newsContent") %>'></asp:Label></textarea>
    < script type="text/javascript">
        var editor = new baidu.editor.ui.Editor();
        editor.render("myEditor2");
    < /script>

    ③在此ListView的数据源<asp:SqlDataSource里的<UpdateParameters>里:
    把<asp:Parameter Name="newsContent" Type="String" />改成<asp:FormParameter FormField="editEditorValue" Name="newsContent" Type="String" />


     
    6、常见问题解决:
    图片上传不成功?
    由于目前官方提供的最新的.NET 1.2.1.0版本 是.Net FrameWork 4.0 ,所以如果在你的项目里是是.Net FrameWork 3.5
    请做如下修改:
    删除官方下的.Net/web.config,(只用vs自动生成的web.config就可以了)
    这样就没有问题了。
    或者修改你网站的.NET版本:右击“解决方案资源管理器”的网站根文件夹,选“属性页”,“生成”标签里改。

  • 相关阅读:
    RabbitMQ教程
    设置文件夹共享及所有访问权限
    一键操作IIS
    C#操作IIS服务
    【01】浅谈HTTP在WebApi开发中的运用
    Socket通信原理
    C# 通过JObject解析json对象
    MVC小知识整理
    Global.asax文件的作用
    iOS开发日记9-终端命令
  • 原文地址:https://www.cnblogs.com/yqie/p/2907658.html
Copyright © 2011-2022 走看看