精华内容
下载资源
问答
  • kind富文本编辑器
    2021-02-06 23:12:57

    ## 1、页面

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://"

    + request.getServerName() + ":" + request.getServerPort()

    + path + "/";

    %>

    My JSP 'kind.jsp' starting page

    KindEditor.ready(function(K) {

    window.editor = K.create('#editor_id');

    });

    内容:

    2、附加kind

    KindEditor.ready(function(K) {

    var editor1 = K.create('textarea[name="content1"]', {

    cssPath : '${path }/kindeditor/plugins/code/prettify.css',

    uploadJson : '${path }/kindeditor/jsp/upload_json.jsp',

    fileManagerJson : '${path }/kindeditor/jsp/file_manager_json.jsp',

    allowFileManager : true,

    afterCreate : function() {

    var self = this;

    K.ctrl(document, 13, function() {

    self.sync();

    document.forms['example'].submit();

    });

    K.ctrl(self.edit.doc, 13, function() {

    self.sync();

    document.forms['example'].submit();

    });

    }

    });

    prettyPrint();

    });

    内容:

    ## 3、获取富文本的内容,修改前获取值

    //获取kindeditor的内容

    var content = $(document.getElementsByTagName("iframe")

    [0].contentWindow.document.body).html()

    更多相关内容
  • kind 富文本编辑器jsp

    2010-03-22 11:24:20
    jsp 富文本编辑器,很好用在项目中创建一个image的文件夹使用很简单呵呵,解压密码是 fuhuo
  • 1. 下载编辑器 下载链接:http://www.kindsoft.net/down.php 2. 编辑器部署 将下载好的压缩包解压后放到网站程序目录里 3.在html页面里部署编辑器 创建HTML文本域 <textarea name="content" id=...

    1. 下载编辑器

          下载链接: 下载 - KindEditor - 在线HTML编辑器

    2. 编辑器部署

    将下载好的压缩包解压后放到网站程序目录里

     

     3.在html页面里部署编辑器

    创建HTML文本域

      <textarea name="content" id="Contents" style="width:600px;height:450px;"></textarea>

     在页面引入js文件

    <script src="/static/kindeditor/kindeditor-all-min.js"></script>
    <script src="/static/kindeditor/lang/zh-CN.js"></script>

    初始化编辑器

    <script>
        //编辑器
        var KE;
        KindEditor.ready(function (K) {
            KE = K.create('#Contents', {
                allowFileManager: true, //浏览图片空间
                filterMode: false, //HTML特殊代码过滤
                afterBlur: function () { this.sync(); }, //编辑器失去焦点(blur)时执行的回调函数(将编辑器的HTML数据同步到textarea)
                afterUpload: function (url, data, name) { //上传文件后执行的回调函数,必须为3个参数
                    if (name == "image" || name == "multiimage") { //单个和批量上传图片时
                        var img = new Image(); img.src = url;
                        img.onload = function () { //图片必须加载完成才能获取尺寸
                            if (img.width > 100) {
                                KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>', '<img src="' + url + '" width="100" height="100px"/>'))
                                //KE.html(KE.html().replace('<img src="' + url + '" width="300"/>', '<img src="' + url + '" width="300"/>'))
                            }
    
                        }
                    }
                }
            });
            KindEditor.create('#Contents', { allowImageUpload: false, resizeType: 1, width: "600px", height: "300px" });
        });
    </script>

    展开全文
  • 关于kindeditor中如何设置富文本编辑器中的内容 KindEditor.html(id, value); 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: ...

    关于kindeditor中如何设置富文本编辑器中的内容
    KindEditor.html(id, value);
    我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:

    1. 全新的界面设计 ,将会带来全新的写作体验;
    2. 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
    3. 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
    4. 全新的 KaTeX数学公式 语法;
    5. 增加了支持甘特图的mermaid语法1 功能;
    6. 增加了 多屏幕编辑 Markdown文章功能;
    7. 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
    8. 增加了 检查列表 功能。

    功能快捷键

    撤销:Ctrl/Command + Z
    重做:Ctrl/Command + Y
    加粗:Ctrl/Command + B
    斜体:Ctrl/Command + I
    标题:Ctrl/Command + Shift + H
    无序列表:Ctrl/Command + Shift + U
    有序列表:Ctrl/Command + Shift + O
    检查列表:Ctrl/Command + Shift + C
    插入代码:Ctrl/Command + Shift + K
    插入链接:Ctrl/Command + Shift + L
    插入图片:Ctrl/Command + Shift + G

    合理的创建标题,有助于目录的生成

    直接输入1次#,并按下space后,将生成1级标题。
    输入2次#,并按下space后,将生成2级标题。
    以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

    如何改变文本的样式

    强调文本 强调文本

    加粗文本 加粗文本

    标记文本

    删除文本

    引用文本

    H2O is是液体。

    210 运算结果是 1024.

    插入链接与图片

    链接: link.

    图片: Alt

    带尺寸的图片: Alt

    居中的图片: Alt

    居中并且带尺寸的图片: Alt

    当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

    如何插入一段漂亮的代码片

    博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

    // An highlighted block
    var foo = 'bar';
    

    生成一个适合你的列表

    • 项目
      • 项目
        • 项目
    1. 项目1
    2. 项目2
    3. 项目3
    • 计划任务
    • 完成任务

    创建一个表格

    一个简单的表格是这么创建的:

    项目Value
    电脑$1600
    手机$12
    导管$1

    设定内容居中、居左、居右

    使用:---------:居中
    使用:----------居左
    使用----------:居右

    第一列第二列第三列
    第一列文本居中第二列文本居右第三列文本居左

    SmartyPants

    SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

    TYPEASCIIHTML
    Single backticks'Isn't this fun?'‘Isn’t this fun?’
    Quotes"Isn't this fun?"“Isn’t this fun?”
    Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

    创建一个自定义列表

    Markdown
    Text-to- HTML conversion tool
    Authors
    John
    Luke

    如何创建一个注脚

    一个具有注脚的文本。2

    注释也是必不可少的

    Markdown将文本转换为 HTML

    KaTeX数学公式

    您可以使用渲染LaTeX数学表达式 KaTeX:

    Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n1)!nN 是通过欧拉积分

    Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t &ThinSpace; . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=0tz1etdt.

    你可以找到更多关于的信息 LaTeX 数学表达式here.

    新的甘特图功能,丰富你的文章

    Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
    • 关于 甘特图 语法,参考 这儿,

    UML 图表

    可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::

    张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

    这将产生一个流程图。:

    链接
    长方形
    圆角长方形
    菱形
    • 关于 Mermaid 语法,参考 这儿,

    FLowchart流程图

    我们依旧会支持flowchart的流程图:

    Created with Raphaël 2.2.0 开始 我的操作 确认? 结束 yes no
    • 关于 Flowchart流程图 语法,参考 这儿.

    导出与导入

    导出

    如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

    导入

    如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
    继续你的创作。


    1. mermaid语法说明 ↩︎

    2. 注脚的解释 ↩︎

    展开全文
  • THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND ...

    A rich text editor sample (based on summernote)

    Features

    Bold

    Italic

    Underline

    Strike-through

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5

    Heading 6

    Paragraph

    Quote

    Ordered List

    Unordered List

    Code

    Horizontal Rule

    Link

    Image

    Justify Center

    Justify Full

    Justify Left

    Justify Right

    Subscript

    Superscript

    Font Name

    Font Size

    Indent

    Outdent

    Undo

    Redo

    Screenshot

    cb1f0cfd8757f7eed49950293c218f7b.gif

    Screenshot_2.gif

    db6a6470589c8f53a5c1aa396b38dd8d.png

    Screenshot_3.png

    License

    The MIT License (MIT)

    Copyright © 2017 Even201314,

    Permission is hereby granted, free of charge, to any person obtaining a copy

    of this software and associated documentation files (the "Software"), to deal

    in the Software without restriction, including without limitation the rights

    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

    copies of the Software, and to permit persons to whom the Software is

    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in

    all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

    THE SOFTWARE.

    展开全文
  • Html富文本编辑器

    千次阅读 2021-01-14 03:34:58
    本文推荐两款简单的富文本编辑器【KindEditor,NicEdit】用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正。概述这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端...
  • KindEditer介绍和使用详情 目录 一、KindEditer介绍 ...2、部署编辑器, 3、引入对应的kindeditor-all.js文件 4、 添加多行文本框textarea,id为editor_id 5、为id为editor_id的文本框创建kin...
  • 近期项目中需要开发一个兼容PC和移动端的富文本编辑器,其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器,桌面端的很多,移动端的几乎没有。桌面端以UEditor为代表。但是我们并不打算考虑兼容性,所以...
  • 在做开发的时候,想使用富文本编辑器,小灰灰找了好几个富文本编辑器最终选择了kindeditor编辑器,轻量级的,文件不是很大解压之后也才1M多,而且小灰灰喜欢kind带的清除格式以及一键排版功能,个人觉得比ueditor...
  • kindEditor富文本编辑器

    2020-12-21 13:57:35
    问题2,富文本编辑应是在异步请求之后渲染的, 三 、常用方法 afterfocus,self.editor.text(),self.editor.html() KindEditor.ready(function(K) { self.editor = K.create('textarea[name="intro"]', { ...
  • JavaScript实现富文本编辑器

    千次阅读 2020-01-15 09:49:52
    近期项目中需要开发一个兼容PC和移动端的富文本编辑器,其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器,桌面端的很多,移动端的几乎没有。桌面端以UEditor为代表。但是我们并不打算考虑兼容性,所以...
  • 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。 通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法...
  • 原标题:前端程序员福利,6款轻量级富文本编辑器1.国产富文本编辑wangEditor 基于java和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费,样式可自定义,菜单栏可以自定义配置。下载:直接下载:...
  • 获取UEditor 从 官网下载UEditor源码,下载的源码中并没有ueditor.all.js文件。需要使用grunt来把源码包打包成部署版本(含有ueditor.all.js 文件) 安装 node.js 全局安装grunt (npm install -g grunt-cli) ...
  • 只是现在的这个对象是富文本编辑器的document对象) /** * 当富文本编辑器加载成功后,针对它的dom对象,重写粘贴事件,只处理图片 * 解决粘贴图片转为Base64显示 * ue 是你初始化富文本编辑器的对象 */ this.editor...
  • 导入 kindeditor 资源文件添加 Textarea 文本域js 初始化 kindeditor 富文本编辑kindeditor 数据同步ego-rpc 商品添加功能实现3.1Mapper 数据访问层说明3.2ItemService 接口添加方法/** * 保存商品信息 * @param ...
  • python3使用DjangoUeditor,富文本编辑器1,下载DjangoUeditor下载地址:[https://github.com/twz915/DjangoUeditor3/](https://github.com/twz915/DjangoUeditor3/)安装方式:1,直接下载github整个源码包,在...
  • 我的rails博客的搭建过程中,感觉最开始写的的输入框是在是太丑了,然后发现网上有对rails非常友好的kindeditor编辑器。所以本着DRY原则,放到自己的项目中。ruby on rails一. 安装kindeditor一共五步走。第一步,将...
  • 在真实的工程开发中,一个富文本编辑器,不是仅仅可以编辑显示,还需要处理富文本的转换与解析,方便传输与存储。一般来说,HTML文本是比较理想的网络传输格式。如何将安卓的span式富文本和HTML文本之间进行互转,是...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种...//判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
  • 第一步,下载依赖yum install kindeditor第二步,建立kindeditor.vue组件import '../../node_modules/kindeditor/kindeditor-all.js'import '../../node_modules/kindeditor/lang/zh-...
  • software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing...
  • 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。 通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法...
  • nextSpanTransition(int start, int limit, Class type),这个方法会在你指定的文本范围内,返回下一个你指定的Span类型的开始位置,与getSpan方法类似,但属于迭代类型,通过这个方法,我们可以遍历指定的Span...
  • Terminology&colon; SandboxIn Comupter Secuity: from ...炉石传说 C&num; 开发笔记 (源代码整理公开)源代码已经整理过了,去除了不需要的项目. 注意:以前文章中出现过的Git...
  • 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种...//判断剪贴板的内容是否包含文本 //首先解释一下为什么要判断文本是不是为空 //在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种t
  • 富文本编辑器发布文章的时候,有这样一个需求,就是直接使用qq的快捷键截图,然后直接在富文本编辑器把图片粘贴了,然后图片就可以自动上传到服务器,我测试了一些富文本有的是可以实现了的,但summernote就没有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 512
精华内容 204
关键字:

kind富文本编辑器