如何引用KindEditor编辑器,并解决取值问题

废话不多说,如何使用KindEditor,如何取解决取值问题,方法如下:


                一、如何使用:页面引用下面代码,即可使用KindEditor自带的样式。

                                          注意:红色加粗的content   为输入框名称,统一name名

                二、如何解决取值问题:荧光色加粗部分为重点,afterBlur: function(){this.sync();},

                                              当失去焦点时执行 this.sync();那么这个 this.sync(); 函数是干嘛的呢?

                                                 简单的说这个函数就是同步KindEditor的值到textarea文本框。

                                                 此时使用:$("#content").val 即可取值。


<!-- CKEditer用 开始-->
    <link rel="stylesheet" charset="utf-8" href="<%=basePath%>/kindeditor-4.1.7/themes/default/default.css" />
<link rel="stylesheet" charset="utf-8" href="<%=basePath%>/kindeditor-4.1.7/plugins/code/prettify.css" />
<script type="text/javascript" charset="utf-8" src="<%=basePath%>/kindeditor-4.1.7/kindeditor.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>/kindeditor-4.1.7/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>/kindeditor-4.1.7/plugins/code/prettify.js"></script>

<script>
KindEditor.ready(function(K) {
K.create('textarea[name="content"]', {
cssPath : '/kindeditor-4.1.7/plugins/code/prettify.css',
afterBlur: function(){this.sync();}
});
});
</script>

<textarea name="content" id="content" />
<!-- CKEditer用 结束-->

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
问题的原因是因为 KindEditor 编辑器默认会对特殊字符进行转义,而这些特殊字符包括双引号(")等字符,所以微软雅黑字体名称中的双引号被转义成了 "。 解决方法是在编辑器的配置中设置一个参数,这个参数可以告诉编辑器不要对特殊字符进行转义。具体操作步骤如下: 1. 打开 KindEditor 的配置文件,一般是在 kindeditor/config.js 中。 2. 在配置文件中找到 items 数组,这个数组包含了所有的编辑器工具栏按钮,找到 fontname 这个按钮的配置项。 3. 在 fontname 的配置项中添加一个 unselectable 参数,设置为 false。这个参数的作用是告诉编辑器不要对选中的内容进行转义。 4. 保存配置文件并重新加载页面,此时编辑器应该可以正常显示微软雅黑字体了。 示例代码: ```javascript items: [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ], fontname: { label: '字体', name: 'fontname', unselectable: false, // 添加这个参数 dropPanel: { width: 130, items: [ { name: '宋体', value: '宋体,SimSun' }, { name: '黑体', value: '黑体, SimHei' }, { name: '楷体', value: '楷体, SimKai' }, { name: '微软雅黑', value: '微软雅黑, Microsoft YaHei' }, { name: '仿宋', value: '仿宋, FangSong' }, { name: 'Arial', value: 'Arial, Helvetica, sans-serif' }, { name: 'Arial Black', value: '"Arial Black", Gadget, sans-serif' }, { name: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' }, { name: 'Courier New', value: '"Courier New", Courier, monospace' }, { name: 'Georgia', value: 'Georgia, serif' }, { name: 'Impact', value: 'Impact, Charcoal, sans-serif' }, { name: 'Lucida Console', value: '"Lucida Console", Monaco, monospace' }, { name: 'Lucida Sans Unicode', value: '"Lucida Sans Unicode", "Lucida Grande", sans-serif' }, { name: 'Tahoma', value: 'Tahoma, Geneva, sans-serif' }, { name: 'Times New Roman', value: '"Times New Roman", Times, serif' }, { name: 'Trebuchet MS', value: '"Trebuchet MS", Helvetica, sans-serif' }, { name: 'Verdana', value: 'Verdana, Geneva, sans-serif' } ] } }, ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值