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

来源：互联网发布：docker python 编辑：程序博客网时间：2024/05/22 06:18

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

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

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);

2 0