1、下载UEditor（我的是.net项目）

2、下载UEditor公式插件

3、新建解决方案和项目

4、在浏览器中预览index.html页面

结果：

5、index.html源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

          "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>完整demo</title>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>

    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

    <!--公式编辑器-->

    <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/addKityFormulaDialog.js"></script>

    <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/getKfContent.js"></script>

    <script type="text/javascript" charset="utf-8" src="./kityformula-plugin/defaultFilterFix.js"></script>

    <style type="text/css">

        div { width: 100%; }

    </style>

</head>

<body>

    <div>

        <h1>完整demo</h1>

        <script id="editor" type="text/plain" style="width:1024px;height:500px;">

        </script>

    </div>

    <div id="btns">

        <div><button onclick="ReplaceImage()">imagebase64替换为image</button>

            <button onclick="getAllHtml()">获得整个html的内容</button>

            <button onclick="getContent()">获得内容</button>

            <button onclick="setContent()">写入内容</button>

            <button onclick="setContent(true)">追加内容</button>

            <button onclick="getContentTxt()">获得纯文本</button>

            <button onclick="getPlainTxt()">获得带格式的纯文本</button>

            <button onclick="hasContent()">判断是否有内容</button>

            <button onclick="setFocus()">使编辑器获得焦点</button>

            <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>

            <button onmousedown="setblur(event)">编辑器失去焦点</button>

        </div>

        <div>

            <button onclick="getText()">获得当前选中的文本</button>

            <button onclick="insertHtml()">插入给定的内容</button>

            <button id="enable" onclick="setEnabled()">可以编辑</button>

            <button onclick="setDisabled()">不可编辑</button>

            <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>

            <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>

            <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>

        </div>

        <div>

            <button onclick="getLocalData()">获取草稿箱内容</button>

            <button onclick="clearLocalData()">清空草稿箱</button>

        </div>

    </div>

    <div>

        <button onclick="createEditor()">

            创建编辑器

        </button>

        <button onclick="deleteEditor()">

            删除编辑器

        </button>

    </div>

    <script type="text/javascript">

        //实例化编辑器

        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

        var ue = UE.getEditor('editor', {

            toolbars: [['fullscreen', 'source', '|',

                'undo', 'redo', '|',

                'bold', 'italic', 'underline', 'superscript', 'subscript', 'pasteplain', '|',

                'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',

                'paragraph', 'fontfamily', 'fontsize', '|',

                'indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',

                'simpleupload', 'horizontal', 'inserttable', '|',

                'searchreplace', 'kityformula'

            ]],

            autoHeightEnabled: true,

            autoFloatEnabled: true,

            serverUrl: "/controller.ashx"

        });

        function ReplaceImage() {

            ue.getKfContent(function (content) { });//将image的src从base64替换为文件名

        }

        function isFocus(e) {

            alert(UE.getEditor('editor').isFocus());

            UE.dom.domUtils.preventDefault(e)

        }

        function setblur(e) {

            UE.getEditor('editor').blur();

            UE.dom.domUtils.preventDefault(e)

        }

        function insertHtml() {

            var value = prompt('插入html代码', '');

            UE.getEditor('editor').execCommand('insertHtml', value)

        }

        function createEditor() {

            enableBtn();

            UE.getEditor('editor');

        }

        function getAllHtml() {

            alert(UE.getEditor('editor').getAllHtml())

        }

        function getContent() {

            var arr = [];

            arr.push("使用editor.getContent()方法可以获得编辑器的内容");

            arr.push("内容为：");

            arr.push(UE.getEditor('editor').getContent());

            alert(arr.join("\n"));

        }

        function getPlainTxt() {

            var arr = [];

            arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");

            arr.push("内容为：");

            arr.push(UE.getEditor('editor').getPlainTxt());

            alert(arr.join('\n'))

        }

        function setContent(isAppendTo) {

            var arr = [];

            arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");

            UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);

            alert(arr.join("\n"));

        }

        function setDisabled() {

            UE.getEditor('editor').setDisabled('fullscreen');

            disableBtn("enable");

        }

        function setEnabled() {

            UE.getEditor('editor').setEnabled();

            enableBtn();

        }

        function getText() {

            //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容

            var range = UE.getEditor('editor').selection.getRange();

            range.select();

            var txt = UE.getEditor('editor').selection.getText();

            alert(txt)

        }

        function getContentTxt() {

            var arr = [];

            arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");

            arr.push("编辑器的纯文本内容为：");

            arr.push(UE.getEditor('editor').getContentTxt());

            alert(arr.join("\n"));

        }

        function hasContent() {

            var arr = [];

            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");

            arr.push("判断结果为：");

            arr.push(UE.getEditor('editor').hasContents());

            alert(arr.join("\n"));

        }

        function setFocus() {

            UE.getEditor('editor').focus();

        }

        function deleteEditor() {

            disableBtn();

            UE.getEditor('editor').destroy();

        }

        function disableBtn(str) {

            var div = document.getElementById('btns');

            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");

            for (var i = 0, btn; btn = btns[i++];) {

                if (btn.id == str) {

                    UE.dom.domUtils.removeAttributes(btn, ["disabled"]);

                } else {

                    btn.setAttribute("disabled", "true");

                }

            }

        }

        function enableBtn() {

            var div = document.getElementById('btns');

            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");

            for (var i = 0, btn; btn = btns[i++];) {

                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);

            }

        }

        function getLocalData() {

            alert(UE.getEditor('editor').execCommand("getlocaldata"));

        }

        function clearLocalData() {

            UE.getEditor('editor').execCommand("clearlocaldata");

            alert("已清空草稿箱")

        }

    </script>

</body>

</html>

6、上传图片

修改config.json

这样的话上传的图片就会在网站根目录/UploadFiles/UEditor/image/20161122(这个名称根据时间变化)/底下

测试看看：

现在公式也可以用：

现在的图片还是base64的，然后把image的src从base64替换为文件名

替换好了

百度编辑器UEditor与UEditor 公式插件完整Demo的更多相关文章

  1. 【完整靠谱版】结合公司项目，仔细总结自己使用百度编辑器实现FTP上传的完整过程

    说在前面 工作中会遇到很多需要使用富文本编辑器的地方,比如我现在发布这篇文章离不开这个神器,而且现在网上编辑器太多了.记得之前,由于工作需要自己封装过一个编辑器的公共插件,是用ckeditor改版的, ...

  2. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  3. Thinkphp 3.2.3配置百度编辑器（UEditor）

    Thinkphp 3.2.3配置百度编辑器(UEditor) 1.把百度编辑器放到项目的Public目录下 命名为:UEditor 2.找到thinkphp框架系统自带类中的Html.class.ph ...

  4. 百度地图 ijintui以及七牛、百度编辑器、kindeditor

    密码是明文存储的 sig错误是因为params没拼接上md5后的秘钥,测试时候可以在 Api\Controller\CommonController\_initialize 方法里注释掉效验的代码 代 ...

  5. Ueditor百度编辑器插件的安装

    目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...

  6. [转载]百度编辑器-Ueditor使用

    前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...

  7. 又一编辑神器-百度编辑器-Ueditor

    (Lionden<hsdlionden@gmail.com> 转载说明) 前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工 ...

  8. 百度编辑器ueditor前台代码高亮无法自动换行解决方法

    这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题 问题描述:   在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换 ...

  9. 百度编辑器ueditor 使用

    ueditor 百度开源的一个 编辑器 ,支持api.扩展,demo丰富.推荐下 以前写 编辑 词典的使用 jquery-te  轻量级编辑器..当时看中了 它代码轻巧.容易改. 把他的功能改了好多. ...

随机推荐

  1. 基于AOP的MVC拦截异常让代码更优美

    与asp.net 打交道很多年,如今天微软的优秀框架越来越多,其中微软在基于mvc的思想架构,也推出了自己的一套asp.net mvc 框架,如果你亲身体验过它,会情不自禁的说‘漂亮’.回过头来,‘漂 ...

  2. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  3. VICA 架构设计（1）

    本文记录最近完成的一个通用实时通信客户端的架构.   背景 我们公司是做税务相关的软件,有针对大客户 MIS 系统,也有针对中小客户的 SaaS 平台.这些系统虽然都是 B/S 的,但是也需要使用 A ...

  4. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  5. Ajax使用WCF实现小票pos机打印源码

    通过ajax跨域方式调用WCF服务,实现小票pos机的打印,源码提供web方式,客户端方式测试,服务驻留右侧底部任务栏,可控制服务开启暂停,用户可自定义小票打印模板,配合零售录入. qq  22945 ...

  6. UML图中经常用到几种的关系图例

    学习这个东西挺奇怪的,时间一长就容易忘记,或者记不清楚.今天看到一些UML图的关系,发现有些出入了,索性就写下来,以后再忘记的时候过来看看. 在UML的类图中,常见的有以下几种关系: 继承(Gener ...

  7. 安卓GreenDao框架一些进阶用法整理

    大致分为以下几个方面: 一些查询指令整理 使用SQL语句进行特殊查询 检测表字段是否存在 数据库升级 数据库表字段赋初始值 一.查询指令整理 1.链式执行的指令 return mDaoSession. ...

  8. 敏捷软件开发VS传统软件工程

    敏捷软件开发:又称敏捷开发,是一种从1990年代开始逐渐引起广泛关注的一些新兴软件开发方法,是一种应对快速变化的需求的一种软件开发能力. 与传统软件工程相比,它们的具体名称.理念.过程.术语都不尽相同 ...

  9. SpringMVC初始化参数绑定--日期格式

    一.初始化参数绑定[一种日期格式] 配置步骤: ①:在applicationcontext.xml中只需要配置一个包扫描器即可 <!-- 包扫描器 --> <context:comp ...

  10. could not initialize proxy - no Session

    这是一个精典的问题:因为我们在hibernate里面load一个对象出来时,用到的是代理对象,也就是说当我们在执行load方法时并没有发sql语句,而是返回一个proxy对象.只有当们具体用到哪个ge ...