html里文本编辑器如何制作呢?

时间:2024-11-29 22:34:31

初入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写邮件那种