富文本编辑器的应用，以及后台处理

最新推荐文章于 2024-05-20 09:49:01 发布

橘柚子

最新推荐文章于 2024-05-20 09:49:01 发布

阅读量3.4k

点赞数 4

分类专栏： php

本文链接：https://blog.csdn.net/qq_21987433/article/details/53140943

版权

php 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

记录一下我以前做的一个富文本编辑器，方便以后使用，也为大家提供一个快捷的方法

从前端到后台会为大家详尽代码

1.引入相关资源文件

（1）在html头部引入

  <link rel="stylesheet" href="__TMPL__/editor/lib/qunit/qunit.css" />
        <link rel="stylesheet" href="__TMPL__/editor/themes/default/default.css" />
        <!-- <script src="lib/firebug-lite/build/firebug-lite.js#startOpened"></script> -->
        <script src="__TMPL__/editor/lib/qunit/qunit.js"></script>
        <!-- include src files -->
        <script src="__TMPL__/editor/src/core.js"></script>
        <script src="__TMPL__/editor/src/config.js"></script>
        <script src="__TMPL__/editor/src/ajax.js"></script>
        <script src="__TMPL__/editor/src/event.js"></script>
        <script src="__TMPL__/editor/src/html.js"></script>
        <script src="__TMPL__/editor/src/selector.js"></script>
        <script src="__TMPL__/editor/src/node.js"></script>
        <script src="__TMPL__/editor/src/range.js"></script>
        <script src="__TMPL__/editor/src/cmd.js"></script>
        <script src="__TMPL__/editor/src/widget.js"></script>
        <script src="__TMPL__/editor/src/edit.js"></script>
        <script src="__TMPL__/editor/src/toolbar.js"></script>
        <script src="__TMPL__/editor/src/menu.js"></script>
        <script src="__TMPL__/editor/src/colorpicker.js"></script>
        <script src="__TMPL__/editor/src/uploadbutton.js"></script>
        <script src="__TMPL__/editor/src/dialog.js"></script>
        <script src="__TMPL__/editor/src/tabs.js"></script>
        <script src="__TMPL__/editor/src/main.js"></script>
        <script src="__TMPL__/editor/lang/zh-CN.js"></script>
        <!--    <script src="__TMPL__/editor/lang/en.js"></script>-->
        <script src="__TMPL__/editor/plugins/emoticons/emoticons.js"></script>
        <script src="__TMPL__/editor/plugins/flash/flash.js"></script>
        <script src="__TMPL__/editor/plugins/image/image.js"></script>
        <script src="__TMPL__/editor/plugins/link/link.js"></script>
        <script src="__TMPL__/editor/plugins/media/media.js"></script>
        <script src="__TMPL__/editor/plugins/plainpaste/plainpaste.js"></script>
        <script src="__TMPL__/editor/plugins/table/table.js"></script>
        <script src="__TMPL__/editor/plugins/wordpaste/wordpaste.js"></script>
        <script src="__TMPL__/editor/plugins/filemanager/filemanager.js"></script>
        <script src="__TMPL__/editor/plugins/preview/preview.js"></script>
        <script src="__TMPL__/editor/plugins/code/code.js"></script>
        <script src="__TMPL__/editor/plugins/map/map.js"></script>
        <script src="__TMPL__/editor/plugins/lineheight/lineheight.js"></script>

(2)在最后引入

<script src="__TMPL__/editor/editor.js"></script>

这些资源我将会上传我的资源

html

<textarea placeholder="请输入协议内容" cols="400" rows="5" id="content1" name="agreement" style="width:90%;height:250px;visibility:hidden;"> 
                                   
                                </textarea>

显示时，后台需要处理提交的文本内容，否则会出现乱码，我们需要想那些标签意义去掉

$itemtype['agreement'] = str_replace("\r", "", $itemtype['agreement']);
		$agreement = str_replace('</p>', '</p>', $itemtype['agreement']);
		$agreement = str_replace('<p', '<p', $agreement);
		$agreement = str_replace('>', '>', $agreement);
		$agreement = str_replace('<', '<', $agreement);
		$agreement = str_replace('"', '"', $agreement);
		$agreement = str_replace('&emsp;', '', $agreement);
		$agreement = str_replace('&nbsp;', ' ', $agreement);