ANGULARJS Custom style inserts into the Ueditor summary of issues _ANGULARJS

To summarize the problems you encountered in customizing your style to the editor, the main editor of the two development interface, as well as the use of angular custom style, a lot of problems, and finally with the help of * *, completed, and the remaining old version and the new version of the interaction is not done, but not difficult. Let's explain the problem separately.

The development of Ueditor

You can download any version of the official web, the use can be: http://ueditor.baidu.com/website/download.html download in accordance with the official online configuration can be used. Document Address: http://fex.baidu.com/ueditor/about the Ueditor two development problems are quite a lot, listed here.

1.ueditor automatically converts div tags into p tags

In the custom style process, found that div all filtered not p tags, online find a lot of information, but useless, and then see the great God wrote, different versions of the Ueditor configuration is not the same, here write my solution is: Open the Ueditor.config.js configuration file, add the following code:

Notice is in window. Uediroe_config inside manually add! In addition, some people encountered a similar situation solution, here can refer to: http://www.cnblogs.com/Olive116/p/3464495.html

2. How do I insert a custom style into the editor?

The interface is provided in the editor, let's take a look.

function inserthtml () {
var value = prompt (' Insert HTML code ', ');
Ue.geteditor (' editor '). ExecCommand (' inserthtml ', value)

So how do we use this interface in our own projects? The first thing to do is to actually format the editor, usually by directly using Ue.geteditor () to get the instance.

Using the factory method Geteditor to create and reference an editor instance, if you refer to the editor under a closure, call Ue.geteditor (' editor ') directly to the relevant instance before you can use the editor to invoke its method.

<script src= "Libs/ueditor/ueditor.config.js" ></script>
<script src= "libs/ueditor/" Ueditor.all.min.js "></script>

Create an instance of the editor in our angular project as follows, the editor provides a ready method to instantiate:

Create the actual column of the editor
$scope. Ready = function (ueditor) {
window.editor = ueditor;

OK, we can now use the editor instance of this editor. Next look at Ng's custom style.

NG Custom Style

First Look, we use the handwritten accordion menu style. Download Address: Https://github.com/foreverjiangting/set-menu/tree/master/menu The interaction used here uses the data-toggle= "collapse", but there is a conflict with Ng, So we need to use NG to control the interaction. Let's take a look at how to write:

<!--add Toolbar--> <div class= "Set-toolbar" > 
 

JS inside the code is as follows:

The toolbar interaction style
$scope. titlestyle = $scope. Titleicon = $scope. Titleyouxia = $scope. Titleserve = $titleArticle =false;
$scope. Toggle = function (style) {
$scope [style] =! $scope [style];
}

Ng control of the accordion effect, simple and lightweight, small amount of code.

The effect is as follows:

When the style is written, it is inserted into the editor, so how do you insert it? Here are two kinds, direct interpolation, and inserts based on the article after the search. Direct insertion is easier.

$scope. inserthtml = function (type, item) {
if (type = = ' titles ' | | |-type = = ' IMGs ') {
Editor.execcommand (' Insert Html ', item.html);
}

The effect after insertion is as follows:

What is the use of this? The main use of the contents of the editor, the use of NG data binding, reflected on the app, thus making the app's article editing interface.

Search function Making

The data is naturally obtained from the API, how does ng get the data in the API? We take a look, mainly using HTTP, get the data, and then use the then method for callback, get HTTP, get the data, and then use the then method for callback, get Scope.data data.

Angular.module (' service ')
. Service (' Articleservice ', function ($http) {return
{searcharticle:function ( Title) {return $http. Get (' Api/article/search ', {data: {Title:title}}}); });

Here we declare the Articleservice and return the API data to it, so we can call its method by injecting the dependency into the page to be invoked. Or look at the code: the usual service invocation

The data returned by the API is placed in a folder and the controller that controls the data is placed in a single folder, so let's look at how the data in the controller is invoked to back up the API.

Angular.module (' article.controllers ')
. Controller (' Servicectrl ', function ($scope, $rootScope, $filter, $ Timeout, $state, $stateParams, Contentservice, Articleservice, type) {

Note that you need to inject the articleservice into the controller before you can recall the data. How do you recall the data? Look at the following code:

var arcfullsearch={
text: ',
result: [],
selected: [],//Select the data after the first deposit in the array
beginsearch:function () {
var self = this;
var text = Self.text.trim ();
if (!text) return;
Articleservice.searcharticle (text). Then (
function (data) { 
//Get the second data representation of the information gets the contents of the array, the first is the incoming parameter 
Self.result = data.data;//Get Data
}, function (err) {
console.log (err);};} 
,}
;

OK, we succeeded in callback to the function data. About the search section, the following summary of the unclear knowledge points.

Summarizing knowledge points

1. How to make an array into a string

2. About replace replaced with function usage

ECMAScript stipulates that the parameter replacement of the replace () method can be a function or a string. In this case, each match calls the function, and it returns the word

The string will replace the text used. The first parameter returned by the function callback functions represents the matching character, and the second and subsequent grouped data are matched to. Look at the code.

3. About [P.slice (0,index)][p.slice (index+1)] What the hell is that? You'll know when you're debugging.

Then look at the synthetic code to see what it means.

var arr = serve.map (function (xx) {return
item.html.replace (/{{[\w\.] +?)}} /gi, function (match, p) {
var index = p.indexof ('. '); 
if (Index > 0) {return
Formatfield (xx[p.slice (0, index)][p.slice (index+1)]);
Formatfield (Xx[p]);}); 

4. About the principle of timer settimeout, first look at the code

Why is the output 1? Let's take a look at the principle settimeout ()

SetTimeout () executes only one code at a time. If you want to call more than once, use SetInterval () or let code itself call SetTimeout () again.

SetTimeout is used to delay a period of time and then perform an operation. That is, after loading and delaying the specified time, an expression is executed once.

settimeout (code, delay time);

The latency time is not the time you expect, different browsers, and latency. Take the example above, which means that the delay time is not 0 above. Contrast

That is, settimeout only executes once, but the time is not 0, the exact number of seconds delay, indeterminate. Then it's not surprising why the 1 came. Let's analyze the program,

When I=3, while (3), I is reduced to 2, performs a settimeout

When i=2, while (2), I is reduced to 1, performs a settimeout

When I=1, while (0), I is reduced to 2, performs a settimeout

When I=0, while (0), I minus 1, at which time the program ends, but setting the settimeout interval of 0 does not understand the execution, is inserted into the thread's execution queue, and waits until I

becomes-1, the previous three settimeout are executed, and I has changed to 1, so the output is-1. The console that was printed is the one that was printed by the console at this time.

SetTimeout is an asynchronous code, meaning that writing settimeout (FN, 100) does not necessarily mean that FN will execute immediately after 100 milliseconds, and the delay is likely to be longer. Because all the

Asynchronous events, including timers, or a xmlhttprequest completion, are only performed when there is idle time during the execution of the program, not when you specify when to execute.

The above is a small set to introduce the ANGULARJS custom style inserted into the ueditor of the problem summary, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!