kindeditor运用没有出现效果，如何解决？？我就是改了相应地址和将textarea改为了TextBox

Posted 2023-05-17

<script type="text/javascript"> KindEditor.ready(function(K) //全局配置
var serverScriptPath = '/kindeditor-4.1.10/asp/';//服务端文件文件夹URL绝对路径,最后要有/
var editorPluginsPath = "/kindeditor-4.1.10/plugins/";//编辑器的插件文件夹URL绝对路径,最后要有/
//全局配置结束
var editor1 = K.create('TextBox[name="editor_id"]', //指定textarea //不要改动
uploadJson : serverScriptPath+'upload_json.asp',
fileManagerJson : serverScriptPath+'file_manager_json.asp',
cssPath :editorPluginsPath+'code/prettify.css',
emoticonsPath: editorPluginsPath + "/emoticons/images/", //不要改动结束
allowFileManager: true
);
);
</script>
<script charset="utf-8" src="../kindeditor-4.1.10/kindeditor.js" type="text/javascript"></script>
<script charset="utf-8" src="../kindeditor-4.1.10/lang/zh_CN.js" type="text/javascript"></script>

参考技术A 您好，1、在IE8/FF下均得不到值；
2、当点击KindEditor的全拼按钮切换到全屏模式输入时，再返回正常模式，可以得到值；
3、我用的是jQuery的点击事件提交表单的，提交，无法得到值；
4、直接用表单的提交按钮可以得到值。
下面以 KindEditor 4.x 版本为例说明，先贴上正确的代码：
KindEditor.ready(function(K)

K.create(‘textarea[name="content"]‘,
themeType: ‘simple’,
resizeType: 1,
uploadJson: ‘common/KEditor/upload_json.php’,
fileManagerJson: ‘common/KEditor/file_manager_json.php’,
allowFileManager: true,
//经测试，下面这行代码可有可无，不影响获取textarea的值
//afterCreate: function()this.sync();
//下面这行代码就是关键的所在，当失去焦点时执行 this.sync();
afterBlur: function()this.sync();
);
);

相关说明：
从上面的代码可以看到，解决方法在于最后一行代码，afterBlur: function()this.sync();，当失去焦点时执行 this.sync();
那么这个 this.sync(); 函数是干嘛的呢？简单的说：这个函数就是同步KindEditor的值到textarea文本框。
官方解释：
sync()
将编辑器的内容设置到原来的textarea控件里。

KindEditor解决上传视频不能在手机端显示的问题

KindEditor自带的上传视频生成的HTML代码为<embed>，在手机端并不支持。于是可以自己在控件里增加生成video标签相关代码。

 

参考https://www.jianshu.com/p/047198ffed92。。

 

然而对着修改后没有成功，可能是那里没有改对吧。依然生成的是<embed>。当时由于时间赶，于是用了个简单的办法：

 

原控件不变的情况下

 

1、上传的地方修改视频格式。仅上传支持手机格式的

//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "rmvb,mp4,mpg4,ogg,WebM");//原来支持下面多个格式，现在仅支持手机可以看的几个格式
//extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,mp4");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
extMap.put("htmlfvideo","swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb,mp4,ogg,WebM,mpg4");

2、在页面展示的地方，把展示的html富文本中embed直接替换成video。居然好使

 

var strR= str.replace(/&quot;/g,"‘").replace(/embed/g,"video controls");

 

当然这个方法指标不治本，等回头有空了，再研究一下，直接在控件里生成video的办法。

 

最后补一个，HTML富文本存数据库和展示的问题。

 

在网上看了好多各种转义。我的办法是这样的

 

1、整体不转义传到后台后。把引号替换成对应的形式。然后直接存入数据库

    public static final String filterHtml(String str){
        str=str.replaceAll(""", """);
        //str=str.replaceAll("\\&", "&amp;").replaceAll("<", "&lt;").replaceAll(""", "&quot;").replaceAll(">", "&gt;").replace("‘", "&apos;");
        return str;
    }

2、在数据库的数据形式为

3、展示页面的时候，把富文本数据中对应引号再转义回来

$(function() {
    var pbArticle = replaceStr1(‘${pbArticle}‘);//文章
    getInfoArticle(pbArticle);//初始化文章
    
    
});

function getInfoArticle(pbArticle){//初始化文章
    if(pbArticle!=‘‘){
        var html = "";
        var data = JSON.parse(pbArticle);
        $("#title").html(data.title);
        $("#pubTime").html(data.pubTime);
        $("#content").html(data.content);
        $("#articleId").val(data.id);
        if("${isColection}"=="0"){//o是1否
            $("#collectionId").attr("isColection","0");
            $("#collectionId").attr("src","<%=request.getContextPath() %>/app/fonts/images/star_red.png");
        }
    }
}
//这里就是转义文章，视频和引号的问题
function replaceStr1(str){
    debugger;
    var strR= str.replace(/&quot;/g,"‘").replace(/embed/g,"video controls");
    var strR1 = strR.replace(/s+/g," ");
    var strR2 = strR1.replace(/\\/g,"\\\\");
    console.info(strR2);
/*     var json = eval(strR2); */
    return strR2;
}

 

以上是关于kindeditor运用没有出现效果，如何解决？？我就是改了相应地址和将textarea改为了TextBox的主要内容，如果未能解决你的问题，请参考以下文章

KindEditor得不到textarea值的解决方法

KindEditor解决上传视频不能在手机端显示的问题

KindEditor编辑器添加图片时怎么没有"图片空间"按钮?

为KindEditor编辑器中的内容添加样式，使得自己定义前台页面显示效果与编辑器效果一致

为KindEditor编辑器中的内容增加样式，使得自定义前台页面显示效果与编辑器效果一致

使用kindeditor获取不到富文本框中的值