初入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. dk.internal.org.objectweb.asm.Opcodes.IF_ACMPNE

    http://cr.openjdk.java.net/~hannesw/8008351/webrev/src/jdk/nashorn/internal/codegen/Condition.java.s ...

  2. OrmLite数据库的使用方法

    第一步:导入架包     1.将orm的两个支持包放入project视图下的你的工程的lib目录里(这两个JAR包网上都有,GitHub上最新)     2.添加依赖:在file文件目录下的proje ...

  3. angular+bootstrap+MVC 之二,模态窗

    本例实现一个bootstrap的模态窗 1.HTML代码 <!doctype html> <!--suppress ALL --> <html ng-app=" ...

  4. bower安装使用入门详情

    bower安装使用入门详情   bower自定义安装:安装bower需要先安装node,npm,git全局安装bower,命令:npm install -g bower进入项目目录下,新建文件1.tx ...

  5. HTML5 直播协议之 WebSocket 和 MSE

    当前为了满足比较火热的移动 Web 端直播需求, 一系列的 HTML5 直播技术迅速的发展了起来. 常见的可用于 HTML5 的直播技术有 HLS, WebSocket 与 WebRTC. 今天我要向 ...

  6. sql server 2008 r2 报错

    无法启动服务,要求检查数据库和windows日志 查看发现报错 The SQL Server failed to initialize VIA support library [QLVipl.dll] ...

  7. 使用 Sublime、WebStorm 开发 Jade

    Sublime.WebStorm (PhpStorm) 是前端开发者的得力工具,开发 Jade 也不例外. 在配置这些软件的 Jade 开发环境前,请先在系统中安装 Node.js 和 Jade : ...

  8. SQL中ISNULL用法示例

    ISNULLSQL查询示例SELECT ISNULL    使用指定的替换值替换 NULL. 语法       :ISNULL ( check_expression , replacement_val ...

  9. IIS配置文件路径

    C:\Windows\System32\inetsrv\config\applicationHost.config

  10. Chap6: question 46 - 48

    46. 求 1+2+ … +n. 要求:不用乘除法.for.while.if.else.switch.case 以及条件判断语句(A?B:C). a. 利用构造函数求解 #include <io ...