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的更多相关文章

【完整靠谱版】结合公司项目，仔细总结自己使用百度编辑器实现FTP上传的完整过程
说在前面工作中会遇到很多需要使用富文本编辑器的地方,比如我现在发布这篇文章离不开这个神器,而且现在网上编辑器太多了.记得之前,由于工作需要自己封装过一个编辑器的公共插件,是用ckeditor改版的, ...
ueditor 百度编辑器图片上传接 node.js 及一些前端自定义
百度编辑器用node.js 做服务端 demo 大神已整理的记录一下以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...
Thinkphp 3.2.3配置百度编辑器（UEditor）
Thinkphp 3.2.3配置百度编辑器(UEditor) 1.把百度编辑器放到项目的Public目录下命名为:UEditor 2.找到thinkphp框架系统自带类中的Html.class.ph ...
百度地图 ijintui以及七牛、百度编辑器、kindeditor
密码是明文存储的 sig错误是因为params没拼接上md5后的秘钥,测试时候可以在 Api\Controller\CommonController\_initialize 方法里注释掉效验的代码代 ...
Ueditor百度编辑器插件的安装
目录插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法定制工具栏图标修改配置项的方法: 插件下载地址: ...
[转载]百度编辑器-Ueditor使用
前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...
又一编辑神器-百度编辑器-Ueditor
(Lionden<hsdlionden@gmail.com> 转载说明) 前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工 ...
百度编辑器ueditor前台代码高亮无法自动换行解决方法
这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题问题描述: 在内容里面插入代码高亮显示,后台编辑器中是可以自动换行的,但是发表后,在前台查看,发现代码不能自动换 ...
百度编辑器ueditor 使用
ueditor 百度开源的一个编辑器 ,支持api.扩展,demo丰富.推荐下以前写编辑词典的使用 jquery-te 轻量级编辑器..当时看中了它代码轻巧.容易改. 把他的功能改了好多. ...

随机推荐

[C#] C# 知识回顾 - 学会处理异常
学会处理异常你可以使用 try 块来对你觉得可能会出现异常的代码进行分区. 其中,与之关联的 catch 块可用于处理任何异常情况. 一个包含代码的 finally 块,无论 try 块中是否在运行 ...
History API与浏览器历史堆栈管理
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构.传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持o ...
CSS知识总结（八）
CSS常用样式 8.变形样式改变元素的大小,透明,旋转角度,扭曲度等. transform : none | <transform-function> <transform-fun ...
JavaWeb——ServletContext
一.基本概念说起ServletContext,一些人会产生误解,以为一个servlet对应一个ServletContext.其实不是这样的,事实是一个web应用对应一个ServletContext, ...
【C#公共帮助类】 Utils 10年代码，最全的系统帮助类
为大家分享一下个人的一个Utils系统帮助类,可能有些现在有新的技术替代,自行修改哈~ 这个帮助类主要包含:对象转换处理 .分割字符串.截取字符串.删除最后结尾的一个逗号. 删除最后结尾的指定字符后的 ...
Java类变量和成员变量初始化过程
一.类的初始化对于类的初始化:类的初始化一般只初始化一次,类的初始化主要是初始化静态成员变量. 类的编译决定了类的初始化过程. 编译器生成的class文件主要对定义在源文件中的类进行了如下的更改: ...
VS2015墙内创建ionic2
开始学习ionic2,试验各种方法,感觉以下是紧跟rc版本的最佳方案 STEP1 设置cnpm npm install -g cnpm --registry=https://registry.npm. ...
敏捷转型历程 - Sprint3 一团糟的演示会
我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...
Log4Net应用问题
问题一.日志存储方式 1.txt 2.SQLServer数据库 3.log文件二.项目类型不同 1winFrom 2webFrom 3MVC 4WPF 5控制台三.切分依据不同 1.空间大小 2 ...
第11章 Linux服务管理
1. 服务分类 (1)Linux的服务 ①Linux中绝大多数的服务都是独立的,直接运行于内存中.当用户访问时,该服务直接响应用户,其好处是服务访问响应速度快.但不利之处是系统中服务越多,消耗的资源越 ...

百度编辑器UEditor与UEditor 公式插件完整Demo

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

2、下载UEditor公式插件

3、新建解决方案和项目

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

5、index.html源码

6、上传图片

测试看看：

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

随机推荐

热门专题