初入it职场,文本编辑器真的让人捉摸不透。最终在前端姐姐帮助下弄好了↓ 先在头部写好编辑器的各种功能的总体模型

<script>var editor;
KindEditor.ready(function(K) {editor = K.create('textarea[name="content"]', {
resizeType : 1,allowPreviewEmoticons : false,
items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist']});});</script>

在对应的地方(如:div)写好<textarea>框以及隐藏域 注:textarea是iframe里的,直接取值会取不到,所以加一个<input>隐藏域,

<textarea name="content" id="new_message" style="border-color: black;border:1px solid gray; background-color: white;height: 450px; width:784px; display:block;word-break: break-all;word-wrap: break-word; overflow-y:auto; visibility: hidden;" onkeyup="SwapTxt()" ></textarea>
<input type="hidden" name="crmNoticeManage.contentStr" id="noticecontentStr" value="">

取文本编辑器里面你的值。

var text = "";

$("#noticecontentStr").val(editor.html());
var bgvalue=$("#noticecontentStr").val();
alert(editor.html());    将textarea里面的值赋给隐藏域,再获取隐藏域的值,这样就取到输入文本框的值了。

这只是页面上需要写的代码,还需要引入js文件和css文件引入才可以实现,如果谁需要可以留言告诉我,我看到会立刻回复的。 效果为:QQ写邮件那种

html里文本编辑器如何制作呢?的更多相关文章

  1. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  2. C# RichTextBox 制作文本编辑器

    本文利用一个简单的小例子[文本编辑器],讲解RichTextBox的用法,仅供学习分享使用,如有不足之处,还请指正. Windows窗体中的RichTextBox控件用于显示,输入和操作格式化的文本, ...

  3. [前端随笔][JavaScript] 制作一个富文本编辑器

    写在前面 现在网上有很多现成的富文本编辑器,比如百度家的UEditor,kindeditor,niceditor等等,功能特别的多,API也很多,要去熟悉他的规则也很麻烦,所以想自己了解一下原理,做一 ...

  4. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  5. Bzoj1269 [AHOI2006]文本编辑器editor

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3678  Solved: 1380 Description 这些日子,可可不和卡卡一起玩了,原来可可正 ...

  6. Unix及类Unix系统文本编辑器的介绍

    概述 Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.VIM是纯粹的自由软件. Vim普遍被推崇为类Vi编辑器中最好的一个,事实上真正的劲敌来自Em ...

  7. 在Visual Studio 2012 Blue theme下使用Dark theme的文本编辑器颜色设置

    Visual Studio 2012 默认提供了3种color theme: blue,light,和dark.其中dark的文本编辑器颜色设定很爽,可是整个菜单项加上一些小的窗口如Find Resu ...

  8. 强大好用的"文本"编辑器

    1 editplugs 说明:EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本.HTML和程序语言的Windows编辑器,你甚至可以通 ...

  9. PHP接入umeditor(百度富文本编辑器)

    2015年6月28日 23:08:49 星期日 效果: 开搞;) 首先: 百度官网上下载 umeditor 简版的富文本编辑器(这里) 然后: 解压放到自己的项目中, 配置服务器, 保证能在浏览器端加 ...

随机推荐

  1. SpringMVC案例1——对User表进行CRUD操作

    ------------------------------------------------------------------web.xml--------------------------- ...

  2. JSBinding+SharpKit / 菜单介绍

  3. 轻量级分布式 RPC 框架

    @import url(/css/cuteeditor.css); 源码地址:http://git.oschina.net/huangyong/rpc RPC,即 Remote Procedure C ...

  4. MySQL存储过程调试工具-dbForge Studio for MySQL

    工具官网地址:http://www.devart.com/dbforge/mysql/studio/ 对于某些存储过程很多且复杂的SQL的应用,在短时间内要使得所有MySQL存储过程和函数正常运行,那 ...

  5. Windows 10的TPM模块到底是不是美国全球监控体系的奠基石?

    http://bbs.pediy.com/showthread.php?t=202638 http://www.zhihu.com/topic/19671262/newest 2015年3月18日,微 ...

  6. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. Nim游戏变种——取纽扣游戏

    (2017腾讯实习生校招笔试题)Calvin和David正在玩取纽扣游戏,桌上一共有16个纽扣,两人轮流来取纽扣,每人每次可以选择取1个或3个或6个(不允许不取),谁取完最后的纽扣谁赢.Cavin和D ...

  8. 函数调用方式__stdcall、__cdel

    函数调用方式关系对比如下: 关键字 调用规则 参数传递方向 返回 参数寄存器 堆栈的清除 __cdecl C语言 从右向左 EAX 无 调用者 __stdcall Win32标准  从右向左 EAX ...

  9. spring mvc 和 velocity整合

    java.lang.ClassNotFoundException: org.springframework.ui.velocity.VelocityEngineFactory 考虑是不是没有添加spr ...

  10. PHP使用mysqldump备份数据库(以及还原)

    导出数据实例如下: <?php $mdb_host = $g_c["db"][0]["managertool"]["host"]; / ...