html5 angularjs富文本编辑器_轻量redactor js网页在线编辑器

最近又萌生一个想法、那就是把写博文的在线富文本编辑器换掉、总感觉那里不好看、终于在昨天找到一个很满意的文本编辑器、叫redactor 编辑器、官网上下载好像需要购买、不过到github上下载好像是免费的、由于该插件是外国人开发的、所以默认预言是英文、但是可以通过安装插件包来将语言转换为中文、只需下载zh_cn.js文件并引用到页面中（这个在我的Demo中已经包含了）然后将 lang设置为”zh_cn”即可

上图就是我准备替换掉目前我正在博客中使用的控件、下面给出简单的使用方法、包括获取富文本编辑器里面的代码、和设置编辑器里面的代码等

1、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>

<!-- Redactor is here -->
<link rel="stylesheet" href="redactor/redactor.css" />
<script src="redactor/redactor.min.js"></script>
<script src="redactor/zh_cn.js"></script>

2、在head标签中加入以下js代码

<script type="text/javascript">
$(document).ready(
    function()
    {
        $(´#redactor´).redactor({
            imageUpload: ´demo/scripts/image_upload.php´,//图片上件
            fileUpload: ´demo/scripts/file_upload.php´,//文件上件
            imageGetJson: ´demo/json/data.json´,//图片管理
            fixed: true,//固定工具栏
            lang: ´zh_cn´//支持中文
        });
    }
);
</script>

3、在body标签中加入以下格式的html代码

<div id="page">
    <textarea id="redactor_content" name="content">
        <h3>这里是标题</h3><p>这里面放内容</p></textarea>
    </textarea>
</div>

4、Redactor参数配置

这里贴出来的参数配置都来源于redactor.js 的源代码、基本上所有的配置都在这里了、大家可以根据自己的需要*的配置Redactor的样式和属性

this.opts = $.extend({

    iframe: false,
    css: false, // url

    lang: ´zh´,
    direction: ´ltr´, // ltr or rtl

    callback: false, // function
    keyupCallback: false, // function
    keydownCallback: false, // function
    execCommandCallback: false, // function

    plugins: false,
    cleanup: true,

    focus: false,
    tabindex: false,
    autoresize: true,
    minHeight: false,
    fixed: false,
    fixedTop: 0, // pixels
    fixedBox: false,
    source: true,
    shortcuts: true,

    mobile: true,
    air: false, // true or toolbar
    wym: false,

    convertLinks: true,
    convertDivs: true,
    protocol: ´http://´, // for links http or https or ftp or false

    autosave: false, // false or url
    autosaveCallback: false, // function
    interval: 60, // seconds

    imageGetJson: false, // url (ex. /folder/images.json ) or false

    imageUpload: false, // url
    imageUploadCallback: false, // function
    imageUploadErrorCallback: false, // function

    fileUpload: false, // url
    fileUploadCallback: false, // function
    fileUploadErrorCallback: false, // function

    uploadCrossDomain: false,
    uploadFields: false,

    observeImages: true,
    overlay: true, // modal overlay

}, options, this.$el.data());

5、Rddactor Api接口以及方法

这里贴出来的Api接口以及方法都来源于redactor.js 的源代码、基本上所有的配置都在这里了、大家可以根据自己的需要*的调用相关的方法

// API
$.fn.getObject = function()
{
	return this.data(´redactor´);
};

$.fn.getEditor = function()
{
	return this.data(´redactor´).$editor;
};

$.fn.getCode = function()
{
	return $.trim(this.data(´redactor´).getCode());
};

$.fn.getText = function()
{
	return this.data(´redactor´).$editor.text();
};

$.fn.getSelected = function()
{
	return this.data(´redactor´).getSelectedHtml();
};

$.fn.setCode = function(html)
{
	this.data(´redactor´).setCode(html);
};

$.fn.insertHtml = function(html)
{
	this.data(´redactor´).insertHtml(html);
};

$.fn.destroyEditor = function()
{
	this.each(function()
	{
		if (typeof $(this).data(´redactor´) != ´undefined´)
		{
			$(this).data(´redactor´).destroy();
			$(this).removeData(´redactor´);
		}
	});
};

$.fn.setFocus = function()
{
	this.data(´redactor´).$editor.focus();
};

$.fn.execCommand = function(cmd, param)
{
	this.data(´redactor´).execCommand(cmd, param);
};

Html5 redactor富文本编辑器源代码下载链接: redactor 编辑器 密码: xdr4