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#] C# 知识回顾 - 特性 Attribute

    C# 知识回顾 - 特性 Attribute [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5911289.html 目录 特性简介 使用特性 特性 ...

  2. 我这么玩Web Api（二）：数据验证，全局数据验证与单元测试

    目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试   一.模型状态 - ModelState 我理解 ...

  3. ASP.NET Core 中文文档 第四章 MVC（3.9）视图组件

    作者: Rick Anderson 翻译: 娄宇(Lyrics) 校对: 高嵩 章节: 介绍视图组件 创建视图组件 调用视图组件 演练:创建一个简单的视图组件 附加的资源 查看或下载示例代码 介绍视图 ...

  4. ADO.NET编程之美----数据访问方式(面向连接与面向无连接)

    最近,在学习ADO.NET时,其中提到了数据访问方式:面向连接与面向无连接.于是,百度了一下,发现并没有很好的资料,然而,在学校图书馆中发现一本好书(<ASP.NET MVC5 网站开发之美&g ...

  5. ABAP单元测试最佳实践

    本文包含了我在开发项目中经历过的实用的ABAP单元测试指导方针.我把它们安排成为问答的风格,欢迎任何人添加更多的Q&A's,以完成这个列表. 在我的项目中,只使用传统的ABAP report. ...

  6. 在开源中国(oschina)git中新建标签(tags)

    我今天提交代码到主干上面,本来想打个标签(tags)的. 因为我以前新建过标签(tags),但是我现在新建的时候不知道入库在哪了.怎么找也找不到了. 从网上找资料也没有,找客服没有人理我,看到一个交流 ...

  7. 如何区别char与varchar?

    1.varchar与char两个数据类型用于存储字符串长度小于255的字符,MySQL5.0之前是varchar支持最大255.比如向一个长度为40个字符的字段中输入一个为10个字符的数据.使用var ...

  8. 编写一个通用的Makefile文件

    1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...

  9. Orcale 三层嵌套分页代码

    select * from( select emp.*,rownum a from ( select * from emp ) emp where rownum<7) where a>3

  10. Storm介绍(一)

    作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 内容简介 本文是Storm系列之一,介绍了Storm的起源,Storm ...