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/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  2. 说一说python的牛比与不爽

    本人写了10年php了.今年开始改写python了.不是说php有什么不好,php在自己的势力范围内还是很牛比的.只是我已经不能满足于php那两亩地了. 习惯了脚本,所以很自然就过度到python了. ...

  3. Android开发学习—— Fragment

    #Fragment* 用途:在一个Activity里切换界面,切换界面时只切换Fragment里面的内容* 生命周期方法跟Activity一致,可以理解把其为就是一个Activity* 定义布局文件作 ...

  4. Android开发学习—— shape标签的使用

    参考这片文章http://www.cnblogs.com/armyfai/p/5912414.html

  5. 《月之猎人 (Moon Hunters)》主角设计

    原文链接 游戏开发人员,你们好! 我是 Kitfox Games 工作室的总监 Tanya,我们的工作室位于加拿大的蒙特利尔,拥有六名员工. 我们 3 月份发布了<月之猎人>游戏的桌面版, ...

  6. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  7. ramdisk plus v11.5安装内存虚拟硬盘

    ramdisk plus v11.5.桌面版操作及应用图解说明 一.ramdisk plus程序安装方法: 1.先安装英文原版软件(RamDisk-desktop.exe桌面版),安装路径不要更改,安 ...

  8. .Net中的AOP系列之《间接调用——拦截方法》

    返回<.Net中的AOP>系列学习总目录 本篇目录 方法拦截 PostSharp方法拦截 Castle DynamicProxy方法拦截 现实案例--数据事务 现实案例--线程 .Net线 ...

  9. 从零开始，DIY一个jQuery（1）

    从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途,在整个系列的实践中,我们会把 jQuery 的主要功能模块都了解和实现一遍. 这会是一段很长的历程,但也会很有意思 —— 作为前端领域的 ...

  10. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...