tinymce jquery版使用记载

引入文件


<script type="text/javascript" src="jquery.2.0.js"></script>
<script type="text/javascript" src="tinymce.js"></script>

初始化


$(function(){
	//------
	    var plugins = ["advlist", "autolink", "lists", "hr", "emoticons", "textcolor", "insertdatetime", "link", "table", "image", "fullscreen","preview","togglemore"];
        var toolbar_1 = [ "preview fullscreen  undo redo", "fontselect fontsizeselect", "bold italic underline strikethrough removeformat", "forecolor backcolor", "image","link","emoticons togglemore" ];
        var toolbar_2 = [ "alignleft aligncenter alignright alignjustify", "bullist numlist outdent indent", "table hr inserttime" ];
        tinymce.DOM.events.domLoaded = true;
		var editors = [];
        tinymce.init({
            selector: "textarea[class$=pageText]",
            theme: "modern",
            height: 400,
            resize: true,
            //是否可以鼠标拖动编辑器改变大小
            border_width: 1,
            //编辑器的边框宽度,alimail有两种情况,编辑写信是1,设置签名是没有边框的编辑器,所以设置了0
            target_list: false,
            convert_urls: false,
            //当你insertContent的时候,取消一些节点src的转换
            visual: false,
            //table的虚框是否显示,由于大文本设置虚框很耗性能,所以取消掉
            keep_values: false,
            //必须设置false用来提高性能
            forced_root_block: "div",
            //当空文本的时候,tinymce会设置一个根节点,默认是P,我们要改成div比较合理
            show_system_default_font: true,
            // 是否开启系统字体的探测,alimail这边是开启的,这个是alimail新增的功能。
            //        content_style : aym.global.HtmlTemplateCache.getTemplate('editorContentCss'),//alimail 这边是直接设置文本进去的,content_css是ajax加载的,效果一样,设置文本节省一个请求
            content_css: "././styles/editorContentCss.css",
            //        local_image : true,//alimail 插件使用的
            //        attach_owner : aym.global.UserData.getEmail(),//alimail 插件使用的
            plugins: plugins,
            toolbar_1: toolbar_1.join(" | "),
            toolbar_2: toolbar_2.join(" | "),
            setup : function(ed) {

            },
            i18n_messages: {
                //国际化
                //tinymce.js
                "default.font": "系统默认",
                "button.ok": "确定",
                "button.cancel": "取消",
                "button.bold": "粗体(Ctrl+B)",
                "button.italic": "斜体(Ctrl+I)",
                "button.underline": "下划线(Ctrl+U)",
                "button.strikethrough": "删除线",
                "button.outdent": "减少缩进",
                "button.indent": "增加缩进",
                "button.horizontal.line": "插入横线",
                "button.remove.format": "清除格式",
                "button.align.left": "左对齐",
                "button.align.center": "居中对齐",
                "button.align.right": "右对齐",
                "button.align.justify": "两端对齐",
                "button.undo": "撤销(Ctrl+Z)",
                "button.redo": "重做(Ctrl+Y)",
                "font.family.list": "宋体=simsun;黑体=simhei;楷体=kaiti;隶书=隶书;幼圆=幼圆;微软雅黑=微软雅黑" + ";" + "Arial=arial;Arial Black=arial black;Book Antiqua=book antiqua;Calibri=calibri;Comic Sans MS=comic sans MS;Courier New=courier new;Garamond=garamond;Georgia=georgia;Helvetica=helvetica;Impact=impact;Narrow=narrow;Sans Serif=sans-serif;Serif=serif;Symbol=@symbol;Tahoma=tahoma;Times New Roman=times new roman;Trebuchet MS=trebuchet MS;Verdana=verdana;Webdings=@webdings;Wide=wide;Wingdings=@wingdings",
                "button.font.family": "字体",
                "font.size.list": "10px;13px;14px;16px;18px;24px;32px;48px",
                "button.font.size": "字号",
                //advlist/plugin.js
                "button.number.list": "项目编号",
                "number.default": "默认",
                "number.lower.alpha": "小写英文字母",
                "number.lower.greek": "小写希腊字母",
                "number.lower.roman": "小写罗马字母",
                "number.upper.alpha": "大写英文字母",
                "number.upper.roman": "大写罗马字母",
                "button.bullet.list": "项目符号",
                "bullet.default": "默认",
                "bullet.circle": "圆形",
                "bullet.disc": "碟形",
                "bullet.square": "方形",
                //togglemore/plugin.js
                "button.toggle.more": "切换功能",
                //fullscreen/plugin.js
                "button.fullscreen": "全屏(Ctrl+Alt+F)",
                //insertdatetime/plugin.js
                "button.date.time": "日期/时间",
                //textcolor/plugin.js
                "button.text.color": "选择文字颜色",
                "button.background.color": "选择背景颜色"
            },
            //        default_style_fun : aym.util.getDefaultFontStyle, //alimail 使用的 ,获取默认字体styles的function
            //        render_empty_fun : aym.util.renderEmptyNodeWithDefaultFontStyle,//alimail 使用的 ,获取默认字体的div文本的function
            init_instance_callback: function() {
                //初始化成功后的回调,alimail这里做了比较多的事情,参考代码
                window.editor = this;
                //console.info(this.get(".mce-i-fullscreen"));
                var editor = this;
				editor.setContent(editor.getBody().innerHTML);
				
				console.log("Editor: " + editor.id + " is now initialized.");

                var oPanelItems = this.theme.panel.items();
                var oContainerElm = this.getContainer();
                var nContainerHeight = $(oContainerElm).children().height();
                var oBottomToolbar = oPanelItems[0].items()[1];
                oBottomToolbar.show();
                var fullscreen = oPanelItems[0].items()[0].items()[0];
                var style = fullscreen.getEl().style;
                $(fullscreen.getEl()).css({
                    "margin-right": "2px",
                    clear: "both",
                    "float": "right"
                });
                $(fullscreen.getEl()).on("click", function() {
                    $("#___xiuxiu-temp-container-div").hide();
                });
				
				editors.push(editor);
            },
            menu_class: "aym_scroll mce-y-scroll",
            //下拉菜单的样式,alimail这边主要是设置滚动条的样式,比如字体下拉菜单
            iframe_class: "aym_scroll aym_scroll_auto",
            //iframe的样式,alimail这边主要是设置滚动条的样式
            full_screen_compute_top_fun: function() {
                //全屏的时候,alimail这边页面最上面有广告的,所以全屏的时候不能挡住广告,所以搞个计算top的function
                var top = "0px", oWrapNode = $(".aym_page_wrap");
                if (oWrapNode.length > 0) {
                    top = oWrapNode.offset().top + "px";
                }
                return top;
            },
            cssFiles: [ "styles/skin.css", "styles/skin-ext.css" ]
        });

	//----
	$("#aa").click(function(){
		alert(getHtml("text2"));
		setHtml("text1", "这只是一个测试");
	});

	
	function getHtml(editorid) {
		if (editorid == "")
			return "";
		for (var i = 0; i < editors.length; i++) {
			var editor = editors[i];
			if (editor.id == editorid)
				return editor.getBody().innerHTML;
		}
		return "";
	
	}
	function setHtml(editorid, content) {
		for (var i = 0; i < editors.length; i++) {
			var editor = editors[i];
			if (editor.id == editorid)
				editor.getBody().innerHTML = content;
		}
	}
})
</script>

页面元素


<body>
  <textarea class="pageText" id="text1"></textarea>
  <textarea class="ddddpageText" id="text2">111111</textarea>
  <input type="button" value="adfasdfsadf" id="aa"/>
</body>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值