酒泉热线,操肥臀,厦门舞蹈
0.ueditor简介
ueditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。开源基于bsd协议，所有源代码在协议允许范围内可自由修改和使用。
ueditor官网：
ueditor官方文档地址:
1.将ueditor包导入项目
将从官网上的开发包解压后包含到项目中
（注:最新的代码需要时基于.netframework4以上）
解压后目录下文件如下：
是一个示例文件、可以删去，ueditor.config.js中是一些富文本编辑器的设置，建议不要改动，可以在页面中引用的时候设置，如果所有页面都需要设置可以写在一个js文件中，dialogs是在文本框中点击按钮时用到的一些弹出框效果，lang文件夹下是语言相关的设置，目前只有中文与英文，themes文件夹下是一些样式，third-party文件夹下是一些第三方的插件，有代码高亮，截屏等
我在我的项目中新建了一个ueditorhelper.js文件，在文件中定义了一些ueditor常用的方法，以及对于ueditor的一些设置
在net目录下，我们只保留controller.ashx与config.json就可以了，同时把app_code中的代码拷贝到项目中的app_code中，同时添加对bin目录下json.net程序集的引用，config.json文件定义了一些设置，配置上传文件的一些要求以及上传到服务器保存的路径，在web.config文件中可以看到项目框架应至少为4.0
2.在页面中添加js引用，在页面中引用
添加zh-cn.js文件是要设置语言，防止自动识别语言错误而导致语言适配错误，ueditorhelper.js文件是一些常用的方法和编辑器设置的封装，查看的源代码，在其中有一段js代码
自定义的ueditorhelper.js文件中使用到了一些方法，并对第一行代码进行了修改，进行 ueditor富文本编辑器的设置
3.页面初始化
在需要添加富文本编辑器的地方加入以下代码：
<script type="text/plain"></script>
4.编辑内容时，页面的加载（ajax加载内容）
因为富文本编辑器只是生成的一段html代码，我们需要利用ajax动态加载内容，相比ckeditor来说，这是比较麻烦的地方，使用ckeditor可以直接使用封装好的服务器端控件，当然也可以不用服务器端控件利用ajax动态加载内容。
首先在页面加载时获取到新闻的id，然后再进行ajax查询，查询新闻封装在了一个handler中，向这个handler发起ajax请求，请求参数为新闻id，获取新闻，获取到之后，把新闻的内容设置给ueditor
我要评论
//实例化编辑器
//建议使用工厂方法geteditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用ue.geteditor('editor')就能拿到相关的实例
var ue = ue.geteditor('editor',{autoheightenabled: false});
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() {
ue.geteditor('editor');
}
function getallhtml() {
return ue.geteditor('editor').getallhtml();
}
function getcontent() {
return ue.geteditor('editor').getcontent();
}
function getplaintxt() {
return ue.geteditor('editor').getplaintxt();
}
function setcontent(isappendto) {
ue.geteditor('editor').setcontent('', isappendto);
}
function gettext() {
//当你点击按钮时编辑区域已经失去了焦点，如果直接用gettext将不会得到内容，所以要在选回来，然后取得内容
var range = ue.geteditor('editor').selection.getrange();
range.select();
return ue.geteditor('editor').selection.gettext();
}
function getcontenttxt() {
return ue.geteditor('editor').getcontenttxt();
}
function hascontent() {
return ue.geteditor('editor').hascontents();
}
function setfocus() {
ue.geteditor('editor').focus();
}
function deleteeditor() {
ue.geteditor('editor').destroy();
}
function getlocaldata() {
alert(ue.geteditor('editor').execcommand("getlocaldata"));
}
function clearlocaldata() {
ue.geteditor('editor').execcommand("clearlocaldata");
alert("已清空草稿箱")
}
以上所述就是本文的全部内容了，希望大家能够喜欢。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
网友评论