第一种:KindEditor编辑器

  步骤一:加载相应的核心的文件

  下载地址:http://kindeditor.net/demo.php

<link rel="stylesheet" href="/Public/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="/Public/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/Public/kindeditor/lang/zh-CN.js"></script>

  步骤二:自己打包了一个函数

  

  //在线编辑器
function editor(selector){
var editor; var option={
resizeType : 1,
allowPreviewEmoticons : false,
allowImageUpload : false,
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],//这里可以配置你想要在编辑器栏目要显示的栏目。不配置会显示全部
afterBlur: function(){this.sync();}, }
KindEditor.ready(function(K) {
editor = K.create(selector,option);
return editor.html();
});
}

ps:我开始使用的最原始的简单的代码,只是创建了一个原型,所以说在提交数据数据的时候出现了找不到数据的情况,查看代码发现,编辑器会把表单元素替换成一个小页面。没找不到原来textarea ,所以要在配置里面加入下面的代码

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

  具体的作用的是,把编辑器中的数据同步到原来的表单元素中。这样在提交的时候就ok了。

  步骤三:布置前台表单

<textarea name="content" class="form-control" id="content"  placeholder="请输入课程详情..." rows="5">{$info.content}</textarea>

  步骤四:调用打包的js函数,有一点要注意,如果页面中的js过多,如果该函数放置的比较靠前又出现编辑器没有调用出来的情况,具体什么原因,没有弄明白,所以尽量调用的时候靠后放置。。

editor('#content');

  步骤五:本人使用的是TP。而在模板中获取数据输出的时候会出现HTML代码没有解析的情况。所以需要对数据进行过滤这里使用 html_entity_decode() 函数

{$list.content|html_entity_decode}

后续还会继续扩展其他在线编辑的使用,尽量用简单的描述让大家快速入门,这里也是我自己研究查询出来了。可能会有不足,欢迎大家指出不足...

												

在线编辑器的使用-KindEditor的更多相关文章

  1. jsp解决kindeditor在线编辑器struts图片上传问题

    1.下载 官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅 保留e ...

  2. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  3. 将kindeditor在线编辑器制作成smarty插件

    在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...

  4. kindeditor在线编辑器的使用心得

    1. 如何声明引用? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  5. .Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明

    Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...

  6. js组件在线编辑器插件、图表库插件、文件树插件

    在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...

  7. 基于thinkphp的在线编辑器kindeditor-v4.1.3

    首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面. 在目录lib目录 ...

  8. 基于ThinkPHP的在线编辑器调用

    开源的在线编辑器有很多,比如FCKEditor,UEditor,Kindeditor等,调用方式也都大同小异 下面列举UEditor在线编辑器插件在ThinkPHP里面的应用 1.Ueditor下载地 ...

  9. 在线编辑器Ckeditor (1) - php (30)

    在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结 ...

随机推荐

  1. solrCloud的两种部署方式

    solrcloud 的部署其实有两种方式可选,那么我们在实践开发中应该怎样选择呢? 第一种:当启动solr服务器时,内嵌的启动一个Zookeeper服务器,然后将这些内嵌的Zookeeper服务器组成 ...

  2. 策划了个.NET控件的案例大赛

    任何一个产品的普及,都有一个过程: 1. 对新事物充满热情.喜欢尝鲜.或后急迫需要的人首先成为产品用户.他们总数很少,但是是产品用户的第一批种子. 2. 思想比较开放.能接受新事物的人会成为第二批用户 ...

  3. Android_Activity生命周期

    通过前面一段时间的学习,我们很清楚我们的一系列操作都离不开的一个东西,就是我们的activity .接下来我们对 Activity 进行系统的总结. Activity 的四种基本状态 1.运行态(Ru ...

  4. C语言 值传递和地址传递

    不少同学在学到C语言的指针部分时感到很困惑,对经常提到的"值传递"和"地址传递"两个概念弄不 明白.实际上,因为地址本身也可以作为一个特殊的"值&qu ...

  5. 收藏网址 ios开源库

    http://www.csdn.net/article/2015-07-21/2825264-27-ios-open-source-libraries/1

  6. iOS UIButton setTitle与setAttributedTitle

    今天遇到一个问题,查了好久,终于解决. 我需要根据不同的条件给uibutton赋不同的值,由于字体要求有不同颜色变化,所以我选择了一个条件下用setTitle,另一个条件下用setAttributed ...

  7. react js 之生命周期

    react redux 结合是目前比较流行的前端开发框架,主要基于react 中的state 树为数据模型,借助redux 来控制 state 数据:下面直接从代码层面解析该框架中一个react 组件 ...

  8. 初学c# -- 学习笔记(五) winfrom无边框四周阴影

    刚用到这个功能,网上扯淡的东西太多了,都是2边阴影,还什么窗口叠加.ps作图啥的,什么玩意.还是老外实在,google找的,无边框窗体,四边透明阴影. public partial class For ...

  9. Dalvik指令格式

    一段Dalvik汇编代码由一系列Dalvik指令组成,指令语法由指令的位描述与指令格式 标识来决定.位描述约定如下: 每16位的字采用空格分隔开来每个字母表示四位,每个字母按顺序从高字节开始,排列到低 ...

  10. CC1310电源管脚

    对于48pin脚的CC1310而言,属于电源类的管脚如下: 上述电源类管脚的关系如下: 1 VDDS类管脚 VDDS类管脚包括VDDS.VDDS2.VDDS3和VDDS_DCDC四个管脚.其中VDDS ...