kindeditor

这几天有个工作需求，就是在富文本输入区域（kindeditor）可以有@功能，能够容易提示用户名的（像在qq群组@人一样）。在网上找了一个叫bootstrap-suggest的插件，却不能满足我的需求，于是我决定在该插件上改良，主要是下面几点： 1. @内容的输入，能够匹配多个属性值。 2. 选中列表值后，是成块插入kindeditor的（方便删除，也利于区分文本）。 3. 修正输入偶数关键字@功能失效问题。 前言 在一开始，我用bootstrap-suggest（https://github.com/lodev09/bootstrap-suggest），这个插件能够实现以下效果。 但是我发觉有几个问题： 1. 只能单一匹配（可能存在需要匹配拼音或中文）。 2. 偶数位的@功能会失效。 3. 选取值后，只是简单文本（没有qq一样那种成块效果）。 jquery-kindeditor-suggest 由于我不想重复造轮子，于是决定在上面插件做调整，以满足我的需求，有几个关键地……

指令 该指令的作用是dom渲染后触发，因为非vue的插件有的是dom必须存在的情况下才可以执行 Vue.directive('loaded-callback', { inserted: function (el, binding, vnode) { binding.value(el, binding, vnode) }}) 安装kindeditor npm install kindeditor kindeditor组件 template div class="kindeditor" textarea class="form-control" ref="kindeditor" v-model="localValue" name="content" v-loaded-callback='initKindeditor'/textarea /div/templatescriptimport '../../../../../node_modules/kindeditor/kindeditor-all.js'import '../../../../../node_modules/kindeditor/lang/zh-CN.js'import '../../../../../node_modules/kindeditor/themes/default/default.css'export default { name: 'kindeditor', props: ['options', 'value'], data () { return { localValue: '' } }, watch: { localValue: 'updateValue', value: 'setDefault' }, created () { this.setDefault() }, methods: { initKindeditor () { var _this = this // 默认参数 var options = { uploadJson: 'upload/image', width: '100%', afterCh……

本文实例讲述了YII视图整合kindeditor扩展的方法。分享给大家供大家参考，具体如下： 比较喜欢用kindeditor,YII上的版本比较旧,所以自己重新整了个扩展 先在protected\extensions下创建KEditor文件夹用来放文件，keSource里放kindeditor的源文件，然后建三个类KEditor、KEditorManage和KEditorUpload，KEditor是扩展的主文件，KEditorManage是用来浏览服务器文件的，KEditorUpload是用来示例接收上传文件的， KEditor代码 ?phpclass KEditor extends CWidget{ /* * TEXTAREA输入框的属性，保证js调用KE失败时，文本框的样式。 */ public $textareaOptions=array(); /* * 编辑器属性集。 */ public $properties=array(); /* * TEXTAREA输入框的name，必须设置。 * 数据类型：String */ public $name; /* * TEXTAREA的id，可为空 */ public $id; public $model; public $baseUrl; public static function getUploadPath(){ $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.'keSource'; if(isset(Y……

最近在使用OneThink中自带的kindeditor编辑器的时候，保存草稿的时候，输入的内容总是不能够保存到后台。如下图 通过分析URL，发现原来content值为空 明明有值，为什么是空呢？但是如果不采用异步方式提交表单的话，则可以获取到输入值。开始一直以kindeditor为是ajax的问题，最后，查阅资料才知道原来是kindeditor的问题。因为在异步提交数据的时候，并没有将kindeditor中输入的值，同步到对应的文本框上。正确的做法是，当kindeditor失去焦点的时候，就进行同步操作。 修改Addons/EditorForAdmin/content.html文件，添加标注的代码即可。 经测试，okey了。 以上这篇解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。 ……

KindEditor简介： KindEditor是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor使用JavaScript编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。 在Django Admin当中加入KindEditor，这比干巴巴的textarea好多了。加入之后的效果如下： 1、设置static文件路径 KindEditor是用JavaScript编写的，这属于static files，因此需要为Django设置static路径。 首先在工程目录下新建static文件夹，这里要注意的是千万不要在my_app/下创建static文件夹作为static文件存放的目录, 这会导致Django无法搜索到自己的static 文件。 创建后好，在settings中配置static文件目录。添加以下代码 STATIC_URL = '/static……

html代码： pinput type="hidden" id="url1" name="IDCardPicture1" value="" / input type="button" id="image1" value="选择图片" //pdiv id="J_imageView1"/div JS代码： K('#image1').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({showRemote : false,imageUrl : K('#url1').val(),clickFn : function(url, title, width, height, border, align) {$("#licensecheck").html("");var div = K('#J_imageView1');div.html('');div.append('img src="' +url + '"');K('#url1').val(url);editor.hideDialog();}});});}); 以上这篇Kindeditor单独调用单图上传增加预览功能的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。 ……