A method of integrating the editor of ueditor with laravel framework

Time:2020-1-26

An example of this paper describes the integration of the laravel framework with the ueditor editor. To share with you for your reference, as follows:

1、 Background

  • In the process of project development, modification function is inevitable, and rich text editor is a very convenient recommendation, of course, I thinkMarkDownIt’s simpler, but it feels like it’s only for procedural apes
  • This article describes how toLaravel5.5Integration of rich text editor ueditor in framework

ps : In fact, the editor is just a tool, which can be used in various code languages or frameworks

2、 Discussion

  • Through searching for knowledge on the Internet, it is found that there are two main ways to achieve it

① . the first is to usecomposerFor installation, please refer to the article “laravel-u-editor”. I have tried it. I can’t upload pictures

② . the second is toUEditorThe official download source package is configured by itself (the following is mainly for this operation)

  • ps : [If anyone can successfully implement the first scheme, please let me know. Thank you very much!]

3、 Operation steps

❶. Download the corresponding source package

  • You can click to enter the download address. What you download is the latestPHP(UTF-8)Edition

❷. Place inPublicDirectory

  • Place the extracted folder in thePublicUnder the directory, I just changed the name of the folder

❸. Front end file configuration

  • Please refer to official documents for details
    Take me for example:

① . first of all, in the current page, you need to import JS files, and pay attention to analogysrcThe correct reference to

<! -- ueeditor MZ configuration file -- >
<script type="text/javascript" src="{{asset('ueditor-mz/ueditor.config.js')}}"></script>
<! -- editor source file -- >
<script type="text/javascript" src="{{asset('ueditor-mz/ueditor.all.js')}}"></script>
<! -- instantiation editor -- >
<script type="text/javascript">
 var ue = UE.getEditor('ue-container');
 ue.ready(function(){
  ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
 });
</script>

② . where you need to display the rich text editor, add the following code

<! -- load the editor's container -- >
<script name="content" type="text/plain">
@php
echo htmlspecialchars_decode($article['content']);
@endphp
</script>
<! -- the above PHP code is written according to the actual needs, where is the location of the initialization content -- >

③ . the effect is as follows:

Supplement.

① . in progressformWhen the form is submitted, thename="content"The transferred data can be written to the database, and the data stored in the database is as follows:

Copy codeThe code is as follows:
<p>< strong style = “white space: normal; padding: 0px; margin: 0px;” >. The first minute, 35 seconds, koshins pass, Zhu – Holliday three-point long-range hit. < span > < p > < p > < span style = “color: rgb (51, 51, 51);” > the 7th minute and 28th second, Peyton slipped the ball and was robbed by Corzine. The pelican launched a crazy attack on rebounds. In this section, he grabbed 16 rebounds, including 6 rebounds in the front court, of which Davis contributed 4 rebounds. </span></p><p style=”text-align: center;”><img src=”http://lar5Pro.com/upload/image/20171227/NjUzNDczMDc3ODU2.jpg” title=”NjUzNDczMDc3ODU2.jpg” alt=”article_3.jpg” width=”906″ height=”450″/><br/></p>

② . when the above data is obtained, to display in the front end, similar conversion code needs to be executed:


echo htmlspecialchars_decode($article['content']);
③ . in the rich text editor, the size of the picture can be adjusted by itself

4、 Extended learning

♩ image upload path

  • In fact, if it’s just a small website or a student’s class setting project, it doesn’t need to be modified. The uploaded pictures will be placed in thePublic/ueditor/php/upload/image/Directory

  • If you need to modify, you can enterphp/config.jsonFile, found configuration item"imagePathFormat"It is suggested that the file name should be longer to avoid duplicate names

[note]:
Personal initial test found that the definition of “{Rand: 6}” in file naming could not be implemented, but there was no similar solution on the Internet. Please refer to the following **** [appendix] **

♪ picture access prefix

  • If multiple servers are used, it is necessary to set a uniform picture access prefix. The configurable parameter “imageurlprefix”, for example, my configuration path can be:“http://lar5Pro.com”

  • In this way, the image path stored in the database will be prefixed with this prefix

Five, appendix

♭. Picture file name{rand:$num}Solve

  1. At first, I thought of using the time stamp plus the original name of the file as the name, but when there are Chinese characters, it can’t be uploaded.
  2. In fact, ueditor has been integrated into the original ThinkPHP framework, but there is no such problem. Read the source code to find the matching position of regular expressionsPublic/ueditor-mz/php/Uploader.class.php
  • It’s about line 304, becauserand() Too large value may lead to some environmental errors

  • I don’t think the number is better than the letter, so the code is replaced as follows:

//Todo replacement random string value is too large, which may cause some environment errors
$randNum = rand(100000, 10000000) . rand(100000, 10000000);
//You can also use MD5 () or a combination of both
$randNum = base64_encode($randNum);

Oh, ha ha.

  • It’s really embarrassing. The first test is still unsuccessful, so I love the second one
  • HELP !HELP!HELP!

[supplementary questions] (February 6, 2018):

The first problem that the EMM building owner can’t upload the picture was encountered by me at that time. Finally, I found that the interface path was not configured properly. In the ueeditor.config.js file under the laravl-u-editor directory, modify the server URL of about 33 lines to the corresponding path.

This question, may refer to the corresponding article prompt, next time has the opportunity to have a try

For more information about laravel, readers who are interested in the content can see the special topics of this site: introduction and advanced course of laravel framework, summary of PHP excellent development framework, introduction course of PHP object-oriented programming, introduction course of PHP + MySQL database operation and summary of PHP common database operation skills

I hope that this article will be helpful for you to Design PHP program based on laravel framework.