ThinkPHP中使用Ueditor富文本编辑器，-php手册-php.cn

ThinkPHP中使用Ueditor富文本编辑器，

집

php教程

php手册

ThinkPHP中使用Ueditor富文本编辑器，

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 08:55 AM

thinkphp 리치 텍스트 편집기

ThinkPHP中使用Ueditor富文本编辑器，

具体插件下载：
http://ueditor.baidu.com/website/download.html#ueditor

UEditor官方文档：
http://ueditor.baidu.com/website/document.html

之前于 "ThinkPHP-代码" 案例中发布版本：
http://www.thinkphp.cn/code/175.html

UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等)

例：在Tpl/model/model.html :

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

<html>
<title>Ueditor文本编辑器</title>
<head>
  <title>完整demo</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
   
  <load href="__PUBLIC__/Ueditor/ueditor.config.js" />
  <load href="__PUBLIC__/Ueditor/ueditor.all.min.js" />
   
  <!--使用版-->
  <!--<script type="text/javascript" charset="utf-8" src="../ueditor.all.js"></script>-->
  
  <!--开发版-->
  <!--<script type="text/javascript" charset="utf-8" src="editor_api.js"> </script>-->
  
  <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  <load href="__PUBLIC__/Ueditor/lang/zh-cn/zh-cn.js" />
  
  <style type="text/css">
    .clear {
      clear: both;
    }
  </style>
</head>
<body>
<div>
<form name='MyForm' id='MyForm' method='POST' action="__URL__/message_insert" >
  <script id="editor" name="editor" type="text/plain" style="width:1024px;height:300">
    从数据库中取出文章内容打印到此处！！！
  </script>
</form>
</div>
  
<div id="btns">
  <div>
    <button onclick="getAllHtml()">获得整个html的内容</button>
    <button onclick="getContent()">获得内容</button>
    <button onclick="setContent()">写入内容</button>
    <button onclick="setContent(true)">追加内容</button>
    <button onclick="getContentTxt()">获得纯文本</button>
    <button onclick="getPlainTxt()">获得带格式的纯文本</button>
    <button onclick="hasContent()">判断是否有内容</button>
    <button onclick="setFocus()">使编辑器获得焦点</button>
  </div>
  <div>
    <button onclick="getText()">获得当前选中的文本</button>
    <button onclick="insertHtml()">插入给定的内容</button>
    <button id="enable" onclick="setEnabled()">可以编辑</button>
    <button onclick="setDisabled()">不可编辑</button>
    <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
    <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
    <button onclick=" UE.getEditor('editor').setHeight(300)">设置编辑器的高度为300</button>
  </div>
  
</div>
<div>
  <button onclick="createEditor()"/>
  创建编辑器</button>
  <button onclick="deleteEditor()"/>
  删除编辑器</button>
   
  <button onclick="submitEditor()"/>
  提交</button>
</div>
</body>
<script type="text/javascript">
  
  //UEDITOR_HOME_URL、config、all这三个顺序不能改变(绝对路径)
  //window.UEDITOR_HOME_URL = "/ThinkPHP/Public/Ueditor/";  
   
  //实例化编辑器
  var ue = UE.getEditor('editor');
  
  function insertHtml() {
    var value = prompt('插入html代码', '');
    ue.execCommand('insertHtml', value)
  }
  function createEditor() {
    enableBtn();
    UE.getEditor('editor');
  }
  function getAllHtml() {
    alert(UE.getEditor('editor').getAllHtml())
  }
  function getContent() {
    var arr = [];
    arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    arr.push("内容为：");
    arr.push(UE.getEditor('editor').getContent());
    alert(arr.join("\n"));
  }
  function getPlainTxt() {
    var arr = [];
    arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
    arr.push("内容为：");
    arr.push(UE.getEditor('editor').getPlainTxt());
    alert(arr.join('\n'))
  }
  function setContent(isAppendTo) {
    var arr = [];
    arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    alert(arr.join("\n"));
  }
  function setDisabled() {
    UE.getEditor('editor').setDisabled('fullscreen');
    disableBtn("enable");
  }
  
  function setEnabled() {
    UE.getEditor('editor').setEnabled();
    enableBtn();
  }
  
  function getText() {
    //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
    var range = UE.getEditor('editor').selection.getRange();
    range.select();
    var txt = UE.getEditor('editor').selection.getText();
    alert(txt)
  }
  
  function getContentTxt() {
    var arr = [];
    arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
    arr.push("编辑器的纯文本内容为：");
    arr.push(UE.getEditor('editor').getContentTxt());
    alert(arr.join("\n"));
  }
  function hasContent() {
    var arr = [];
    arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    arr.push("判断结果为：");
    arr.push(UE.getEditor('editor').hasContents());
    alert(arr.join("\n"));
  }
  function setFocus() {
    UE.getEditor('editor').focus();
  }
  function deleteEditor() {
    disableBtn();
    UE.getEditor('editor').destroy();
  }
   
  //提交方法
  function submitEditor()  {
    //此处以非空为例
    if(ue.hasContents()){
      ue.sync();    //同步内容
      document.MyForm.submit();
    }
  }  
   
  function disableBtn(str) {
    var div = document.getElementById('btns');
    var btns = domUtils.getElementsByTagName(div, "button");
    for (var i = 0, btn; btn = btns[i++];) {
      if (btn.id == str) {
        domUtils.removeAttributes(btn, ["disabled"]);
      } else {
        btn.setAttribute("disabled", "true");
      }
    }
  }
  function enableBtn() {
    var div = document.getElementById('btns');
    var btns = domUtils.getElementsByTagName(div, "button");
    for (var i = 0, btn; btn = btns[i++];) {
      domUtils.removeAttributes(btn, ["disabled"]);
    }
  }
  
</script>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1667

Cakephp 튜토리얼

1426

라라벨 튜토리얼

1328

PHP 튜토리얼

1273

C# 튜토리얼

1255

Related knowledge

thinkphp 프로젝트를 실행하는 방법 Apr 09, 2024 pm 05:33 PM

ThinkPHP 프로젝트를 실행하려면 다음이 필요합니다: Composer를 설치하고, 프로젝트 디렉터리를 입력하고 php bin/console을 실행하고, 시작 페이지를 보려면 http://localhost:8000을 방문하세요.

thinkphp에는 여러 버전이 있습니다. Apr 09, 2024 pm 06:09 PM

ThinkPHP에는 다양한 PHP 버전용으로 설계된 여러 버전이 있습니다. 메이저 버전에는 3.2, 5.0, 5.1, 6.0이 포함되며, 마이너 버전은 버그를 수정하고 새로운 기능을 제공하는 데 사용됩니다. 최신 안정 버전은 ThinkPHP 6.0.16입니다. 버전을 선택할 때 PHP 버전, 기능 요구 사항 및 커뮤니티 지원을 고려하십시오. 최상의 성능과 지원을 위해서는 최신 안정 버전을 사용하는 것이 좋습니다.

thinkphp를 실행하는 방법 Apr 09, 2024 pm 05:39 PM

ThinkPHP Framework를 로컬에서 실행하는 단계: ThinkPHP Framework를 로컬 디렉터리에 다운로드하고 압축을 풉니다. ThinkPHP 루트 디렉터리를 가리키는 가상 호스트(선택 사항)를 만듭니다. 데이터베이스 연결 매개변수를 구성합니다. 웹 서버를 시작합니다. ThinkPHP 애플리케이션을 초기화합니다. ThinkPHP 애플리케이션 URL에 접속하여 실행하세요.

laravel과 thinkphp 중 어느 것이 더 낫나요? Apr 09, 2024 pm 03:18 PM

Laravel과 ThinkPHP 프레임워크의 성능 비교: ThinkPHP는 일반적으로 최적화 및 캐싱에 중점을 두고 Laravel보다 성능이 좋습니다. Laravel은 잘 작동하지만 복잡한 애플리케이션의 경우 ThinkPHP가 더 적합할 수 있습니다.

thinkphp를 설치하는 방법 Apr 09, 2024 pm 05:42 PM

ThinkPHP 설치 단계: PHP, Composer 및 MySQL 환경을 준비합니다. Composer를 사용하여 프로젝트를 만듭니다. ThinkPHP 프레임워크와 종속성을 설치합니다. 데이터베이스 연결을 구성합니다. 애플리케이션 코드를 생성합니다. 애플리케이션을 실행하고 http://localhost:8000을 방문하세요.

개발 제안: ThinkPHP 프레임워크를 사용하여 비동기 작업을 구현하는 방법 Nov 22, 2023 pm 12:01 PM

"개발 제안: ThinkPHP 프레임워크를 사용하여 비동기 작업을 구현하는 방법" 인터넷 기술의 급속한 발전으로 인해 웹 응용 프로그램은 많은 수의 동시 요청과 복잡한 비즈니스 논리를 처리하기 위한 요구 사항이 점점 더 높아졌습니다. 시스템 성능과 사용자 경험을 향상시키기 위해 개발자는 이메일 보내기, 파일 업로드 처리, 보고서 생성 등과 같이 시간이 많이 걸리는 작업을 수행하기 위해 비동기 작업을 사용하는 것을 종종 고려합니다. PHP 분야에서 널리 사용되는 개발 프레임워크인 ThinkPHP 프레임워크는 비동기 작업을 구현하는 몇 가지 편리한 방법을 제공합니다.

thinkphp 성능은 어떤가요? Apr 09, 2024 pm 05:24 PM

ThinkPHP는 캐싱 메커니즘, 코드 최적화, 병렬 처리 및 데이터베이스 최적화와 같은 장점을 갖춘 고성능 PHP 프레임워크입니다. 공식 성능 테스트에 따르면 초당 10,000개 이상의 요청을 처리할 수 있으며 JD.com, Ctrip과 같은 대규모 웹 사이트 및 엔터프라이즈 시스템에서 실제 응용 프로그램으로 널리 사용됩니다.

개발 제안: API 개발을 위해 ThinkPHP 프레임워크를 사용하는 방법 Nov 22, 2023 pm 05:18 PM

개발 제안: API 개발을 위해 ThinkPHP 프레임워크를 사용하는 방법 인터넷이 지속적으로 발전하면서 API(응용 프로그래밍 인터페이스)의 중요성이 점점 더 커지고 있습니다. API는 데이터 공유, 함수 호출 및 기타 작업을 실현할 수 있으며 개발자에게 비교적 간단하고 빠른 개발 방법을 제공합니다. 뛰어난 PHP 개발 프레임워크인 ThinkPHP 프레임워크는 효율적이고 확장 가능하며 사용하기 쉽습니다.

See all articles

ThinkPHP中使用Ueditor富文本编辑器，

ThinkPHP中使用Ueditor富文本编辑器，

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제