初入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. Sublime Text 2 安装Package Control和插件的两种方法

    缘起 前几天系统刚刚还原了,重装完Sublime Text2再安装插件的时候可能是由于公司的网络环境的问题,各种报错,将解决方法记录下来.系统环境:Win7 x64 + Sublime Text2. ...

  2. win10-golang环境变量设置

    安装go 打开环境变量 添加GOPATH 添加到path 检验 在命令指示符下->go version or go env 配置 在F:\GOPATH下放置C:\go\bin->新建pkg ...

  3. node环境配置安装(nvm)

    在我们前端开发工程中,很多繁琐机械的操作都是会慢慢的被抽离出来的,当我们为dom操作和浏览器兼容性感到厌烦时,jQuery出现了,当我们不想再去理会dom的添加删除等的时候,angularJS来解救我 ...

  4. @ResponseBody 返回中文乱码问题解决 spingmvc

    <!-- UTF8解决乱码问题 --> <bean class="org.springframework.web.servlet.mvc.method.annotation ...

  5. makefile自动生成依赖关系

    手工编写依赖关系不仅工作量大而且极易出现遗漏,更新也很难及时,修改源或头文件后makefile可能忘记修改.为了解决这个问题,可以用gcc的-M选项自动生成目标文件和源文件的依赖关系.-M选项会把包含 ...

  6. WCF数据通讯

    Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NET Fra ...

  7. 手机端的click

    一:click事件的封装 手机端的click事件不是太好用, 1.点击会有延迟, 2.会出现一个灰色区域 就想到了用touch事件代替. touch事件有touchstart,touchmove,to ...

  8. oracle10g在rh6上安装缺少libXtst*的包导致不能出OUI

    由于测试需要,今天在linux6.0上装了下oracle10g,确实是知道oracle10g已经不支持redhat5.0以后的版本了,但是根据自己以往在redhat5.0上装oracle的经验就鲁莽下 ...

  9. TFS 2010 如何删除Collection

    在cmd  中 cd 到 目录 c:\Program Files\Microsoft Team Foundation Sever 2010\Tools 执行下面的命令: TfsConfig colle ...

  10. loadrunner 联机跑负载 win server 2012 r2环境部署

    下列为在实际loadrunner 联机跑负载 win server 2012 r2环境部署中进行的成功案例,遇到的问题和解决方法,仅作整理和记录,如转载请署名及原文地址. ps:欢迎加q群872584 ...