kindEditor富文本编辑器

用法参考:http://kindeditor.net/docs/usage.html

 一、使用

. 修改HTML页面

  1. 在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

  1. 在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create(‘#editor_id‘);
        });
</script>

. 获取HTML数据

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById(‘editor_id‘).value; // 原生API
html = K(‘#editor_id‘).val(); // KindEditor Node API
html = $(‘#editor_id‘).val(); // jQuery

// 设置HTML内容
editor.html(‘HTML内容‘);

5.配置项

items

配置编辑器的工具栏,其中”/”表示换行,”|”表示分隔符。

  • 数据类型: Array
  • 默认值:
[
        ‘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‘, ‘multiimage‘,
        ‘flash‘, ‘media‘, ‘insertfile‘, ‘table‘, ‘hr‘, ‘emoticons‘, ‘baidumap‘, ‘pagebreak‘,
        ‘anchor‘, ‘link‘, ‘unlink‘, ‘|‘, ‘about‘
]

二、常见问题

1.kindeditor配合requirejs使用时,ready失效

2.kindeditor异步渲染dom才出现富文本,ready失效

解析:

KindEditor.ready(function(K)) {
        K.create(‘#editor_id‘);
}

他自己提供的ready方法一般情况下都不会有问题。

首先,kindeditor.ready()方法想要在dom加载完成后创建富文本框,调用的是dom load.但并不支持异步。

问题1,使用requirejs引入的,在执行KindEditor.ready代码的时候dom结构早就完成了,动态插入的script代码不会再次触发DOMContentLoaded事件,因此KindEditor.ready注册的回调永远不会被执行,富文本框当然不会出现啦。解决方案很简单,不要使用KinkEditor.ready,直接KindEditor.create(...就好啦。

问题2,富文本编辑应是在异步请求之后渲染的,

三 、常用方法

afterfocus,self.editor.text(),self.editor.html()

KindEditor.ready(function(K) {
self.editor = K.create(‘textarea[name="intro"]‘, {
resizeType : 1,
items : [
‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
‘insertunorderedlist‘
],

afterfocus: function(){

},

afterCreate: function(){this.sync();},
afterBlur : function(){

this.sync();
self.isEditorEmpty();
}
});
});

isEditorEmpty: function(){
var self = this;
var _intro = self.editor.text();//获取编辑器内容
if(!$.trim(_intro)){
$(‘.intro-error‘).text(‘请输入公司简介‘);
return false;
}else{
$(‘.intro-error‘).text(‘‘);
return true;
}
},

时间: 2024-12-21 15:51:13

kindEditor富文本编辑器的相关文章

coding++:快速构建 kindeditor 富文本编辑器(一)

此案例 demo 为 SpringBoot 开发 1.官网下载相关资源包:http://kindeditor.net/down.php 2.编写页面(引入相关JS) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>kindeditor富文本编辑器</title> <link href="/

kindEditor 富文本编辑器 使用介绍

第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> 2 <scrip

ASP.NET网站使用Kindeditor富文本编辑器配置步骤

1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下  3.在网页中加入(ValidateRequest="false") 1 <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest=

django项目中使用KindEditor富文本编辑器

先从官网下载插件,放在static文件下 前端引入 <script type="text/javascript" src="/static/back/kindeditor/kindeditor-all.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#content', { {# 加上这句话可以使jquery能获取到富

KindEditor富文本编辑器, 从客户端中检测到有潜在危险的 Request.Form 值

在用富文本编辑器时经常会遇到的问题是asp.net报的”检测到有潜在危险的 Request.Form 值“一般的解法是在aspx页面   page  标签中加上 validaterequest='false'  但这样的话   既不安全 也不一定有效,好吧,说说我的解决方法吧, 就是在提交的时候不让富文本的内容提交,先是把内容编码给到一个隐藏标签,然后给富文本赋空值. 1 KindEditor.ready(function (K) { 2 Editor = K.create('#txtIntro

KindEditor - 富文本编辑器 - 使用+上传图片

效果: 项目结构: Extend:存放各种扩展 BlogAction.class.php:博文模块 addBlog.html:添加博文页面 Html代码: 只是用一个核心文件也可,也可以加入其他js文件,比如语言包,扩展包. addBlog.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

MVC中提交包含HTML代码的页面处理方法(尤其是在使用kindeditor富文本编辑器的时候)

针对文本框中有HTML代码提交时,mvc的action默认会阻止提交,主要是出于安全考虑.如果有时候需求是要将HTML代码同表单一起提交,那么这时候我们可以采取以下两种办法实现: 1.给Controller的Action方法打上标记 [ValidateInput(false)](针对特定的action) 2.在web.config配置文件中<system.web>节中加入<httpRuntime requestValidationMode="2.0"/>(针对全

vue中使用kindeditor富文本编辑器2

第一步,下载依赖 yarn add kindeditor 第二步,建立kindeditor.vue组件 <template> <div class="kindeditor"> <textarea :id="id" name="content" v-model="outContent"></textarea> </div> </template> <s

domino集成kindeditor富文本编辑器