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. C#日志

    参考页面: http://www.yuanjiaocheng.net/Entity/first.html http://www.yuanjiaocheng.net/Entity/jieshao.htm ...

  2. HTTP API接口安全设计

    HTTP API接口安全设计 API接口调用方式 HTTP + 请求签名机制   HTTP + 参数签名机制 HTTPS + 访问令牌机制 有没有更好的方案? OAuth授权机制 OAuth2.0服务 ...

  3. 【干货分享】流程DEMO-离职流程

    流程名: 离职申请   流程相关文件: 流程包.xml WebService业务服务.xml WebService.asmx WebService.cs   流程说明: 流程中集成了webservic ...

  4. git和pycharm管理代码

    首先明白三个概念,服务器代码库,本地代码库,和正在coding的项目. coding完毕后,先通过commit提交到本地代码库,然后通过push再提交server的代码库    git步骤 git c ...

  5. 在配有英特尔® Iris™ 显卡的系统上通过优化对 Just Cause 3 进行增强

    高端 PC 继续通过高性能显卡驱动桌面游戏. 一流的"梦想机器"基于第六代智能 英特尔® 酷睿™ 处理器i7-6700K等 CPU,通常与高端独立显卡配合使用以运行要求最严苛的游戏 ...

  6. [转]ThinkPHP中实例化对象M()和D()的区别，select和find的区别

    1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会 ...

  7. 分享MSSQL、MySql、Oracle的大数据批量导入方法及编程手法细节

    1:MSSQL SQL语法篇: BULK INSERT [ database_name . [ schema_name ] . | schema_name . ] [ table_name | vie ...

  8. 微软“.Net社区虚拟大会”dotnetConf2015：关键词：.NET 创新、开源、跨平台

    去年 11 月的时候,微软开源了 .NET CoreFX,然后是今年 2 月份的 .NET CoreCLR.自那时以来,已经有大约 3500 人在 GitHub 上进行了提交,而且贡献者的人数还在持续 ...

  9. [Intel Edison开发板] 04、Edison开发基于nodejs和redis的服务器搭建

    一.前言 intel-iot-examples-datastore 是Intel提供用于所有Edison开发板联网存储DEMO所需要的服务器工程.该工程是基于nodejs和redis写成的一个简单的工 ...

  10. CSharpGL(14)用geometry shader渲染模型的法线(normal)

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(14)用geometry shader渲染模型的法线(normal) +BIT祝威+悄悄在此留下版了个权的信息说: 2016-08-13 ...