富文本编辑器NicEdit的使用

你的名字 2022-05-21 00:19 307阅读 0赞

**调用nicEdit.js和一张nicEdit所需要的icon图**

<script type="text/javascript" src="/js/nicEdit.js"></script>
    <script type="text/javascript">
        bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
    </script>

**html创建一个textarea **

<html>
    <div class='zl-item lw-con-mes-other'>
            <div class='tex-box'>
                <h3 class='zl-title'>具体计划书</h3>
                <textarea name="prospectus" style="width: 100%; height: 150px;" id="prospectus" form="addSyzrsq">
                </textarea>
            </div>
        </div>
    </html>

获取内容包含标签。

通过id获取textarea值

如果要一次性提交要后台，可先通过id获取，然后将其放入隐藏域中传递

![70][] ![70 1][]

通过id获取文本值

var c = nicEditors.findEditor('prospectus').getContent()

该编辑器可以保存样式等内容，样式可自己随意调；所以需要进行转义解决，如果不转义会出现乱码情况；

转义前：

<h1 style=&\#34;text-align: center;&\#34;><span style=&\#34;background-color: rgb&\#40;153, 153, 153&\#41;;&\#34;>654654654654</span></h1>

转义后：

<h1 style="text-align: center;"><span style="background-color: rgb(153, 153, 153);">654654654654</span></h1>

转义代码网上好多，给大家推荐一个：https://www.cnblogs.com/yangzhilong/p/5667165.html

[70]: https://img-blog.csdn.net/20180626154028738?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220521/4e0fef5bd53647f7aae874329004eb4a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，307人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器Quill的使用

需求来源于产品和UI 快速开始  <link href="https://cdn.quilljs.

今天药忘吃喽~/ 2022年10月07日 13:55/ 0 赞/ 199 阅读

相关 vue中使用富文本编辑器

> 前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器先敬上官网：[http://www.wangeditor.c

柔情只为你懂/ 2022年09月12日 07:56/ 0 赞/ 301 阅读

相关富文本编辑器的使用

富文本编辑器在系统中经常会用到，具体用法如下：一、引入css，js： <linkhref="/js/kindeditor-4.1.10/themes/defa

比眉伴天荒/ 2022年06月03日 03:42/ 0 赞/ 294 阅读

相关富文本编辑器NicEdit的使用

调用nicEdit.js和一张nicEdit所需要的icon图 <script type="text/javascript" src="/js/nicEdit.js"

你的名字/ 2022年05月21日 00:19/ 0 赞/ 308 阅读

相关 kindeditor富文本编辑器的使用

百度下载kindeditor 解压放至项目中可以删除一些不必要的文件夹然后在页面引入 <link href="kindeditor-4.1.10/themes/

深藏阁楼爱情的钟/ 2022年05月17日 09:40/ 0 赞/ 378 阅读

相关 HTML富文本编辑器wangEditor的使用

文章目录官网项目结构源码全屏插件 CSS JS 效果

叁歲伎倆/ 2022年04月03日 05:45/ 0 赞/ 492 阅读

相关富文本编辑器

（1）[UEditor][] （2）[kindEditor][] （3）[summernote][] 另本篇文章有更多富文本编辑器推荐： [https://www

你的名字/ 2022年03月19日 05:52/ 0 赞/ 451 阅读

相关富文本编辑器的使用

[https://cloud.tencent.com/developer/article/1141421][https_cloud.tencent.com_developer_

约定不等于承诺〃/ 2021年12月14日 12:13/ 0 赞/ 490 阅读

相关 Vue - 全局使用富文本编辑器

1. vue 安装 vue-quill-editor npm install vue-quill-editor --save 2. main.js中全局引入，注册为

ゞ浴缸里的玫瑰/ 2021年07月25日 16:06/ 0 赞/ 587 阅读

相关富文本编辑器Editormd的配置使用

我们经常可以看到各个博客网站中用于编辑文章的富文本编辑器，在富文本编辑器中，我们可以对我们的编辑内容样式进行设置。富文本编辑器一般是通过插件来实现的，我们只需要在页面中配置一下

落日映苍穹つ/ 2021年06月10日 20:38/ 0 赞/ 790 阅读